feat: frontend with dynamic env vars

deploy/compose/.env.frontend

@@ -0,0 +1,17 @@
+# ----------------------------- Local Environment ---------------------------- #
+
+NEXT_PUBLIC_REST_ENPOINT="http://localhost:8000/api"
+NEXT_PUBLIC_WS_ENPOINT="http://localhost:5000/"
+# ---------------------------------------------------------------------------- #
+
+# -------------------------- Production Environment -------------------------- #
+
+#NEXT_PUBLIC_REST_ENPOINT="https://demo.oktopus.app.br/api"
+#NEXT_PUBLIC_WS_ENPOINT="https://demo.oktopus.app.br/"
+# ---------------------------------------------------------------------------- #
+
+# ---------------------------- Mocked Environment ---------------------------- #
+
+#NEXT_PUBLIC_REST_ENPOINT="https://d9962fd9-2464-4a30-9a86-a15a04b57ad0.mock.pstmn.io"
+
+# ---------------------------------------------------------------------------- #

frontend/build/.dockerignore

@@ -0,0 +1 @@
+.next/

frontend/build/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16.20.2-alpine
+FROM node:16.20.2-alpine as builder
 
 WORKDIR /app
 
@@ -6,6 +6,24 @@ COPY ../ .
 
 RUN npm install 
 
-RUN npm run build
+RUN NEXT_PUBLIC_REST_ENPOINT=REST_API_URL NEXT_PUBLIC_WS_ENPOINT=WS_URL npm run build
 
-ENTRYPOINT [ "npm", "run", "start" ]
+RUN ls -la && echo "Listing directory contents done"
+
+FROM node:16.20.2-alpine as runner
+
+WORKDIR /app
+
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/build/entrypoint.sh ./entrypoint.sh
+COPY --from=builder /app/public ./public
+
+
+RUN npm install
+
+RUN chmod 755 entrypoint.sh
+
+ENTRYPOINT ["/app/entrypoint.sh"]
+
+CMD [ "npm", "run", "start" ]

frontend/build/Makefile

@@ -27,6 +27,7 @@ help:
 	@echo "logs - show logs of docker container"
 	@echo "bash - access container shell"
 	@echo "release - tag image as latest and push to registry"
+	@echo "tag - tag image as latest"
 
 build:
 	@docker build -t ${DOCKER_USER}/${DOCKER_APP}:${DOCKER_TAG} -f Dockerfile ../
@@ -58,4 +59,7 @@ bash:
 release: build
 	@docker push ${DOCKER_USER}/${DOCKER_APP}:${DOCKER_TAG}
 	@docker tag ${DOCKER_USER}/${DOCKER_APP}:${DOCKER_TAG} ${DOCKER_USER}/${DOCKER_APP}:latest
-	@docker push ${DOCKER_USER}/${DOCKER_APP}:latest
+	@docker push ${DOCKER_USER}/${DOCKER_APP}:latest
+
+tag:
+	docker tag ${DOCKER_USER}/${DOCKER_APP}:${DOCKER_TAG} ${DOCKER_USER}/${DOCKER_APP}:latest

frontend/build/entrypoint.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/env sh
+set -Ex
+
+function apply_path {
+
+    echo "Check that we have NEXT_PUBLIC_REST_ENPOINT vars"
+    test -n "$NEXT_PUBLIC_REST_ENPOINT"
+
+    echo "Check that we have NEXT_PUBLIC_WS_ENPOINT vars"
+    test -n "$NEXT_PUBLIC_WS_ENPOINT"
+
+    find /app/.next \( -type d -name .git -prune \) -o -type f -print0 | xargs -0 sed -i "s#REST_API_URL#$NEXT_PUBLIC_REST_ENPOINT#g"
+    find /app/.next \( -type d -name .git -prune \) -o -type f -print0 | xargs -0 sed -i "s#WS_URL#$ENVIROMENT_VAR#g"
+}
+
+apply_path
+echo "Starting Nextjs"
+exec "$@"