Edited the Dockerfile's, added other files, and edited the deploy wor…

…kflow to get docker bulding and releasing to Heroku.

.github/workflows/deploy.yml

@@ -0,0 +1,40 @@
+# Your workflow name.
+name: Deploy to heroku.
+
+# Run workflow on every push to dev branch
+on:
+  push:
+    branches: HW-166-add-tests-to-docker-container
+# Your workflows jobs.
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      # Check-out your repository.
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      # Set up Docker Buildx (optional, but recommended for multi-platform builds)
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1  
+
+      # Log in to Docker Hub (if needed, otherwise skip this step)
+      - name: Log in to Heroku Container Registry
+        run: echo "${{ secrets.HEROKU_API_KEY }}" | docker login --username=__token__ --password-stdin registry.heroku.com
+
+      # Build Docker images
+      - name: Build and Tag Docker Images
+        run: |
+          docker build -f ./code/server/Dockerfile.production -t registry.heroku.com/${{ secrets.HEROKU_APP_NAME }}/api-production:1.0.0 ./code
+          docker build -f ./code/client/Dockerfile.production -t registry.heroku.com/${{ secrets.HEROKU_APP_NAME }}/client-production:1.0.0 ./code
+
+      # Push Docker images to Heroku
+      - name: Push Docker Images to Heroku
+        run: |
+          docker push registry.heroku.com/${{ secrets.HEROKU_APP_NAME }}/api-production:1.0.0
+          docker push registry.heroku.com/${{ secrets.HEROKU_APP_NAME }}/client-production:1.0.0
+
+      # Release the Docker images
+      - name: Release Docker Images on Heroku
+        run: |
+          heroku container:release web api --app ${{ secrets.HEROKU_APP_NAME }}

code/Procfile

@@ -0,0 +1,2 @@
+web: docker run -p $PORT:$PORT registry.heroku.com/${HEROKU_APP_NAME}/client-production:1.0.0
+api: docker run -p 5000:5000 registry.heroku.com/${HEROKU_APP_NAME}/api-production:1.0.0

code/client/Dockerfile.production

@@ -1,25 +1,43 @@
 # Use an official Node.js image as the base image
-FROM node:20.17.0-slim AS builder
+FROM node:20.17.0-alpine AS builder
 
 # Set the working directory inside the container
 WORKDIR /app
 
 # Copy the package.json and package-lock.json files first to leverage Docker caching
-COPY package*.json ./
+COPY package.json ./
+COPY package-lock.json ./ 
+
 
 # Install dependencies
-RUN npm install
+RUN npm ci
 
 # Copy the rest of the application source code
 COPY . .
 
+# Set environment variable for production build
+ENV NODE_ENV=production
+
+# Build the React app
 RUN npm run build
 
-# Use an Nginx image for serving the app
+# Use an official Nginx image as a base
 FROM nginx:alpine
 
-# Copy the build output to Nginx's html directory
-COPY --from=builder /app/build /usr/share/nginx/html
+# Copy the shared Nginx configuration template from the host machine
+COPY ../config/nginx.conf.template /etc/nginx/nginx.conf.template
+
+# Copy your web files to the container
+COPY --from=build /app/build /usr/share/nginx/html
 
+# Expose the port that the application will run on
 EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]
+
+# Copy the shared entrypoint script from the config folder (relative to the build context)
+COPY ../config/entrypoint.sh /entrypoint.sh
+
+# Make the entrypoint script executable
+RUN chmod +x /entrypoint.sh
+
+# Specify the entrypoint
+ENTRYPOINT ["/entrypoint.sh"]

code/config/entrypoint.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+# Substitute environment variables into the Nginx configuration
+envsubst '${PORT}' < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf
+
+# Start Nginx
+nginx -g 'daemon off;'

code/config/nginx.comf.template

