Merge pull request #61 from gobitfly/add_frontend_dockerfile_ci_built

Add frontend dockerfile / linter ci

.github/workflows/frontend-lint-format.yml

@@ -1,30 +1,33 @@
-name: Lint & Format
+name: Frontend Linter
 
-# TODO frontend
 on:
   push:
+    paths:
+      - 'frontend/**'
     branches:
-      - master
-      - staging
+      - main
   pull_request:
+    paths:
+      - 'frontend/**'
     branches:
-      - staging
-      - master
+      - '*'
 
 jobs:
-  lint-format:
-    name: lint-format
+  frontend-lint:
+    name: lint
     runs-on: ubuntu-latest
     steps:
     - name: Checkout Repository
       uses: actions/checkout@v3
     - name: Setup Node Environment
       uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: 18
     - name: Install Dependencies
-      run: npm ci
-    - name: Check File Format
-      run: npm run check-format
+      working-directory: frontend
+      env:
+        FA_PRO_KEY: ${{ secrets.FA_PRO_KEY }}
+      run: npm --userconfig=".npmrc_ci" ci
     - name: Lint Files
-      run: npm run check-style
+      working-directory: frontend
+      run: npm run lint

.github/workflows/frontend-publish-docker.yml

@@ -0,0 +1,53 @@
+#
+name: Create and publish a Docker image
+
+# Configures this workflow to run every time a change is pushed to the branch called `release`.
+on:
+  push:
+    paths:
+      - 'frontend/**'
+    branches:
+      - main
+
+# Defines two custom environment variables for the workflow. These are used for the Container registry domain, and a name for the Docker image that this workflow builds.
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+# There is a single job in this workflow. It's configured to run on the latest available version of Ubuntu.
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    # Sets the permissions granted to the `GITHUB_TOKEN` for the actions in this job.
+    permissions:
+      contents: read
+      packages: write
+      # 
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      # Uses the `docker/login-action` action to log in to the Container registry registry using the account and password that will publish the packages. Once published, the packages are scoped to the account defined here.
+      - name: Log in to the Container registry
+        uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      # This step uses [docker/metadata-action](https://github.com/docker/metadata-action#about) to extract tags and labels that will be applied to the specified image. The `id` "meta" allows the output of this step to be referenced in a subsequent step. The `images` value provides the base name for the tags and labels.
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+      # This step uses the `docker/build-push-action` action to build the image, based on your repository's `Dockerfile`. If the build succeeds, it pushes the image to GitHub Packages.
+      # It uses the `context` parameter to define the build's context as the set of files located in the specified path. For more information, see "[Usage](https://github.com/docker/build-push-action#usage)" in the README of the `docker/build-push-action` repository.
+      # It uses the `tags` and `labels` parameters to tag and label the image with the output from the "meta" step.
+      - name: Build and push Docker image
+        uses: docker/[email protected]
+        with:
+          context: "{{defaultContext}}:frontend"
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          secrets: |
+            NPMRC_FILE=${{ secrets.NPMRC_FILE }}  

frontend/.npmrc_ci

@@ -0,0 +1 @@
+//npm.fontawesome.com/:_authToken=${FA_PRO_KEY}

frontend/Dockerfile

@@ -0,0 +1,20 @@
+FROM node:18-alpine AS build
+
+RUN mkdir -p /usr/src/nuxt-app
+WORKDIR /usr/src/nuxt-app
+COPY . .
+
+RUN --mount=type=secret,id=NPMRC_FILE,target=/usr/src/nuxt-app/.npmrc \
+    npm ci && npm cache clean --force
+RUN npm run build
+
+FROM node:18-alpine
+WORKDIR /usr/src/nuxt-app
+COPY --from=build /usr/src/nuxt-app /usr/src/nuxt-app
+
+ENV NUXT_HOST=0.0.0.0
+ENV NUXT_PORT=3000
+
+EXPOSE 3000 
+
+ENTRYPOINT ["node", ".output/server/index.mjs"]