feat: dockerize build and add push for prod

.github/workflows/nextjs_docker.yml

@@ -0,0 +1,53 @@
+name: nextjs-docker
+
+on: push
+
+permissions:
+  packages: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: false
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set short git commit SHA
+        id: vars
+        run: |
+          calculatedSha=$(git rev-parse --short ${{ github.sha }})
+          echo "COMMIT_SHORT_SHA=$calculatedSha" >> $GITHUB_ENV
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: https://ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          push: ${{ github.ref == 'refs/heads/main' }}
+          tags: ghcr.io/jk-labs-inc/jokerace:main
+          build-args: |
+            NEXT_PUBLIC_SUPABASE_URL= ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_SUPABASE_URL || secrets.DEV_NEXT_PUBLIC_SUPABASE_URL }}
+            NEXT_PUBLIC_SUPABASE_ANON_KEY= ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_SUPABASE_ANON_KEY || secrets.DEV_NEXT_PUBLIC_SUPABASE_ANON_KEY }}
+            NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID= ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID || secrets.DEV_NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID }}
+            NEXT_PUBLIC_R2_ACCOUNT_ID= ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_R2_ACCOUNT_ID || secrets.DEV_NEXT_PUBLIC_R2_ACCOUNT_ID }}
+            NEXT_PUBLIC_R2_ACCESS_KEY_ID= ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_R2_ACCESS_KEY_ID || secrets.DEV_NEXT_PUBLIC_R2_ACCESS_KEY_ID }}
+            NEXT_PUBLIC_R2_SECRET_ACCESS_KEY= ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_R2_SECRET_ACCESS_KEY || secrets.DEV_NEXT_PUBLIC_R2_SECRET_ACCESS_KEY }}
+            NEXT_PUBLIC_MERKLE_TREES_BUCKET= ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_MERKLE_TREES_BUCKET || secrets.DEV_NEXT_PUBLIC_MERKLE_TREES_BUCKET }}
+            NEXT_PUBLIC_IMAGE_UPLOAD_BUCKET= ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_IMAGE_UPLOAD_BUCKET || secrets.DEV_NEXT_PUBLIC_IMAGE_UPLOAD_BUCKET }}
+            NEXT_PUBLIC_ETHERSCAN_KEY= ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_ETHERSCAN_KEY || secrets.DEV_NEXT_PUBLIC_ETHERSCAN_KEY }}
+            NEXT_PUBLIC_QUICKNODE_SLUG= ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_QUICKNODE_SLUG || secrets.DEV_NEXT_PUBLIC_QUICKNODE_SLUG }}
+            NEXT_PUBLIC_QUICKNODE_KEY= ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_QUICKNODE_KEY || secrets.DEV_NEXT_PUBLIC_QUICKNODE_KEY }}
+            NEXT_PUBLIC_ALCHEMY_KEY= ${{ github.ref == 'refs/heads/main' && secrets.PROD_NEXT_PUBLIC_ALCHEMY_KEY || secrets.DEV_NEXT_PUBLIC_ALCHEMY_KEY }}
+

Dockerfile

@@ -0,0 +1,73 @@
+FROM node:18-alpine AS base
+
+FROM base AS builder
+
+# Install
+RUN apk add --update python3 make g++\
+   && rm -rf /var/cache/apk/*
+WORKDIR /app
+COPY . .
+
+RUN yarn --production 
+
+# Build
+# disable telemetry during the build
+ENV NEXT_TELEMETRY_DISABLED=1 
+
+ARG NEXT_PUBLIC_SUPABASE_URL
+ARG NEXT_PUBLIC_SUPABASE_ANON_KEY
+ARG NEXT_PUBLIC_R2_ACCOUNT_ID
+ARG NEXT_PUBLIC_R2_ACCESS_KEY_ID
+ARG NEXT_PUBLIC_R2_SECRET_ACCESS_KEY
+ARG NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID
+ARG NEXT_PUBLIC_MERKLE_TREES_BUCKET
+ARG NEXT_PUBLIC_IMAGE_UPLOAD_BUCKET
+ARG NEXT_PUBLIC_ETHERSCAN_KEY
+ARG NEXT_PUBLIC_QUICKNODE_SLUG
+ARG NEXT_PUBLIC_QUICKNODE_KEY
+ARG NEXT_PUBLIC_ALCHEMY_KEY
+
+ENV NEXT_PUBLIC_SUPABASE_URL=$NEXT_PUBLIC_SUPABASE_URL 
+ENV NEXT_PUBLIC_SUPABASE_ANON_KEY=$NEXT_PUBLIC_SUPABASE_ANON_KEY
+ENV NEXT_PUBLIC_R2_ACCOUNT_ID=$NEXT_PUBLIC_R2_ACCOUNT_ID
+ENV NEXT_PUBLIC_R2_ACCESS_KEY_ID=$NEXT_PUBLIC_R2_ACCESS_KEY_ID
+ENV NEXT_PUBLIC_R2_SECRET_ACCESS_KEY=$NEXT_PUBLIC_R2_SECRET_ACCESS_KEY
+ENV NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=$NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID
+ENV NEXT_PUBLIC_MERKLE_TREES_BUCKET=$NEXT_PUBLIC_MERKLE_TREES_BUCKET
+ENV NEXT_PUBLIC_IMAGE_UPLOAD_BUCKET=$NEXT_PUBLIC_IMAGE_UPLOAD_BUCKET
+ENV NEXT_PUBLIC_ETHERSCAN_KEY=$NEXT_PUBLIC_ETHERSCAN_KEY
+ENV NEXT_PUBLIC_QUICKNODE_SLUG=$NEXT_PUBLIC_QUICKNODE_SLUG
+ENV NEXT_PUBLIC_QUICKNODE_KEY=$NEXT_PUBLIC_QUICKNODE_KEY
+ENV NEXT_PUBLIC_ALCHEMY_KEY=$NEXT_PUBLIC_ALCHEMY_KEY
+
+RUN yarn build
+
+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
+
+# Set the correct permission for prerender cache
+RUN addgroup nodejs
+RUN adduser -SDH nextjs
+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/packages/react-app-revamp/.next/standalone/packages/react-app-revamp ./ 
+COPY --from=builder --chown=nextjs:nodejs /app/packages/react-app-revamp/.next/standalone/node_modules ./node_modules
+COPY --from=builder --chown=nextjs:nodejs /app/packages/react-app-revamp/.next/static ./.next/static 
+COPY --from=builder /app/packages/react-app-revamp/public ./public 
+
+USER nextjs
+
+# Exposed port (for orchestrators and dynamic reverse proxies)
+EXPOSE 3000
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 CMD [ "wget", "-q0", "http://localhost:3000/health" ]
+
+CMD ["node", "server.js"]

compose.yml

@@ -0,0 +1,24 @@
+services:
+  main-jokerace:
+    container_name: main-jokerace
+    image: ghcr.io/jk-labs-inc/jokerace:main
+    deploy:
+      mode: replicated
+      replicas: 3
+    restart: always
+
+  watchtower:
+    container_name: jokerace-watchtower
+    image: containrrr/watchtower
+    command:
+      - "main-jokerace"
+      - "--interval"
+      - "30"
+      - "--cleanup"
+      - "true"
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    deploy:
+      mode: global
+    restart: always
+

packages/react-app-revamp/next.config.js

@@ -34,6 +34,7 @@ const nextConfig = {
     ],
   },
   transpilePackages: ["react-tweet"],
+  output: "standalone",
 };
 
 module.exports = withPWA({