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会给出相应提示。

三、部署总结

这套Next.js静态网站的部署流程涵盖了项目构建、上传代码、启动服务、配置HTTPS以及设置Nginx等关键环节。通过这样的部署方式，服务在出现中断时能够自动重启，系统重启后也能自动上线，用户可以通过域名以HTTPS的方式进行访问。

在实际部署过程中，大家可以根据项目的具体需求和实际情况，灵活调整和优化各个环节，希望这篇文章能对正在进行Next.js项目部署的开发者有所帮助。

版权声明：本站文章，如无说明，均为本站原创，转载请注明文章来源。如有侵权，请联系博主删除。
本文链接：https://www.panziye.com/tool/17044.html