Next.js快速且不依赖Docker的国内部署新方案

最近我在负责一个基于Next.js开发的官网项目时，由于官网更新频率不高，为了实现简单可控的部署，探索出了一套不依赖Docker的方案。该方案仅需借助SFTP上传文件到服务器，再配合Nginx和PM2就能完成部署。如果想要进一步优化，还能引入GitHub Action实现自动化部署。接下来，我会详细介绍这套基础部署步骤，同时也分享一下前期尝试过的Vercel、Docker部署方案，供大家参考。

一、前期方案尝试：Vercel与Docker

（一）Vercel部署：便捷但存在局限

Vercel是Next.js官方推荐的部署平台，对于初创团队和个人项目而言，它具有极大的吸引力。其最大的优势在于支持一键部署，只要绑定GitHub等代码托管平台，就能轻松将项目上线，并且还提供免费域名。

下面是具体的部署步骤：

注册与登录：访问Vercel官网，使用GitHub、GitLab或Bitbucket账号登录，完成账号创建。
导入项目：点击“New Project”，选择Git仓库提供商，授权Vercel访问仓库，然后选中Next.js项目。
配置部署：Vercel能自动识别Next.js项目，默认的构建命令是“next build”，输出目录为“.next”。如果项目需要，还可以在这里添加环境变量。完成设置后，点击“Deploy”即可开始部署。部署完成后，Vercel会提供预览URL。
配置自定义域名（可选）：在项目设置中添加域名，不过在添加时可能会遇到“Invalid Configuration”的提示。这是因为需要在域名服务商处添加CNAME记录。

然而，Vercel也存在明显的问题。由于其服务器在国外，国内访问Vercel的速度较慢，甚至可能出现无法访问的情况。考虑到该官网主要面向国内用户，为了保证访问速度，我放弃了Vercel方案，开始探索其他部署方式。

（二）Docker部署：尝试后的放弃

Docker部署的优势在于能实现环境统一，做到“一次构建，处处运行”。起初，我考虑采用这种方式进行部署。但在实际操作过程中，遇到了诸多问题。

网上常见的Docker方案大多是在线上进行构建，可我在尝试时，连Node镜像都无法下载，即便更换了镜像源，问题依旧没有得到解决。后来我尝试换成本地构建的方案，使用AI生成的Dockerfile，结果运行时出现了包版本冲突。而且对于AI生成的配置文件，我心里始终有些不踏实，缺乏足够的信任。权衡之下，最终还是放弃了Docker部署方案，选择了更简单直接的方式：基于Node环境，结合Nginx和PM2进行部署。

二、最终确定的部署方案

（一）本地构建与测试

在正式部署之前，强烈建议先在本地进行项目的打包和运行测试。这一步非常关键，通过在本地模拟部署过程，可以提前发现诸如依赖缺失、打包失败等问题。这样就能避免将有问题的项目上传到服务器后，还要来回修改bug、重新上传的麻烦。具体操作命令如下：

pnpm install # 安装项目所需的依赖包 pnpm build # 执行项目构建 pnpm start # 启动生产环境

如果本地测试一切正常，就说明项目已经准备就绪，可以进行上线部署了。

（二）使用Termius连接服务器并上传项目

Termius是一款跨平台的SSH/SFTP客户端工具，借助它可以方便地管理服务器连接和文件传输。在部署过程中，主要涉及以下两个操作：

上传代码（SFTP）：打开Termius，连接服务器后，开启SFTP面板，将本地项目文件夹上传到服务器指定目录，比如“/var/www/your-project”。如果是多人协作项目，也可以通过Git拉取代码，操作如下：

git clone https://github.com/yourname/yourproject.git cd yourproject

登录服务器（SSH）并安装环境：在Termius中点击打开服务器终端，首先确认服务器上是否已经安装了Node和pnpm，可以使用以下命令进行检查：

node -v pnpm -v

若未安装，则可以借助nvm进行安装，具体命令如下：

# 安装nvm，nvm是用于管理Node.js版本的工具 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash # 使nvm立即生效，将nvm的配置加载到当前终端 source ~/.bashrc # 安装长期支持版本的Node.js nvm install --lts # 安装pnpm，pnpm是一款快速、节省磁盘空间的包管理器 npm install -g pnpm

安装完成后，进入项目目录，安装项目依赖并进行构建：

cd /var/www/your-project pnpm install pnpm build

（三）配置PM2

PM2是一个强大的进程管理工具，它能够让Node应用持续稳定运行，还支持重启、查看日志、设置开机自启等功能，方便统一管理多个项目。

安装与使用PM2的命令如下：

npm install -g pm2

使用下面的命令启动生产服务：

pm2 start "pnpm start" --name "your-app-name"

其中，“–name”参数用于给进程命名，方便后续对其进行查看和管理；“pnpm start”用于启动生产环境，但需要注意的是，必须先执行“pnpm build”。

此外，还有一些常用的PM2命令：

pm2 list # 查看当前所有正在运行的服务 pm2 stop <id> # 停止指定服务，<id>或<name>需替换为实际的进程ID或名称 pm2 logs # 查看服务日志 pm2 save # 保存当前服务状态，以便下次重启后自动恢复 pm2 startup # 设置开机自启，执行后会输出一条命令，复制粘贴该命令并执行即可

（四）配置SSL证书

在配置Nginx之前，需要先准备好HTTPS证书。比较推荐的方式是在云厂商处申请证书，比如在阿里云或腾讯云，都可以申请免费的SSL证书（PEM格式）。

申请完成后，将下载的证书文件上传到服务器，具体路径如下：

/etc/nginx/ssl/yourdomain.com.pem # 公钥（证书文件） /etc/nginx/ssl/yourdomain.com.key # 私钥

（五）配置Nginx反向代理

Nginx在整个部署过程中扮演着重要角色。当浏览器请求域名（例如“yourdomain.com”）时，Next.js项目实际运行在本地“localhost:3000”，Nginx作为“反向代理”，负责将请求转发给PM2中运行的服务，同时它还能处理HTTPS、静态资源、证书等相关事务。

下面是Nginx的配置示例：

# 自动将HTTP重定向到HTTPS server { listen 80; server_name yourdomain.com; # 填写你的域名 return 301 https://$host$request_uri; } # HTTPS服务 server { listen 443 ssl; server_name yourdomain.com; # 填写你的域名 ssl_certificate /etc/nginx/ssl/yourdomain.com.pem; # 证书路径 ssl_certificate_key /etc/nginx/ssl/yourdomain.com.key; # 私钥路径 location / { proxy_pass http://localhost:3000; # 对应PM2中服务的端口 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; } # Next.js静态资源 location /_next/static/ { alias /var/www/your-project/.next/static/; # 确保路径正确，包含点号，并以斜杠结尾 expires 1y; access_log off; add_header Cache-Control "public, max-age=31536000, immutable"; } # 公共资源 location /public/ { alias /var/www/your-project/public/; # 使用alias并加斜杠 try_files $uri $uri/ =404; } # 404页面 error_page 404 /404.html; location = /404.html { internal; root /var/www/your-project/public; } }

配置完成后，还需要启用配置，具体操作如下：

# 建立软链接，使配置文件生效 sudo ln -s /etc/nginx/sites-available/your-app.conf /etc/nginx/sites-enabled/ # 检查Nginx配置语法是否正确 sudo nginx -t # 应用配置，使修改后的配置生效 sudo systemctl reload nginx

完成上述所有配置后，在浏览器中访问“yourdomain.com”，就可以正常访问应用了。如果配置过程中有错误，Nginx会给出相应提示。