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

1- 步骤一：准备工作

获取VPS账号：确保你已经有一个VPS账号，并通过SSH工具（如Putty）连接到VPS服务器。
更新系统包：在开始安装Docker之前，确保你的系统包是最新的。可以使用以下命令更新系统包：
```
sudo apt-get update
sudo apt-get upgrade
```
注释：这一步是为了确保系统的所有软件包都是最新的，避免在后续安装过程中出现兼容性问题。

2- 步骤二：安装Docker

2.1- 在Ubuntu/Debian上安装Docker

安装必要的依赖：
```
sudo apt-get install apt-transport-https ca-certificates curl software-properties-common
```
注释：这些依赖包是为了确保系统能够通过HTTPS下载软件包，并且能够添加新的软件源。
添加Docker的GPG密钥：
```
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
```
注释：这一步是为了确保从Docker官方源下载的软件包是可信的。

添加Docker的APT源：

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

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

更新APT包索引并安装Docker：
```
sudo apt-get update
sudo apt-get install docker-ce
```
注释：更新包索引后，安装Docker社区版（CE）。
启动Docker服务并设置开机自启动：
```
sudo systemctl start docker
sudo systemctl enable docker
```
注释：启动Docker服务，并设置为开机自启动，以确保服务器重启后Docker仍然运行。

2.2- 在CentOS上安装Docker

安装必要的依赖：
```
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
```
注释：这些依赖包是为了确保系统能够管理存储设备和下载软件包。

添加Docker的YUM源：

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

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

安装Docker：
```
sudo yum install docker-ce
```
注释：安装Docker社区版（CE）。
启动Docker服务并设置开机自启动：
```
sudo systemctl start docker
sudo systemctl enable docker
```
注释：启动Docker服务，并设置为开机自启动，以确保服务器重启后Docker仍然运行。

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

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

# 使用官方的 Node.js 镜像作为基础镜像
FROM node:18-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"]

注释：

FROM node:18-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作为反向代理。

安装Nginx：
```
sudo apt-get install nginx
```
注释：安装Nginx服务器。

配置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端口。

重启Nginx：
```
sudo systemctl restart nginx
```
注释：重启Nginx服务器以应用新的配置。

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

#deploy

#next.js #docker

Remix 上一篇

Next.js 下一篇