Merge pull request #109 from DSC-McMaster-U/dockfile_frontend

Dockerfile running for frontend and Secrets for Terraform

.github/workflows/manual_terraform.yml

@@ -0,0 +1,52 @@
+name: 'Manual Terraform Deployment'
+
+on:
+  workflow_dispatch:
+    inputs:
+      environment:
+        description: 'Target environment'
+        required: true
+        default: 'dev'
+
+jobs:
+  terraform:
+    name: 'Deploy to Environment'
+    runs-on: ubuntu-latest
+    environment:
+      name: ${{ github.event.inputs.environment }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Google Cloud SDK
+        uses: google-github-actions/[email protected]
+        with:
+          service_account_key: ${{ secrets.DEFAULT_SA_KEY }}
+          project_id: ${{ secrets.PROJECT_ID }}
+
+      - name: Install Terraform
+        uses: hashicorp/setup-terraform@v1
+
+      - name: Set up Terraform credentials
+        run: |
+          echo "GOOGLE_CREDENTIALS=${{ secrets.DEFAULT_SA_KEY }}" >> $GITHUB_ENV
+
+      - name: Terraform Init
+        run: terraform init
+
+      - name: Terraform Plan
+        run: terraform plan -out=tfplan
+
+      - name: Hold for approval
+        if: github.event_name == 'workflow_dispatch'
+        uses: softprops/turnstyle@v1
+        with:
+          continue-after-seconds: 0 # This will make it wait indefinitely until manually approved
+          poll-interval-seconds: 10
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Terraform Apply
+        if: github.event_name == 'workflow_dispatch'
+        run: terraform apply tfplan

cloud-infra/main.tf

@@ -11,7 +11,7 @@ variable "zone" {
 provider "google" {
   project     = var.project
   region      = var.region
-  credentials = file("credentials.json")
+  credentials = jsondecode("${var.GOOGLE_CREDENTIALS}")
   zone        = var.zone
 }
 

frontend/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["next/babel", "next/core-web-vitals"]
+  "extends": ["next", "next/core-web-vitals"]
 }

frontend/Dockerfile

@@ -0,0 +1,35 @@
+# Stage 1: Building the code
+FROM node:16-alpine AS builder
+
+WORKDIR /app
+
+# Copy the package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci --only=production
+
+# Copy the app source code
+COPY . .
+
+# Build the app
+RUN npm run build
+
+# Stage 2: Run the app
+FROM node:16-alpine AS runner
+WORKDIR /app
+
+# Copy built assets from the builder stage
+COPY --from=builder /app/.next/ .next/
+COPY --from=builder /app/node_modules/ node_modules/
+COPY --from=builder /app/public/ public/
+COPY --from=builder /app/package.json package.json
+
+# Expose the port Next.js runs on
+EXPOSE 3000
+
+# Set environment to production to avoid including unnecessary files
+ENV NODE_ENV production
+
+# Start the app
+CMD ["npm", "start"]

frontend/src/components/NavigationBar.js

@@ -9,7 +9,6 @@ import MenuIcon from "@mui/icons-material/Menu";
 import Container from "@mui/material/Container";
 import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
-import AutoMateLogo from "../../public/Automate_logo.png";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -31,7 +30,12 @@ function NavigationBar() {
       <Container maxWidth="xl">
         <Toolbar disableGutters>
           <Box sx={{ display: { xs: "none", md: "flex" }, mr: 1 }}>
-            <Image width={50} alt="AutoMate Logo" src={AutoMateLogo} />
+            <Image
+              width={50}
+              height={50}
+              alt="AutoMate Logo"
+              src="/AutoMate_logo.png"
+            />
           </Box>
           <Typography
             variant="h6"
@@ -94,8 +98,13 @@ function NavigationBar() {
             </Menu>
           </Box>
 
-          <Box sx={{ display: { xs: "flex", md: "none" }, mr: 1 }}>
-            <Image width={50} alt="AutoMate Logo" src={AutoMateLogo} />
+          <Box sx={{ display: { xs: "none", md: "flex" }, mr: 1 }}>
+            <Image
+              width={50}
+              height={50}
+              alt="AutoMate Logo"
+              src="/AutoMate_logo.png"
+            />
           </Box>
           <Typography
             variant="h5"

frontend/src/pages/index.js

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import Typography from "@mui/material/Typography";
 import "@fontsource/public-sans";
-import AutoMateLogo from "../../public/Automate_logo.png";
 import Image from "next/image";
 import Button from "@mui/material/Button";
 import styled from "@emotion/styled";
@@ -120,8 +119,13 @@ export default function Home() {
             </Button>
           </Element>
         </Element>
-        <Picture style={{ left: "10" }}>
-          <Image width={500} alt="AutoMate Logo" src={AutoMateLogo} />
+        <Picture>
+          <Image
+            width={500}
+            height={500}
+            alt="AutoMate Logo"
+            src="/AutoMate_logo.png"
+          />
         </Picture>
       </BoxContainer>
     </Container>