TopDev

Hướng dẫn cài đặt chạy website code nextjs lên server Ubuntu sử dụng Docker

minhu 📖 2 phút đọc

Dưới đây là hướng dẫn từng bước để cài đặt và chạy website code Next.js trên server Ubuntu sử dụng Docker:



🧱 1. Yêu cầu#

  • Server đang chạy Ubuntu (20.04 hoặc mới hơn).

  • Đã cài sẵn Docker & Docker Compose.

  • Source code Next.js sẵn sàng (ví dụ clone từ GitHub hoặc upload lên server).



🐳 2. Cài Docker & Docker Compose (nếu chưa có)#

`

Cài Docker

sudo apt update sudo apt install -y docker.io

Cho phép Docker chạy không cần sudo

sudo usermod -aG docker $USER newgrp docker

Cài Docker Compose

sudo apt install -y docker-compose `



📦 3. Tạo Dockerfile cho Next.js#

Trong thư mục dự án Next.js, tạo file Dockerfile:

`

Base image

FROM node:18-alpine

Tạo thư mục app

WORKDIR /app

Copy package.json và lock file

COPY package*.json ./

Cài dependencies

RUN npm install

Copy toàn bộ code vào container

COPY . .

Build ứng dụng Next.js

RUN npm run build

Expose cổng 3000

EXPOSE 3000

Start app ở chế độ production

CMD ["npm", "start"] `



📄 4. Cập nhật package.json nếu cần#

Kiểm tra package.json, thêm script start để chạy production:

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



🧬 5. Tạo docker-compose.yml (tuỳ chọn)#

version: '3' services: web: build: . ports: - "3000:3000" restart: always



🚀 6. Build và chạy ứng dụng#

Cách 1: Chạy bằng Docker CLI#

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

Cách 2: Dùng Docker Compose#

docker-compose up -d --build



🌐 7. Mở cổng firewall (nếu cần)#

sudo ufw allow 3000



🧪 8. Kiểm tra hoạt động#

Truy cập trình duyệt:

http://<IP-server>:3000



🛠️ 9. (Tuỳ chọn) Reverse Proxy với Nginx + domain#

Bạn có thể thêm Nginx để chạy domain như sau:

` server { listen 80; server_name yourdomain.com;

location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

} `

Bài liên quan trong #NextJs

✓ Đã sao chép link