Serverless Containers vs Serverless Next.js SSR on AWS Amplify Fargate
Tags: aws, containers, nextjs, react
Published: 2022-09-03 12:50:32

Step 0 : check on the [summary](https://dev.to/hexfloor/serverless-containers-vs-serverless-nextjs-ssr-on-aws-gcp-and-vercel-470d)
#AWS Amplify Fargate
To have a working Amplify POC on Fargate you need to : 

- follow the guide by [Nader Dabit](https://dev.to/dabit3/serverless-containers-with-next-js-aws-fargate-and-aws-amplify-17fe)

- follow my guide for the [apex domain](https://dev.to/hexfloor/serverless-containers-with-next-js-aws-fargate-and-aws-amplify-apex-naked-domain-25mh)

- enhance `next.config.js` with `output: 'standalone'`
```
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  output: 'standalone'
}
module.exports = nextConfig
```

- have the following `Dockercompose` : 

```
# Install dependencies only when needed
FROM public.ecr.aws/docker/library/node:alpine 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
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# If using npm with a `package-lock.json` comment out above and use below instead
# COPY package.json package-lock.json ./ 
# RUN npm ci

# Rebuild the source code only when needed
FROM public.ecr.aws/docker/library/node:alpine 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 yarn build

# Production image, copy all the files and run next
FROM public.ecr.aws/docker/library/node:alpine 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

# You only need to copy next.config.js if you are NOT using the default configuration
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json

# 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

CMD ["node", "server.js"]

```

It's important to use an image from the AWS library for the AWS builds, see the image `public.ecr.aws/docker/library/node:alpine`
You may wish to use `node:alpine`, then it's worth to know about the [docker hub download rate limit](https://docs.docker.com/docker-hub/download-rate-limit/)

Roughly it works : 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krqgkt3i0hgpfu4xegjz.png)
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lp7h5lkkgdk3gehz2o74.png)
 
Success !

And that is how I did deploy the `Next.js` SSR apps in 2021 to the AWS, and now in 2022 with the [SSR support in Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/server-side-rendering-amplify.html)
we can do better. Let's drop everything and start from scratch.