Improve Dockerfile and enable pipeline to automate docker image gen…

…eration (#388)

* feat: added a new workflow to create a docker image when a new pre-release has been created

* feat: added a new workflow: pre-build

* feat: remove node alpine to allow node gyp installation libraries

* feat: fixing some issues in Dockerfile

* feat: added dockerignore file and fix Dockerfile multi-stage

* feat: added dev mode stage in Dockerfile and fix docker compose to allow the use of this stage

* feat: replace env variable and start using playwright

* Remove `nuxt-ssr-cache` and move dependencies (#415)

* Remove `nuxt-ssr-cache` and `patch-package`

* Correct dependencies placement

* Change `dropdown.spec.js` to use testing-library

* Add `VIcon` to stubs in audio-track.spec.js
This removes its warnings when running the test.

* Bump node version to 16.13.0 on ci workflow

* Keep prettier at v2.2.1

* Move `vue-i18n-extract` and `babel-jest` to devDependencies

* fix: port reference in dockerfile and docker-compose.yaml

* Remove duplicated browse page mocked field

Co-authored-by: Krystle Salazar <krystle.salazar@automattic.com>
Co-authored-by: Zack Krida <zackkrida@pm.me>

.dockerignore

@@ -0,0 +1,41 @@
+# os
+.DS_Store
+
+# directories
+node_modules/
+dist/
+test/
+.storybook/
+.husky/
+.github/
+.idea/
+.vscode/
+.nuxt/
+.nuxt-storybook
+storybook-static
+.vercel
+.git
+
+# log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+selenium-debug.log
+
+# files
+.env
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+vercel.json
+.eslintcache
+.editorconfig
+.eslintignore
+.eslintrc.js
+.lintstagedrc
+.prettierignore
+*.md
+LICENSE
+
+

.github/workflows/build.yaml

@@ -0,0 +1,52 @@
+# this build is triggered when a new pre-release has been created
+# it creates a new docker build image based on the tag associated
+
+name: build
+
+on:
+  release:
+    types:
+      - 'prereleased'
+env:
+  AWS_REGION: ${{ secrets.AWS_REGION }}
+  AWS_ACCOUNT_ID: ${{ secrets.AWS_ACCOUNT_ID }}
+  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+
+jobs:
+  build:
+    name: build
+    runs-on: ubuntu-latest
+
+    steps:
+      # download the source code into the runner
+      - name: checkout
+        uses: actions/checkout@v2
+
+      # gather metadata from git & github actions to reference in docker
+      - name: git & github metadata
+        id: metadata
+        uses: docker/metadata-action@v3
+        with:
+          images: ${{ env.AWS_ACCOUNT_ID }}.dkr.ecr.${{ env.AWS_REGION }}.amazonaws.com/openverse/frontend
+
+      # setup docker buildx
+      - name: setup docker buildx
+        uses: docker/setup-buildx-action@v1
+        with:
+          install: true
+
+      # login in docker repository
+      - name: docker login
+        uses: aws-actions/amazon-ecr-login@v1
+
+      # build a docker image
+      - name: build docker image
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          tags: ${{ steps.metadata.outputs.tags }}
+          labels: ${{ steps.metadata.outputs.labels }}
+          push: true
+
+

.github/workflows/pre-build.yaml

@@ -0,0 +1,48 @@
+# this workflow will try to lint and build a node.js application
+#
+# this is useful for stages that you require to make sure everything is working
+# properly before creating a container image to be pushed on the cloud
+#
+name: pre_build
+
+on:
+  pull_request:
+  push:
+    branches:
+      - 'main'
+      - 'ci/*' # branches that follows the pattern ci/* can access this workflow too
+
+jobs:
+  pre_build:
+    name: pre_build
+    runs-on: ubuntu-latest
+
+    steps:
+      # download the source code into the runner
+      - name: checkout
+        uses: actions/checkout@v2
+
+      # setup node.js environment and npm
+      - name: setup node environment
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16.x'
+
+      # lookup cache dependencies already defined, based on the hash generated from the file
+      # yarn.lock
+      - name: cache dependencies
+        id: cache-node-modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node-modules-${{ hashFiles('package-lock.json') }}
+
+      # install dependencies only if the cache is not present
+      - name: install dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: npm install
+
+      # run lint and syntax
+      - name: lint & syntax check
+        run: npm run lint
+

Dockerfile

@@ -1,19 +1,91 @@
-FROM node:14-alpine
+# ==
+# builder
+# ==
+
+# application builder
+FROM node:16 AS builder
 
-# directory for the app in the container
 WORKDIR /usr/app
 
-# copies all the app's files from host into the container folder which
-# might include the node_modules dir if npm install executed in the host
+# copy package.json and package-lock.json files
+COPY package*.json .
+
+# install dependencies including local development tools
+RUN npm install
+
+# copy the rest of the content
 COPY . /usr/app
 
-# removes any existing node_modules folder
-# this prevents the host's node_modules from being used in the container
-# which could cause issues with native binaries such as node_sass.
-RUN rm -rf /usr/app/node_modules/
+# disable telemetry when building the app
+ENV NUXT_TELEMETRY_DISABLED=1
+
+# build the application and generate a distribution package
+RUN npm run build
+
+# ==
+# development
+# ==
+# application for development purposes
+FROM node:16 AS dev
+
+WORKDIR /usr/app
 
+ENV NODE_ENV=development
 ENV CYPRESS_INSTALL_BINARY=0
 
-RUN npm install -g npm@7.21.0 && \
-    npm install && \
-    npm run i18n:get-translations
+# copy files from local machine
+COPY . /usr/app
+
+# disable telemetry when building the app
+ENV NUXT_TELEMETRY_DISABLED=1
+
+# install dependencies (development dependencies included)
+RUN npm install
+
+# expose port 8443
+EXPOSE 8443
+
+# run the application in development mode
+ENTRYPOINT [ "npm", "run", "dev" ]
+
+# ==
+# production
+# ==
+# application package (for production)
+FROM node:alpine AS app
+
+WORKDIR /usr/app
+
+ENV NODE_ENV=production
+ENV PLAYWRIGHT_SKIP_BROWSER_GC=1
+
+# copy the package.json and package-lock.json files
+COPY package*.json .
+
+# copy the nuxt configuration file
+COPY --from=builder /usr/app/nuxt.config.js .
+
+# copy distribution directory with the static content
+COPY --from=builder /usr/app/.nuxt /usr/app/.nuxt
+
+# copy some files required by nuxt.config.js
+COPY --from=builder /usr/app/src/locales /usr/app/src/locales
+COPY --from=builder /usr/app/src/utils  /usr/app/src/utils
+
+RUN npm ci --only=production --ignore-script
+
+# set app serving to permissive / assigned
+ENV NUXT_HOST=0.0.0.0
+
+# set app port
+ENV NUXT_PORT=8443
+
+# set application port
+ENV PORT=8443
+
+# expose port 8443 by default
+EXPOSE 8443
+
+# run the application in static mode
+ENTRYPOINT ["npm", "start"]
+

docker-compose.yml

@@ -1,10 +1,12 @@
 version: '3'
 services:
   web:
-    build: .
-    command: npm run dev
+    build:
+      context: .
+      target: dev
     ports:
       - '8443:8443'
     environment:
       # HOST is necessary for Nuxt + Docker
       HOST: 0.0.0.0
+      PORT: 8443