Merge pull request #959 from Code4GovTech/feat/c4gt-2024-navbar

C4GT 2024 Frontend

.github/workflows/deploy.yml

@@ -1,31 +1,142 @@
-name: Test and deploy
+name: Build
+
+env:
+  APP_NAME: CMS-FE
+  PROJECT_NAME: CMS-FE
+  DOCKER_COMPOSE_PATH: /root/app/docker-compose.yml
+  REGISTRY: ghcr.io
+  DOCKER_REGISTRY: ghcr.io/code4govtech/dmp-cms-fe
+  DOT_ENV_FILE_NAME: env.dmp-cms-fe
 
 on:
+  workflow_dispatch:
   push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
+    branches:
+      - dev
+      - main
+
+permissions:
+  contents: write
+  packages: write
+
 
 jobs:
-  build:
+  set_vars:
+    name: Set Environment Variables
+    runs-on: ubuntu-latest
+    outputs:
+      TAG_LATEST: ${{ steps.tag_values.outputs.TAG_LATEST }}
+      TAG_ENV_COMMIT: ${{ steps.tag_values.outputs.TAG_ENV_COMMIT }}
+      APP_ENV: ${{ steps.tag_values.outputs.APP_ENV }}
+    steps:
+      - name: Set Docker Image Tags
+        id: tag_values
+        run: |
+          case "${{ github.ref }}" in
+            'refs/heads/main')
+              echo "TAG_LATEST=prod-latest" >> $GITHUB_OUTPUT
+              echo "TAG_ENV_COMMIT=prod-${GITHUB_SHA:0:5}" >> $GITHUB_OUTPUT
+              echo "APP_ENV=PROD" >> $GITHUB_OUTPUT
+              ;;
+            'refs/heads/devops')
+              echo "TAG_LATEST=dev-latest" >> $GITHUB_OUTPUT
+              echo "TAG_ENV_COMMIT=dev-${GITHUB_SHA:0:5}" >> $GITHUB_OUTPUT
+              echo "APP_ENV=DEV" >> $GITHUB_OUTPUT
+              ;;
+            'refs/heads/dev')
+              echo "TAG_LATEST=dev-latest" >> $GITHUB_OUTPUT
+              echo "TAG_ENV_COMMIT=dev-${GITHUB_SHA:0:5}" >> $GITHUB_OUTPUT
+              echo "APP_ENV=DEV" >> $GITHUB_OUTPUT
+              ;;
+          esac
 
+  build:
+    name: Build
     runs-on: ubuntu-latest