@@ -0,0 +1,24 @@
+# /etc/nginx/nginx.conf
+events {}
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+
+    server {
+        listen 80;
+
+        location / {
+            root   /usr/share/nginx/html;
+            index  index.html;
+            try_files $uri /index.html;
+        }
+
+        # Additional configuration to ensure correct MIME types for static assets
+        location ~* \.(css|js|woff2?|ttf|eot|svg|png|jpg|jpeg|gif)$ {
+            root /usr/share/nginx/html;
+            expires 1d;
+            add_header Cache-Control "public, must-revalidate, proxy-revalidate";
+        }
+    }
+}

code/docker-compose-dev.yml

@@ -12,7 +12,7 @@ services:
       - peak-performance
 
   api: 
-    image: api-dev
+    image: api-dev:1.0.0
     env_file: ./server/.env.development
     build:
       context: ./server
@@ -29,7 +29,7 @@ services:
       - peak-performance
 
   client:
-    image: client-dev
+    image: client-dev:1.0.0
     build: 
       context: ./client  # Specify context here
       dockerfile: Dockerfile.dev 

code/docker-compose-production.yml

@@ -2,7 +2,7 @@ name: peak-performance
 
 services:
   api: 
-    image: api-production
+    image: api-production:1.0.0
     env_file: ./server/config/.env.production
     restart: unless-stopped 
     ports:
@@ -13,7 +13,7 @@ services:
       - peak-performance
 
   client:
-    image: client-production
+    image: client-production:1.0.0
     restart: unless-stopped  
     networks:
       - peak-performance

code/server/.dockerignore

@@ -1,3 +1,5 @@
 node_modules
-dist
-*.env
+npm-debug.log
+Dockerfile*
+docker-compose*
+.git

code/server/Dockerfile.dev

@@ -1,5 +1,5 @@
 # Use the official Node.js v20.17.0 image
-FROM node:20.17.0-bullseye
+FROM node:20.17.0-alpine
 
 # Set the working directory inside the container
 WORKDIR /app
@@ -16,13 +16,9 @@ RUN npm install -g nodemon
 # Copy the rest of the application files
 COPY . .
 
+
 # Expose the port that the application will run on
 EXPOSE 5000
 
-# Run the server using the node command
-# CMD ["npm", "run", "dev"]
-
 # Use nodemon to run the server and watch for file changes
-# CMD ["nodemon", "--watch", "./src", "src/index.js"]
-# CMD ["nodemon", "--watch", ".", "server.js"]
-CMD ["npm", "run", "dev"]
+CMD ["npm", "run", "dev"]

code/server/Dockerfile.production

@@ -1,5 +1,5 @@
 # Use the official Node.js v20.17.0 image
-FROM node:20.17.0-slim
+FROM node:20.17.0-alpine AS build
 
 # Set the working directory inside the container
 WORKDIR /app
@@ -8,16 +8,31 @@ WORKDIR /app
 COPY package*.json ./
 
 # Install dependencies
-RUN npm ci
-
-# Install nodemon globally for live reload
-RUN npm install -g nodemon
+RUN npm install --only=production
 
 # Copy the rest of the application files
 COPY . .
 
+# Build the React app
+RUN npm run build
+
+# Use an official Nginx image as a base
+FROM nginx:alpine
+
+# Copy the shared Nginx configuration template from the host machine
+COPY ../../config/nginx.conf.template /etc/nginx/nginx.conf.template
+
+# Copy your web files to the container
+COPY --from=build /app/build /usr/share/nginx/html
+
 # Expose the port that the application will run on
-EXPOSE 5000
+EXPOSE 80
+
+# Copy the shared entrypoint script from the config folder (relative to the build context)
+COPY ../config/entrypoint.sh /entrypoint.sh
+
+# Make the entrypoint script executable
+RUN chmod +x /entrypoint.sh
 
-# Run the server using the node command
-CMD ["npm", "run", "start"]
+# Specify the entrypoint
+ENTRYPOINT ["/entrypoint.sh"]

code/server/package.json

@@ -5,8 +5,8 @@
   "main": "server.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "cross-env NODE_ENV=production node server",
-    "dev": "cross-env NODE_ENV=development nodemon server"
+    "start": "cross-env NODE_ENV=production node server.js",
+    "dev": "cross-env NODE_ENV=development nodemon server.js"
   },
   "keywords": [],
   "author": "",