deploy frontend as a docker image (#37)

* add terraform changes

* specify app location

* add prebuild command

* skip app build

* add prebuild command to see if it works

* add appsvc file

* add workflow to deploy on this branch

* add ls command

* rename cd to front-end

* fix build issues temp

* update script to only zip .next folder

* add command to start up app

* add terraform deployment to auto-deploy

* move out deployTerraform into own job

* add branch name

* put build in deployment.yaml

* move needs terraform to deploy

* fix typo in terraform

* set to dev2

* set environment name properly

* make it only use dev2

* update terraform job name to include env variable

* add proper curly brace around name

* remove env name in terraform job

* add test echo statement

* add quotes around branch name

* remove set env job

* fix the start up command for the app service

* include all files in artifact

* revert next.config.js

* add standalone as output

* only copy standalone folder

* include all .next files

* update command line to be npm run start

* include public folder in zip

* try to deploy with docker image

* set context to frontend

* fix file location for dockerfile

* clean up terraform to remove github deployment

* clean up deployment action to deploy manually

* update environment name to be the one selected

* delete appsvc that was used for oryx

* rename webapps deploy to use v3

* Update main.tf with env vars

* Adding environment variables

* Adding production env vars

* adding env vars

---------

Co-authored-by: KennethSkylight <[email protected]>
Co-authored-by: Kenneth Chow <[email protected]>

.github/workflows/deployment.yaml

@@ -19,7 +19,7 @@ permissions:
   packages: write
 jobs:
   terraform:
-    name: Run Terraform (${{github.event.inputs.environment}})
+    name: Run Terraform
     runs-on: ubuntu-latest
     environment: main
     defaults:
@@ -78,11 +78,7 @@ jobs:
           CLIENT_ID: ${{ secrets.CLIENT_ID }}
         run: |-
           echo "tf_env=$(
-          if [[ "${{ github.event.inputs.environment }}" != "" ]]; then
             echo ${{ github.event.inputs.environment }}
-          else
-            echo dev
-          fi
           )" >> $GITHUB_OUTPUT
           echo "short_cid=${CLIENT_ID:0:8}" >> $GITHUB_OUTPUT
 
@@ -96,3 +92,47 @@ jobs:
           terraform init -backend-config=backend.tfvars
           terraform workspace select -or-create $TF_ENV
           terraform apply -auto-approve -lock-timeout=30m
+
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log in to GitHub container registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Lowercase the repo name
+        run: echo "REPO=${GITHUB_REPOSITORY,,}" >>${GITHUB_ENV}
+
+      - name: Build and push container image to registry
+        uses: docker/build-push-action@v4
+        with:
+          context: front-end
+          push: true
+          tags: ghcr.io/${{ env.REPO }}:${{ github.sha }}
+          file: ./front-end/Dockerfile
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: ${{ github.event.inputs.environment }}
+      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
+    steps:
+      - name: Lowercase the repo name
+        run: echo "REPO=${GITHUB_REPOSITORY,,}" >>${GITHUB_ENV}
+
+      - name: Deploy to Azure Web App
+        id: deploy-to-webapp
+        uses: azure/webapps-deploy@v3
+        with:
+          app-name: app-service-${{ github.event.inputs.environment }}-dibbs
+          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
+          images: 'ghcr.io/${{ env.REPO }}:${{ github.sha }}'

front-end/.env.production

@@ -0,0 +1 @@
+NEXT_PUBLIC_PROCESS_URL=wss://phdi-playground-dev.centralus.cloudapp.azure.com/orchestration/process-ws

front-end/Dockerfile

@@ -0,0 +1,75 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN yarn build
+
+# If using npm comment out above and use below instead
+# RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+ARG NEXT_PUBLIC_PROCESS_URL
+
+ENV NEXT_PUBLIC_PROCESS_URL $NEXT_PUBLIC_PROCESS_URL
+
+# Add your environment variable here
+ENV NEXT_PUBLIC_PROCESS_URL "wss://phdi-playground-dev.centralus.cloudapp.azure.com/orchestration/process-ws"
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY .env.production .
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD ["node", "server.js"]

front-end/app/upload_file/page.tsx

@@ -9,7 +9,7 @@ import { useData } from '@/utils/DataContext';
 export default function UploadFile() {
     const { setData } = useData();
     const router = useRouter();
-    const url = process.env.NEXT_PUBLIC_PROCESS_URL
+    const url = process.env.NEXT_PUBLIC_PROCESS_URL ?? ""
     const [progress, setProgress] = useState<ProgressData | null>(null); // State for progress
     const [socket, setSocket] = useState<WebSocket | null>(null);
     const [file, setFile] = useState<File | null>(null);

front-end/components/ECRTable.tsx

@@ -3,14 +3,14 @@ import {
 } from '@trussworks/react-uswds'
 import _ from 'lodash';
 
-export default function ECRTable({ ecrData }) {
+export default function ECRTable({ ecrData }: any) {
     const options = ['patient_id', 'first_name', 'last_name', 'gender', 'birth_date']
 
 
     const getTableBody = (data: any) => {
         return (
             <tbody>
-                {options.map(function (option) {
+                {data && options.map(function (option) {
                     return (
                         <tr key={option}>
                             <th scope="row">{_.startCase(option)}</th>
@@ -37,7 +37,7 @@ export default function ECRTable({ ecrData }) {
                             <th scope="col">Field Value</th>
                         </tr>
                     </thead>
-                    {getTableBody(ecrData.processed_values.parsed_values)}
+                    {getTableBody(ecrData?.processed_values?.parsed_values)}
                 </Table>
             </div>
         </div>

front-end/next.config.js

@@ -1,4 +1,5 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
 
-module.exports = nextConfig;
+module.exports ={
+    output:"standalone",
+}

front-end/package.json

@@ -31,6 +31,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
+    "@types/lodash": "^4.14.202",
     "@types/websocket": "^1.0.7",
     "change-case": "^5.1.2",
     "cypress": "^13.3.0",

terraform/implementation/main.tf

@@ -446,3 +446,34 @@ resource "kubectl_manifest" "keda_scaled_object" {
   depends_on = [kubectl_manifest.keda_trigger]
   yaml_body  = data.kubectl_path_documents.keda_scaled_object[each.key].documents[0]
 }
+
+
+# Azure Web App Service
+
+# Create the Linux App Service Plan
+resource "azurerm_service_plan" "playground_appserviceplan" {
+  name                = "appserviceplan-${terraform.workspace}-dibbs"
+  location            = var.location
+  resource_group_name = var.resource_group_name
+  os_type             = "Linux"
+  sku_name            = "B1"
+}
+
+# Create the web app, pass in the App Service Plan ID
+resource "azurerm_linux_web_app" "playground_webapp" {
+  name                = "app-service-${terraform.workspace}-dibbs"
+  location            = var.location
+  resource_group_name = var.resource_group_name
+  service_plan_id     = azurerm_service_plan.playground_appserviceplan.id
+  https_only          = true
+  site_config {
+    minimum_tls_version = "1.2"
+    application_stack {
+      node_version = "18-lts"
+    }
+  }
+  app_settings = {
+    "NEXT_PUBLIC_PROCESS_URL" = "wss://phdi-playground-dev.centralus.cloudapp.azure.com/orchestration/process-ws"
+    # Add other environment variables here
+  }
+}