Merge pull request #20 from Guysnacho/34-Throw-it-in-a-box!

34 Throw it in a box!
Guysnacho · Oct 18, 2024 · 6fa33fe · 6fa33fe
2 parents f673235 + a9ec830
commit 6fa33fe
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 20 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -49,6 +49,8 @@ jobs:
     steps:
       - name: Check Out
         uses: actions/checkout@v4
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
       - name: Use Node.js
         uses: actions/setup-node@v4
       - name: Configure AWS Credentials
@@ -68,12 +70,44 @@ jobs:
           cd web
           echo "NEXT_PUBLIC_APIGW=${{needs.TF-Apply.outputs.apigw}}" > .env
 
-      - name: 🔨 Build Project
+      - name: 🔨 Build Static Project
         run: |
           cd web
-          npm run build
+          STATIC=1 npm run build
 
       - name: 🚀 Upload Package
         run: |
           aws s3 sync ./web/out s3://${{ secrets.S3_BUCKET }}/ --region us-west-2
           aws s3 sync ./web/out s3://${{ secrets.S3_BUCKET }}-failover/ --region us-west-2
+
+      - name: 🐳 Build Image
+        uses: docker/build-push-action@v6
+        with:
+          context: ./web/
+          file: ./web/Dockerfile
+          push: false # if we wanted to push the image to DockerHub or a local registry
+          tags: user/app:latest
+          # cache-to: type=local,dest=user/app:cache
+          outputs: type=local,dest=./alpine_storefront
+          secret-envs: NEXT_PUBLIC_APIGW=${{needs.TF-Apply.outputs.apigw}}
+
+      - name: Move Image to copyable location
+        run: |
+          stat ./alpine_storefront
+          ls -l
+          tar -zcf alpine_storefront.tar.gz ./alpine_storefront
+          sudo cp ./alpine_storefront.tar.gz /home/
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v4
+        id: artifact-upload-step
+        with:
+          name: storefront_image
+          path: /home/alpine_storefront.tar.gz
+          overwrite: true
+          if-no-files-found: error
+
+      - name: Echo artifact url and send to SSM parameter
+        run: |
+          echo ARTIFACT_URL=${{steps.artifact-upload-step.outputs.artifact-url}}
+          aws ssm put-parameter --name "ecr_artifact_url" --value "${{steps.artifact-upload-step.outputs.artifact-url}}" --type String
diff --git a/.github/workflows/predeploy.yml b/.github/workflows/predeploy.yml
@@ -31,7 +31,7 @@ jobs:
       - name: 🏗️ Terraform Plan
         run: |
           cd terraform
-          terraform plan -var="bucket-name=${{ secrets.S3_BUCKET }}" -var="db-name=${{ secrets.DB_NAME }}" -var="db-username=${{ secrets.DB_USER }}" # -auto-approve
+          terraform plan -refresh-only -var="bucket-name=${{ secrets.S3_BUCKET }}" -var="db-name=${{ secrets.DB_NAME }}" -var="db-username=${{ secrets.DB_USER }}" # -auto-approve
       - run: echo ${{ steps.plan.outputs.stdout }}
       - run: echo ${{ steps.plan.outputs.stderr }}
       - run: echo ${{ steps.plan.outputs.exitcode }}
@@ -50,6 +50,8 @@ jobs:
     steps:
       - name: Check Out
         uses: actions/checkout@v4
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
       - name: Use Node.js
         uses: actions/setup-node@v4
       - name: Configure AWS Credentials
@@ -58,8 +60,7 @@ jobs:
           aws-region: us-west-2
           aws-access-key-id: ${{secrets.AWS_ACCESS_KEY_ID}}
           aws-secret-access-key: ${{secrets.AWS_SECRET_ACCESS_KEY}}
-      - name: Setup Terraform
-        uses: hashicorp/setup-terraform@v3
+
       - name: 😪 Installing Dependencies
         run: |
           cd web
@@ -70,7 +71,25 @@ jobs:
           cd web
           echo "NEXT_PUBLIC_APIGW=${{needs.TF-Apply.outputs.apigw}}" > .env
 
-      - name: 🔨 Build Project
+      - name: 🔨 Build Static Project
         run: |
           cd web
-          npm run build
+          STATIC=1 npm run build
+
+      - name: 🐳 Build Image
+        uses: docker/build-push-action@v6
+        with:
+          context: ./web/
+          file: ./web/Dockerfile
+          push: false # if we wanted to push the image to DockerHub or a local registry
+          tags: user/app:latest
+          # cache-to: type=local,dest=user/app:cache
+          outputs: type=local,dest=./alpine_storefront
+          secret-envs: NEXT_PUBLIC_APIGW=${{needs.TF-Apply.outputs.apigw}}
+
+      - name: Move Image to copyable location
+        run: |
+          stat ./alpine_storefront
+          ls -l
+          tar -zcf alpine_storefront.tar.gz ./alpine_storefront
+          sudo cp ./alpine_storefront.tar.gz /home/
diff --git a/README.md b/README.md
@@ -4,18 +4,17 @@
 
 This repo is to help me actually build this AWS course. ~Shouldn't be too hard~ This has and will continue to be a learning experience. Follow along, check the releases, make a fork, go crazy, but check the [Project Home](https://blackbelt-init.notion.site/) for more details. ✨
 
-## Initial Plan
-
-### Monorepo
+## Project Layout
 
 - Terraform Package
 - Web package
-- Github workflows with Smart builds
-  - Applies after grep on repo
-  - If changes in AWS package, apply tf apply first
-  - Put [plan output](https://github.com/marketplace/actions/github-script#welcome-a-first-time-contributor) in PR
-  - Deploy static package
-- Look into [atmos](https://atmos.tools/) for environments
+- Github workflows
+  - Applies terraform infra changes after commits to main branch
+  - Bundles our app into static site files and a Docker image
+  - Deploys uploads static site to S3 to be served by CloudFront
+  - Uploads our Docker Image to the run context
+  - Updates an SSM parameter's value to this artifact's URL
+    - Important note - by default, an artifact upload will only live for 90 days. Keep this in mind if you want to roll changes back to a given date past that.
 
 ### Local Setup
 
@@ -25,5 +24,6 @@ This repo is to help me actually build this AWS course. ~Shouldn't be too hard~
 4. Build starter [Next](https://nextjs.org/) site
    1. [Configure ssg export](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports)
 5. Setup bucket, cloudfront, provider, outputs, whatever else locally
-6. Setup workflow
-7. Make it smart
+6. Add GitHub action secrets
+7. Test workflows
+8. Sip water
diff --git a/web/.dockerignore b/web/.dockerignore
@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git
diff --git a/web/Dockerfile b/web/Dockerfile
@@ -0,0 +1,69 @@
+# Next.js Dockerfile taken from example repo - https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
+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 corepack enable 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 \
+    if [ -f yarn.lock ]; then yarn run build; \
+    elif [ -f package-lock.json ]; then npm run build; \
+    elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
+    else echo "Lockfile not found." && exit 1; \
+    fi
+
+# 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
+
+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
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+ENV HOSTNAME="0.0.0.0"
+CMD ["node", "server.js"]
diff --git a/web/next.config.mjs b/web/next.config.mjs
@@ -1,9 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  output: "export",
+  output: process.env.STATIC ? "export" : "standalone",
   images: {
-    unoptimized: true,
+    unoptimized: process.env.STATIC ? true : false,
   },
 };