How to Deploy a Next.js App on AWS EC2 Using Docker

Share:

Deploying your Next.js application to a live server is a crucial step in going from development to production. In this guide, we’ll walk through deploying a Dockerized Next.js app on an AWS EC2 instance, from setting up the server to containerizing and running your app.


🛠️ Prerequisites

Before you begin, ensure you have:

  • An AWS account
  • Basic knowledge of Docker and EC2
  • A Next.js application ready
  • SSH access to your EC2 instance
  • Docker installed locally

Step 1: Prepare Your Next.js Application

If you don’t have a Next.js app yet, you can create one:

bashCopyEditnpx create-next-app@latest my-next-app
cd my-next-app

Test it locally:

bashCopyEditnpm run dev

Step 2: Dockerize Your Next.js App

Create a Dockerfile in the root of your Next.js project:

DockerfileCopyEdit# Install dependencies only when needed
FROM node:18-alpine AS deps
WORKDIR /app
COPY package.json package-lock.json* ./
RUN npm install

# Rebuild the source code only when needed
FROM node:18-alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN npm run build

# Production image
FROM node:18-alpine AS runner
WORKDIR /app

ENV NODE_ENV production

COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

EXPOSE 3000

CMD ["npm", "start"]

Then, update your package.json to include:

jsonCopyEdit"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

Create a .dockerignore file:

luaCopyEditnode_modules
npm-debug.log
Dockerfile
.dockerignore
.next

Step 3: Build the Docker Image Locally

Run the following command in your project root:

bashCopyEditdocker build -t nextjs-app .

Test it:

bashCopyEditdocker run -p 3000:3000 nextjs-app

Step 4: Set Up AWS EC2 Instance

  1. Go to the AWS EC2 dashboard.
  2. Launch a new Ubuntu instance (e.g., Ubuntu 22.04).
  3. Choose a t2.micro instance (free tier eligible).
  4. Configure security group to allow TCP port 22 (SSH) and port 3000 (or your preferred port).
  5. Download and save the .pem key file.

SSH into your instance:

bashCopyEditssh -i your-key.pem ubuntu@your-ec2-public-ip

Step 5: Install Docker on EC2

Run the following on your EC2 instance:

bashCopyEditsudo apt update
sudo apt install -y docker.io
sudo systemctl start docker
sudo systemctl enable docker
sudo usermod -aG docker ubuntu

Important: Log out and log back in for the group change to take effect.


Step 6: Transfer Your App to EC2

You can transfer your app using scp:

bashCopyEditscp -i your-key.pem -r ./my-next-app ubuntu@your-ec2-public-ip:/home/ubuntu/

Or clone it directly from GitHub:

bashCopyEditgit clone https://github.com/your-repo.git

Navigate into the app directory:

bashCopyEditcd my-next-app

Step 7: Build and Run Docker Container on EC2

On your EC2 instance:

bashCopyEditdocker build -t nextjs-app .
docker run -d -p 3000:3000 nextjs-app

Verify it’s running:

bashCopyEditdocker ps

Step 8: Access Your Application

Open your browser and visit:

cppCopyEdithttp://<your-ec2-public-ip>:3000

You should see your Next.js app live!


Bonus: Running with Docker Compose (Optional)

Create a docker-compose.yml file:

yamlCopyEditversion: '3'
services:
  web:
    build: .
    ports:
      - "3000:3000"

Then:

bashCopyEditdocker-compose up -d

Security Tip:

Set up Nginx as a reverse proxy and use HTTPS with Let’s Encrypt for production environments.


🧹 Cleanup

To stop the container:

bashCopyEditdocker ps
docker stop <container_id>

To remove all containers and images:

bashCopyEditdocker system prune -a

Conclusion

You’ve successfully deployed a Next.js application on AWS EC2 using Docker! This method offers scalability, portability, and a consistent environment for your app. Next, consider setting up CI/CD, HTTPS, and automated deployments to streamline your workflow.

LET’S KEEP IN TOUCH!

We’d love to keep you updated with our latest news and offers 😎

We don’t spam! Read our privacy policy for more info.