Improve Dockerfile and enable pipeline to automate docker image generation

.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,41 @@
-FROM node:14-alpine
+# application builder
+FROM node:16-alpine 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/
+# build the application and generate a distribution package
+RUN npm run build
+
+# application package
+FROM node:16-alpine AS app
 
+WORKDIR /usr/app
+
+ENV NODE_ENV=production
 ENV CYPRESS_INSTALL_BINARY=0
 
-RUN npm install -g npm@7.21.0 && \
-    npm install && \
-    npm run i18n:get-translations
+# copy the package.json and package-lock.json files
+COPY package*.json .
+
+RUN npm install
+
+# copy distribution directory with the static content
+COPY --from=builder /usr/app/dist /usr/app/dist
+
+
+# expose port 3000 by default
+# https://nuxtjs.org/docs/features/configuration/#edit-host-and-port
+EXPOSE 3000
+
+# run the application in static mode
+CMD ["npm", "start"]
+