Deploying NextJS with SSR to both Fargate and S3+CloudFront - using Github actions and Docker

[royibernthal]

Summary

I'm currently deploying NextJS with SSR to Fargate using a Github workflow and Docker. It works as expected, and the next step is to add a CDN.
Should I sync /public and /.next/static with an S3 bucket in the github workflow? If so, should I build the nextjs app once in the github workflow and then deploy different parts of the same build to both fargate and S3? If not, how do you go about it?

Are there any best practices or github actions that already do this out of the box?

I prefer to not use IAC like SST for this.

Here's my github workflow:

name: Deploy to AWS
on:
    push:
        branches:
            - 'main'
        tags:
            - '*'
jobs:
    deploy:
        runs-on: ubuntu-latest
        environment:
            name: production
        steps:
            - uses: actions/checkout@v4

            - name: Configure AWS credentials
              uses: aws-actions/configure-aws-credentials@v4
              with:
                  aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
                  aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
                  aws-region: ${{ vars.AWS_REGION }}

            - name: Login to Amazon ECR
              id: login-ecr
              uses: aws-actions/amazon-ecr-login@v2

            - name: Build, tag, and push image to Amazon ECR
              id: build-image
              env:
                  ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
                  ECR_REPOSITORY: ${{ vars.ECR_REPOSITORY }}
                  IMAGE_TAG: ${{ github.sha }}
              run: |
                  docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .
                  docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
                  echo "::set-output name=image::$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG"

            - name: Download task definition
              run: |
                  aws ecs describe-task-definition --task-definition ${{ vars.ECR_REPOSITORY }} \
                  --query taskDefinition > task-definition.json

            - name: Fill in the new image ID in the Amazon ECS task definition
              id: task-def
              uses: aws-actions/amazon-ecs-render-task-definition@v1
              with:
                  task-definition: task-definition.json
                  container-name: ${{ vars.ECR_REPOSITORY }}
                  image: ${{ steps.build-image.outputs.image }}
                  environment-variables: |
                      my-env-vars

            - name: Deploy Amazon ECS task definition
              uses: aws-actions/amazon-ecs-deploy-task-definition@v2
              with:
                  task-definition: ${{ steps.task-def.outputs.task-definition }}
                  service: ${{ vars.ECR_REPOSITORY }}-svc
                  cluster: ${{ vars.ECS_CLUSTER }}
                  wait-for-service-stability: true

And here's my docker file:

FROM node:23-alpine

RUN npm i npm@latest -g

WORKDIR /usr/src/app

COPY package*.json ./
COPY tsconfig*.json ./
COPY .env* ./
COPY next.config.ts ./
COPY postcss.config.mjs ./
COPY eslint.config.mjs ./
COPY components.json ./
COPY src ./src
COPY public ./public

RUN npm ci --legacy-peer-deps
RUN npm run build

EXPOSE 3000

CMD ["npm", "run", "start"]

I'm using NextJS v15.3.2.

Additional information

No response

Example

No response