build: fix off.html deploy on staging (#132)

Makes https://search.openfoodfacts.net/static/off.html work.

* fix docker image generation for frontend
* fix nginx config
* have a way to use bundled in prod or staging and non bundled in dev
---------

Co-authored-by: Kout95 <[email protected]>

.github/workflows/container-build.yml

@@ -19,14 +19,19 @@ jobs:
 
     steps:
     - name: variables for service
-      if: matrix.env == 'search_service_image'
+      if: matrix.image_name == 'search_service_image'
       run: |
-        echo "DOCKER_CONTEXT=." >> $GITHUB_ENV
+        echo "BUILD_CONTEXT=." >> $GITHUB_ENV
+        # Use runtime target, so that dev dependencies are not included
+        echo "BUILD_TARGET=runtime" >> $GITHUB_ENV
+        echo "BUILD_FILE=Dockerfile" >> $GITHUB_ENV
 
     - name: variables for front
-      if: matrix.env == 'search_front_image'
+      if: matrix.image_name == 'search_front_image'
       run: |
-        echo "DOCKER_CONTEXT=frontend" >> $GITHUB_ENV
+        echo "BUILD_CONTEXT=frontend" >> $GITHUB_ENV
+        echo "BUILD_TARGET=frontend" >> $GITHUB_ENV
+        echo "BUILD_FILE=frontend/Dockerfile" >> $GITHUB_ENV
 
     - uses: actions/checkout@v4
       with:
@@ -60,11 +65,10 @@ jobs:
     - name: Build and push
       uses: docker/build-push-action@v5
       with:
-        context: ${{ env.DOCKER_CONTEXT }}
-        # Use runtime target, so that dev dependencies are not included
-        target: runtime
+        context: ${{ env.BUILD_CONTEXT }}
+        target: ${{ env.BUILD_TARGET }}
+        file: ${{ env.BUILD_FILE }}
         push: true
-        file: Dockerfile
         cache-from: type=registry,ref=ghcr.io/${{ github.repository }}/${{ matrix.image_name }}:buildcache
         cache-to: type=registry,ref=ghcr.io/${{ github.repository }}/${{ matrix.image_name }}:buildcache,mode=max
         tags: ${{ steps.meta.outputs.tags }}

.github/workflows/container-deploy.yml

@@ -53,16 +53,26 @@ jobs:
         echo "ALLOWED_ORIGINS='http://localhost,http://127.0.0.1,https://*.openfoodfacts.org,https://*.openfoodfacts.net'" >> $GITHUB_ENV
         # REDIS_HOST: this is the IP address of the stunnel VM
         echo "REDIS_HOST=10.1.0.113" >> $GITHUB_ENV
-    - name: Wait for search image container build workflow
+    - name: Wait for search service image container build workflow
       uses: tomchv/[email protected]
-      id: wait-build
+      id: wait-build-service-image
       with:
         token: ${{ secrets.GITHUB_TOKEN }}
         checkName: build (search_service_image)
         ref: ${{ github.event.pull_request.head.sha || github.sha }}
         intervalSeconds: 10
         timeoutSeconds: 600 # 10m
 
+    - name: Wait for search front image container build workflow
+      uses: tomchv/[email protected]
+      id: wait-build-front-image
+      with:
+        token: ${{ secrets.GITHUB_TOKEN }}
+        checkName: build (search_front_image)
+        ref: ${{ github.event.pull_request.head.sha || github.sha }}
+        intervalSeconds: 10
+        timeoutSeconds: 600 # 10m
+
     - name: Do something if build isn't launch
       if: steps.wait-build.outputs.conclusion == 'does not exist'
       run: echo job does not exist && true

confs/nginx.conf

@@ -30,6 +30,10 @@ server {
 	# web server dev has specific urls, we want to redirect them to static
 	rewrite ^/(__wds-|__web-dev-server)(.*)$ /static/$1$2 last;
 
+	# Temporary hack: redirect bundled to base js for dev
+	location /static${DEV_UI_SUFFIX}/search-a-licious.bundled.js {
+		return 302 $scheme://$http_host/static/dist/search-a-licious.js;
+	}
 
 	# Static files - in DEV = node server
 	location /static${DEV_UI_SUFFIX} {
@@ -46,6 +50,7 @@ server {
 	# Static files - in PROD = files on disk
 	location /static${PROD_UI_SUFFIX} {
 		root /opt/search-a-licious/public/;
+		rewrite ^/static(.*)$ $1 break;
 		try_files $uri $uri/ /index.html;
 	}
 	# all other requests goes to API

docker-compose.yml

@@ -106,13 +106,11 @@ services:
       - api
     environment:
       # enabling prod config and disabling dev one
-      PROD_UI_SUFFIX: "${PROD_UI_SUFFIX--static}"
-      DEV_UI_SUFFIX: "${DEV_UI_SUFFIX-}"
+      PROD_UI_SUFFIX: "${PROD_UI_SUFFIX-}"
+      DEV_UI_SUFFIX: "${DEV_UI_SUFFIX--static}"
     volumes:
       # Nginx, we use templates dir to be able to use environment vars
       - ./confs/nginx.conf:/etc/nginx/templates/default.conf.template
-      # dynamic mount
-      - ./frontend/public:/opt/search-a-licious/public
     ports:
       - ${SEARCH_EXPOSE:-127.0.0.1:8000}:80
     build:

frontend/Dockerfile

@@ -61,7 +61,7 @@ RUN rm -rf public/dist/* && npm run build && npm run bundle
 CMD ["npm", "run", "serve"]
 
 # nginx
-FROM nginx:stable
+FROM nginx:stable as frontend
 WORKDIR /opt/search-a-licious
 ARG USER_UID
 ARG USER_GID

frontend/public/off.html

@@ -9,7 +9,7 @@
       href="https://static.openfoodfacts.org/css/dist/app-ltr.css?v=1695281325"
       data-base-layout="true"
     />
-    <script type="module" src="./dist/search-a-licious.js"></script>
+    <script type="module" src="./search-a-licious.bundled.js"></script>
     <style>
       /* temporary inline styles to test CSS customization */
       /* search bar styling */