介绍
Next.js 是一个流行的 React 框架，可以轻松构建服务器端渲染的 React 应用。在本教程中，我们将逐步讲解如何使用 Nginx 作为反向代理，在 DigitalOcean 服务器（droplet）上部署 Next.js 应用。本分步指南假设您已准备好部署 Next.js 应用并拥有 DigitalOcean 帐户。.
先决条件
- 一个 Next.js 应用程序
- DigitalOcean 账户
- 注册域名（可选，但推荐）
- 本地安装 Node.js 和 npm 或 yarn
步骤 1：创建 DigitalOcean Droplet
我们将把 Next.js 应用托管在 DigitalOcean Droplet 上，并自行配置该 Droplet。现在就来创建 Droplet 吧。.
- 登录您的 DigitalOcean 帐户并转到 Droplets 部分。.
- 点击“创建 DROPLET”。.
- 选择 Ubuntu 镜像（最好是最新的 LTS 版本）。.
- 根据您的需求和预算选择所需的液滴尺寸。.
- 为了获得更好的性能，请选择距离目标受众最近的数据中心区域。.
- 添加您的 SSH 密钥，以便安全访问您的服务器实例。.
- 为您的服务器选择一个主机名，可以是您的域名或任何您喜欢的名称。.
- 点击“创建 DROPLET”。.
- 创建 Droplet
创建 Droplet 后，请记下分配给它的 IP 地址。.
步骤 2：启动 Droplet
现在我们已经创建了 droplet，我们需要对其进行准备，使其能够接受传入的连接并将这些连接路由到我们的 Next.js 应用程序。.
使用您在创建 droplet 时提供的 IP 地址和 SSH 密钥通过 SSH 连接到您的 droplet：
ssh root@<DROPLET_IP>
在 Droplet 中更新和升级软件包：
sudo apt update && sudo apt upgrade -y
安装所需软件包：
sudo apt install -y nodejs npm nginx
步骤 3：配置 Nginx
Nginx 是负责处理 Next.js 应用所有路由的工具。请为您的 Next.js 应用创建一个新的 Nginx 配置文件：
sudo nano /etc/nginx/sites-available/nextjs
粘贴以下配置，并将 server_name 替换为您的服务器域名或 IP 地址：
server {
listen 80;
server_name YOUR_IP_ADDRESS;
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;
}
}保存并关闭文件。创建符号链接以激活配置：
sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/
检查 Nginx 配置是否存在语法错误：
sudo nginx -t
如果配置测试成功，请重启 Nginx：
sudo service nginx restart
步骤 4：部署 Next.js 应用程序
接下来，我们将 Next.js 应用部署到 Droplet 中。有很多方法可以实现这一点。.
- 在服务器上创建 SSH 密钥，将其连接到您的 GitHub 帐户，然后克隆您的存储库。
- 在 Droplet 中创建一个 Next.js 应用程序
在本教程中，我们将在 Droplet 中创建一个新的 Next.js 应用程序。.
重新通过 SSH 连接到您的服务器：
ssh root@<DROPLET_IP>
创建一个新的 Next.js 应用程序并按照以下说明操作：
cd /var/www
npx create-next-app nextjs进入 Next.js 应用程序目录：
cd nextjs
安装程序依赖项：
npm install
构建 Next.js 应用程序：
npm run build
最后，运行 Next.js 应用程序：
npm start
您的 Next.js 应用现已部署完毕，可通过您的服务器域名或 IP 地址访问。要让您的应用在后台运行，并在服务器崩溃或重启时自动重启，您需要使用像 PM2 这样的进程管理器。.
步骤 5：启动 PM2 流程管理器
我们在 Droplet 内部启动了 npm。有时，由于服务器重启或需要安装更新等原因，该命令可能会停止运行。我们将使用名为 PM2 的工具来确保 Next.js 应用程序始终运行。即使 Next.js 应用程序崩溃，PM2 也会重新启动。.
要在您的服务器上全局安装 PM2：
sudo npm install -g pm2
转到 Next.js 应用程序目录（如果该目录尚未存在）：
cd /var/www/nextjs
使用 PM2 启动 Next.js 应用程序：
pm2 start npm --name "nextjs" -- start
此命令使用 npm start 命令启动名为“nextjs”的 Next.js 应用程序。如果服务器崩溃或重启，PM2 将自动重启该应用程序。.
为确保 PM2 在启动时启动，请运行：
pm2 startup
此命令将创建一个脚本，您可以将其复制并粘贴到终端中，以便在启动时启动 PM2。.
保存当前 PM2 进程：
pm2 save
结果
您已成功在 DigitalOcean 服务器上运行 Next.js 应用程序，并使用 Nginx 作为反向代理，PM2 作为进程管理器。您的应用程序应该可以通过服务器的域名或 IP 地址访问。.
如果您使用域名，请记得配置 DNS 设置。将域名的 A 记录指向您的服务器实例的 IP 地址，以便您可以使用域名访问应用程序。.
为了提升安全性和搜索引擎优化 (SEO) 效果，请考虑使用 Let's Encrypt 设置 SSL 证书并实施 HTTPS 连接。此外，您还可以探索通过缓存和其他性能优化措施来改进 Next.js 应用程序。.