+    needs: [set_vars]
+    permissions:
+      contents: read
+      packages: write
+    env:
+      TAG_LATEST: ${{ needs.set_vars.outputs.TAG_LATEST }}
+      TAG_ENV_COMMIT: ${{ needs.set_vars.outputs.TAG_ENV_COMMIT }}
+      API_BASE_URL: ${{ vars[format('APP_{0}_API_BASE_URL', needs.set_vars.outputs.APP_ENV)] }}
+      API_AUTH_KEY: ${{ secrets[format('APP_{0}_API_AUTH_KEY', needs.set_vars.outputs.APP_ENV)] }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
 
-    strategy:
-      matrix:
-        node-version: [16.x]
+      # - name: Login to GitHub Packages
+      #   run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login docker.pkg.github.com -u ${{ github.actor }} --password-stdin
 
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
+      - name: Log in to the Container registry
+        uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
 
-    - name: Set up Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
+      - name: Set Docker Tags
+        uses: actions/setup-node@v2
 
-    - name: Install dependencies
-      run: yarn install --frozen-lockfile 
+      - name: Read Secrets
+        run: |
+          echo "API_BASE_URL=${API_BASE_URL}" >> .env
+          echo "API_AUTH_KEY=${API_AUTH_KEY}" >> .env
+          cp .env ${{ env.DOT_ENV_FILE_NAME }}
+
+      - name: Copy env file to DEV Server
+        uses: appleboy/[email protected]
+        if: needs.set_vars.outputs.APP_ENV == 'DEV'
+        with:
+          host: ${{ vars.DEV_SERVER_HOST }}
+          username: ${{ vars.DEV_SERVER_USERNAME }}
+          key: ${{ secrets.DEV_SSH_PRIVATE_KEY }}
+          port: ${{ vars.DEV_SERVER_PORT }}
+          source: "${{ env.DOT_ENV_FILE_NAME }}"
+          target: /root/app/
+
+      - name: Build ${{ env.APP_NAME }} Docker image
+        run: |
+          docker build --build-arg API_BASE_URL=$API_BASE_URL --build-arg API_AUTH_KEY=$API_AUTH_KEY -t ${{ env.DOCKER_REGISTRY }}:${{ env.TAG_LATEST }} .
+
+      - name: Add tag to Docker image
+        run: |
+          echo ${{ github.sha }}
+          docker tag ${{ env.DOCKER_REGISTRY }}:${{ env.TAG_LATEST }} ${{ env.DOCKER_REGISTRY }}:${{ env.TAG_ENV_COMMIT }}
+
+      - name: Push Docker image to GitHub Packages
+        run: |
+          docker push ${{ env.DOCKER_REGISTRY }}:${{ env.TAG_LATEST }}
+          docker push ${{ env.DOCKER_REGISTRY }}:${{ env.TAG_ENV_COMMIT }}
+
+  deploy:
+    name: Deployment
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.event_name == 'push' && github.ref_type == 'branch'
+
+    steps:
+      - name: Deploy to DevOps/Dev Environment
+        if: github.ref == 'refs/heads/devops' || github.ref == 'refs/heads/dev'
+        uses: appleboy/[email protected]
+        env:
+          DOCKER_COMPOSE_PATH: ${{ env.DOCKER_COMPOSE_PATH }}
+          APP_NAME: ${{ env.APP_NAME }}
+          DOCKER_REGISTRY: ${{ env.DOCKER_REGISTRY }}
+        with:
+          host: ${{ vars.DEV_SERVER_HOST }}
+          username: ${{ vars.DEV_SERVER_USERNAME }}
+          key: ${{ secrets.DEV_SSH_PRIVATE_KEY }}
+          port: ${{ vars.DEV_SERVER_PORT }}
+          allenvs: true
+          script_stop: true
+          envs: DOCKER_COMPOSE_PATH,APP_NAME,DOCKER_REGISTRY
+          script: |
+            echo "Docker Compose Path $DOCKER_COMPOSE_PATH"
+            docker compose -f $DOCKER_COMPOSE_PATH pull
+            docker compose -f $DOCKER_COMPOSE_PATH up -d
 
-    - name: Build
-      run: yarn build
+      - name: Deploy to Prod environment
+        if: github.ref == 'refs/heads/main'
+        run: echo "Deploying to Kubernetes"

.gitignore

@@ -17,6 +17,7 @@ npm-shrinkwrap.json
 
 # Misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

Dockerfile

@@ -0,0 +1,39 @@
+# syntax=docker/dockerfile:1
+
+## Start with a base image containing NodeJS so we can build Docusaurus.
+FROM node:lts as base
+## Disable colour output from yarn to make logs easier to read.
+ENV FORCE_COLOR=0
+## Enable corepack.
+RUN corepack enable
+## Set the working directory to `/opt/docusaurus`.
+WORKDIR /opt/docusaurus
+
+# Stage 2b: Production build mode.
+FROM base as prod
+## Set the working directory to `/opt/docusaurus`.
+WORKDIR /opt/docusaurus
+## Copy over the source code.
+COPY . /opt/docusaurus/
+## Install dependencies with `--immutable` to ensure reproducibility.
+RUN npm ci
+
+ARG API_BASE_URL
+ARG API_AUTH_KEY
+
+ENV API_BASE_URL=$API_BASE_URL
+ENV API_AUTH_KEY=$API_AUTH_KEY
+
+## Build the static site.
+RUN npm run build
+
+# Stage 3a: Serve with `docusaurus serve`.
+FROM prod as serve
+## Expose the port that Docusaurus will run on.
+EXPOSE 3000
+
+ENV NODE_ENV=production
+ENV API_BASE_URL=$API_BASE_URL
+ENV API_AUTH_KEY=$API_AUTH_KEY
+## Run the production server.
+CMD ["npm", "run", "serve", "--", "--host", "0.0.0.0"]

docker-compose.yml

@@ -0,0 +1,15 @@
+name: "docusaurus"
+services:
+  serve:
+    build:
+      context: .
+      args:
+        API_BASE_URL: ${API_BASE_URL}
+        API_AUTH_KEY: ${API_AUTH_KEY}
+      target: serve
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - API_BASE_URL=${API_BASE_URL}
+      - API_AUTH_KEY=${API_AUTH_KEY}