Dockerfile for the Next.js frontend and Action to build and publish

.github/workflows/ci.yml

@@ -148,6 +148,47 @@ jobs:
         with:
           file: coverage/lcov.info
 
+  build-publish-frontend:
+    needs: javascript-tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+
+      - name: Get short commit hash
+        run: |
+          SHORT_SHA=$(git rev-parse --short ${{ github.sha }})
+          echo "COMMIT_SHORT_SHA=$SHORT_SHA" >> $GITHUB_ENV
+      - name: Build the Docker image
+        env:
+          ORIGIN: https://next.rc.learn.mit.edu
+          MITOL_API_BASE_URL: https://api.rc.learn.mit.edu
+          SITE_NAME: MIT Learn
+          MITOL_SUPPORT_EMAIL: mitlearn-support@mit.edu
+          EMBEDLY_KEY: ${{ secrets.EMBEDLY_KEY_RC }}
+          MITOL_AXIOS_WITH_CREDENTIALS: true
+          CSRF_COOKIE_NAME: ${{ secrets.CSRF_COOKIE_NAME_RC }}
+        run: |
+          docker build \
+            -t mitodl/mit-learn-frontend:$COMMIT_SHORT_SHA \
+            --build-arg NEXT_PUBLIC_ORIGIN="$ORIGIN" \
+            --build-arg NEXT_PUBLIC_MITOL_API_BASE_URL="$MITOL_API_BASE_URL" \
+            --build-arg NEXT_PUBLIC_SITE_NAME="$SITE_NAME" \
+            --build-arg NEXT_PUBLIC_MITOL_SUPPORT_EMAIL="$MITOL_SUPPORT_EMAIL" \
+            --build-arg NEXT_PUBLIC_EMBEDLY_KEY="$EMBEDLY_KEY" \
+            --build-arg NEXT_PUBLIC_MITOL_AXIOS_WITH_CREDENTIALS="$MITOL_AXIOS_WITH_CREDENTIALS" \
+            --build-arg NEXT_PUBLIC_CSRF_COOKIE_NAME="$CSRF_COOKIE_NAME" \
+            -f frontends/main/Dockerfile \
+            .
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.MITOL_LEARN_DOCKERHUB_USER }}
+          password: ${{ secrets.MITOL_LEARN_DOCKERHUB_PASSWORD }}
+
+      - name: Push the Docker image to Dockerhub
+        run: docker push mitodl/mit-learn-frontend:$COMMIT_SHORT_SHA
+
   build-storybook:
     runs-on: ubuntu-latest
     steps:

frontends/main/Dockerfile

@@ -0,0 +1,72 @@
+# Build: \
+# docker build \
+#   -f frontends/main/Dockerfile \
+#   --build-arg NEXT_PUBLIC_ORIGIN=http://api.open.odl.local:8062 \
+#   --build-arg NEXT_PUBLIC_MITOL_API_BASE_URL=http://open.odl.local:8063 \
+#   --build-arg NEXT_PUBLIC_SITE_NAME="MIT Learn" \
+#   --build-arg NEXT_PUBLIC_MITOL_SUPPORT_EMAIL=mitlearn-support@mit.edu \
+#   --build-arg NEXT_PUBLIC_EMBEDLY_KEY= \
+#   --build-arg NEXT_PUBLIC_MITOL_AXIOS_WITH_CREDENTIALS=true \
+#   --build-arg NEXT_PUBLIC_CSRF_COOKIE_NAME=csrftoken-local \
+#   -t mitodl/mit-learn-frontend:latest .
+
+# Run:
+# docker run -p 8062:8062 -e PORT=8062 mit-learn-frontend:latest
+
+
+FROM node:22-alpine
+
+RUN apk update
+RUN apk add --no-cache libc6-compat
+
+WORKDIR /app
+
+COPY .yarnrc.yml /app
+COPY .yarn/releases/yarn-4.4.1.cjs /app/.yarn/releases/yarn-4.4.1.cjs
+COPY yarn.lock /app
+COPY package.json /app
+COPY frontends /app/frontends
+
+RUN yarn install --immutable
+
+WORKDIR /app/frontends/main
+
+# 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
+
+ENV NODE_ENV=production
+
+ARG NEXT_PUBLIC_ORIGIN
+ENV NEXT_PUBLIC_ORIGIN=$NEXT_PUBLIC_ORIGIN
+
+ARG NEXT_PUBLIC_MITOL_API_BASE_URL
+ENV NEXT_PUBLIC_MITOL_API_BASE_URL=$NEXT_PUBLIC_MITOL_API_BASE_URL
+
+ARG NEXT_PUBLIC_SITE_NAME
+ENV NEXT_PUBLIC_SITE_NAME=$NEXT_PUBLIC_SITE_NAME
+
+ARG NEXT_PUBLIC_MITOL_SUPPORT_EMAIL
+ENV NEXT_PUBLIC_MITOL_SUPPORT_EMAIL=$NEXT_PUBLIC_MITOL_SUPPORT_EMAIL
+
+ARG NEXT_PUBLIC_EMBEDLY_KEY
+ENV NEXT_PUBLIC_EMBEDLY_KEY=$NEXT_PUBLIC_EMBEDLY_KEY
+
+ARG NEXT_PUBLIC_MITOL_AXIOS_WITH_CREDENTIALS
+ENV NEXT_PUBLIC_MITOL_AXIOS_WITH_CREDENTIALS=$NEXT_PUBLIC_MITOL_AXIOS_WITH_CREDENTIALS
+
+ARG NEXT_PUBLIC_CSRF_COOKIE_NAME
+ENV NEXT_PUBLIC_CSRF_COOKIE_NAME=$NEXT_PUBLIC_CSRF_COOKIE_NAME
+
+
+RUN echo $NEXT_PUBLIC_ORIGIN
+RUN yarn build
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+# CMD ["node", "/app/frontends/main/.next/standalone/frontends/main/server.js"]
+CMD ["yarn", "start"]