Next.js 应用部署到VPS上的Docker容器中

Next.js 应用部署到 VPS 上的 Docker 容器中

Next.js Docker 部署教程封面

1. 步骤一：准备工作

  1. 获取 VPS 账号：确保你已经有一个 VPS 账号，并通过 SSH 工具（如 PuTTY）连接到 VPS 服务器。

  2. 更新系统包：在开始安装 Docker 之前，确保你的系统包是最新的。可以使用以下命令更新系统包：

    sudo apt-get update
sudo apt-get upgrade

    注释：这一步是为了确保系统的所有软件包都是最新的，避免在后续安装过程中出现兼容性问题。

2. 步骤二：安装 Docker

2.1 在 Ubuntu/Debian 上安装 Docker

  1. 安装必要的依赖：

    sudo apt-get install apt-transport-https ca-certificates curl software-properties-common

    注释：这些依赖包是为了确保系统能够通过 HTTPS 下载软件包，并且能够添加新的软件源。

  2. 添加 Docker 的 GPG 密钥：

    sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

    注释：这一步是为了确保从 Docker 官方源下载的软件包是可信的。

  3. 添加 Docker 的 APT 源：

    sudo add-apt-repository "deb [arch=amd64 signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

    注释：添加 Docker 的 APT 源，以便从官方源安装 Docker。

  4. 更新 APT 包索引并安装 Docker：

    sudo apt-get update
sudo apt-get install docker-ce

    注释：更新包索引后，安装 Docker 社区版（CE）。

  5. 启动 Docker 服务并设置开机自启动：

    sudo systemctl start docker
sudo systemctl enable docker

    注释：启动 Docker 服务，并设置为开机自启动，以确保服务器重启后 Docker 仍然运行。

2.2 在 CentOS 上安装 Docker

  1. 安装必要的依赖：

    sudo yum install -y yum-utils device-mapper-persistent-data lvm2

    注释：这些依赖包是为了确保系统能够管理存储设备和下载软件包。

  2. 添加 Docker 的 YUM 源：

    sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

    注释：添加 Docker 的 YUM 源，以便从官方源安装 Docker。

  3. 安装 Docker：

    sudo yum install docker-ce

    注释：安装 Docker 社区版（CE）。

  4. 启动 Docker 服务并设置开机自启动：

    sudo systemctl start docker
sudo systemctl enable docker

    注释：启动 Docker 服务，并设置为开机自启动，以确保服务器重启后 Docker 仍然运行。

3. 步骤三：创建 Next.js 应用的 Dockerfile

在你的 Next.js 应用程序的根目录下创建一个名为 Dockerfile 的文件，并添加以下内容：

# 使用官方的 Node.js 镜像作为基础镜像
FROM node:22-alpine

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json
COPY package*.json ./

# 安装依赖
RUN npm install

# 复制所有文件到工作目录
COPY . .

# 构建 Next.js 应用
RUN npm run build

# 暴露应用运行的端口
EXPOSE 3000

# 启动应用
CMD ["npm", "start"]

3.1 注释

  • FROM node:22-alpine：使用轻量级的 Node.js 基础镜像。
  • WORKDIR /app：设置工作目录为 /app。
  • COPY package*.json ./：复制 package.json 和 package-lock.json 文件到工作目录。
  • RUN npm install：安装项目依赖。
  • COPY . .：复制所有项目文件到工作目录。
  • RUN npm run build：构建 Next.js 应用。
  • EXPOSE 3000：暴露容器的 3000 端口。
  • CMD ["npm", "start"]：启动 Next.js 应用。

4. 步骤四：配置 Next.js

在 next.config.js 文件中添加以下配置，以确保应用可以以独立模式运行：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
};

module.exports = nextConfig;

注释：这一步确保 Next.js 应用可以在 Docker 容器中独立运行。

5. 步骤五：创建 .dockerignore 文件

在项目根目录下创建一个 .dockerignore 文件，避免将不必要的文件复制到 Docker 镜像中：

node_modules
npm-debug.log
Dockerfile
.dockerignore
.next
.git

注释：这一步是为了减少 Docker 镜像的大小，提高构建速度。

6. 步骤六：构建 Docker 镜像

在终端中导航到项目根目录，然后运行以下命令构建 Docker 镜像：

docker build -t nextjs-docker .

注释：这一步将根据 Dockerfile 构建一个名为 nextjs-docker 的 Docker 镜像。

7. 步骤七：运行 Docker 容器

构建完成后，可以运行以下命令启动 Docker 容器：

docker run -d -p 3000:3000 nextjs-docker

注释：这一步将启动一个 Docker 容器，并将容器的 3000 端口映射到 VPS 的 3000 端口。

8. 步骤八：配置 Nginx 反向代理（可选）

为了通过域名访问你的 Next.js 应用，可以配置 Nginx 作为反向代理。

  1. 安装 Nginx：

    sudo apt-get install nginx

    注释：安装 Nginx 服务器。

  2. 配置 Nginx：

    编辑 Nginx 配置文件，例如 /etc/nginx/sites-available/default：

    server {
    listen 80;
    server_name your_domain_or_IP;

    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;
    }
}

    注释：

    • listen 80：监听 80 端口。
    • server_name your_domain_or_IP：替换为你的域名或 IP 地址。
    • proxy_pass http://localhost:3000：将请求转发到本地的 3000 端口。

  3. 重启 Nginx：

    sudo systemctl restart nginx

    注释：重启 Nginx 服务器以应用新的配置。

通过以上步骤，你可以在 VPS 上的 Docker 容器中成功部署 Next.js 应用，并通过 Nginx 反向代理进行访问。这样可以提高应用的可移植性、稳定性和可扩展性。