在这篇教程中，我们将讲解如何在 Ubuntu 22.04 服务器上使用 Nginx 托管 Next.js 应用程序。
Next.js 是一个强大的 React 框架，使开发人员能够构建快速、用户友好的 Web 应用程序和网站。它简化了创建静态和动态网页的过程，提供了诸如服务器端渲染（SSR）和静态站点生成（SSG）等内置功能。这些功能通过允许页面在服务器上预渲染来提高性能和 SEO。
Next.js 还支持 API 路由，使开发人员能够在单个框架内构建全栈应用程序。凭借自动代码拆分、优化的性能以及丰富的插件和工具生态系统，Next.js 被广泛用于创建稳健、可扩展的应用程序，从而提供卓越的用户体验。它可以与流行的工具和平台无缝集成，使其成为现代 Web 开发的多功能选择。
在 Ubuntu VPS 上使用 Nginx 作为反向代理来部署 Next.js 应用程序是一种可靠且高效的方式来提供你的 Web 应用程序。在本教程中，我们将逐步介绍使用 Nginx 在 Ubuntu 服务器上设置和部署 Next.js 应用程序的步骤。
准备工作
服务器准备
必要前提：
- 一个充满求知欲的大脑。
- 一台 Linux 服务器（推荐腾讯云、阿里云或雨云等）。
我将以 雨云 为例，带大家创建一台自己的云服务器，以便学习本篇文章的内容。
注册链接： https://rainyun.ivwv.site
创建雨云服务器
以下步骤仅供参考，请根据实际需求选择配置。
- 点击 云产品 → 云服务器 → 立即购买。
- 选择距离你较近的区域，以保证低延迟。
- 按照自己需求选择配置，选择Ubuntu 22.04 版本，按照自己需求是否预装Docker。
- 最后按照提示进行购买。
- 购买后等待机器部署完毕，点击刚刚创建好的服务器，进入管理面板，找到远程连接相关信息。
- 我们使用
PowerShell进行SSH远程连接到服务器，Win+R打开运行窗口，输入powershell后点击确定。
- 输入
ssh root@你的服务器IP例如ssh root@154.9.227.239回车后，首次需要输入yes，再次回车后即可登录服务器。
- 到此为止，我们的云服务器就远程连接上了。
安装和配置步骤
第一步：更新和保护你的服务器
在部署你的应用程序之前，必须更新你的服务器软件包并保护它。
sudo apt update && sudo apt upgrade -y
第二步：安装 Node.js 和 npm
对于最新版本，请访问 Node.js 官方文档页面。
# 安装 nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
# 下载并安装 Node.js (你可能需要重启终端)
nvm install 20
验证安装：
# 验证环境中正确的 Node.js 版本
node -v # 应该打印 `v20.17.0`
# 验证环境中正确的 npm 版本
npm -v # 应该打印 `10.8.2`
第三步：部署 Next.js 应用程序
有两种部署方式。首先，克隆你的 Git 仓库或在服务器中创建一个 Next.js 应用程序。我们已经涵盖了这两种方式。
克隆 Git 仓库
接下来，你需要将你的 Next.js 应用程序传输到你的 VPS。如果你的项目托管在 GitHub 上，你可以直接克隆它：
git clone https://github.com/yourusername/my-nextjs-app.git
进入你的项目目录：
cd my-nextjs-app
安装依赖项并构建应用程序。在你的项目目录中，安装必要的依赖项：
npm install
构建你的 Next.js 应用程序：
npm run build
创建一个 Next.js 应用程序
让我们继续安装。
运行以下命令，使用 create-next-app 工具创建一个新的 Next.js 应用程序：
npx create-next-app@latest my-nextjs-app
上面的命令会提示一些问题：
create-next-app@14.2.7
Ok to proceed? (y) y
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
导航到项目目录。项目创建后，导航到项目目录：
cd my-nextjs-app
要构建用于生产的应用程序，请使用：
npm run build
第四步：安装和配置 PM2
PM2 是 Node.js 应用程序的进程管理器，可确保你的应用程序保持在线。
npm install -g pm2
使用 PM2 启动你的 Next.js 应用程序：
pm2 start npm --name "my-nextjs-app" -- start
为确保 PM2 在系统启动时启动你的应用程序，请运行：
pm2 startup systemd
pm2 save
检查状态
pm2 status
输出：
┌────┬────────────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id │ name │ namespace │ version │ mode │ pid │ uptime │ ↺ │ status │ cpu │ mem │ user │ watching │
├────┼────────────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0 │ my-nextjs-app │ default │ 0.40.0 │ fork │ 4189 │ 50s │ 0 │ online │ 0% │ 55.1mb │ root │ disabled │
└────┴────────────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘
第五步：配置防火墙
如果你启用了 UFW 防火墙，你需要添加 HTTP 和 HTTPS 端口：
ufw allow 80/tcp
ufw allow 443/tcp
ufw reload
第六步：安装和配置 Nginx 作为反向代理
安装 Nginx：
sudo apt install nginx -y
为你的应用程序创建一个新的 Nginx 配置文件：
sudo nano /etc/nginx/sites-available/your-nextjs-app
添加以下配置：
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;
}
}
将 your_domain_or_ip 替换为你的域名或服务器 IP 地址。 保存并关闭文件。
创建一个符号链接以启用此配置：
sudo ln -s /etc/nginx/sites-available/your-nextjs-app /etc/nginx/sites-enabled/
测试 Nginx 配置以确保没有错误：
sudo nginx -t
如果测试成功，请重启 Nginx：
sudo systemctl restart nginx
第七步：使用 SSL 保护你的应用程序
强烈建议使用 SSL 保护你的应用程序。你可以使用 Certbot 从 Let’s Encrypt 获取免费的 SSL 证书。
首先，安装 Certbot：
sudo apt install certbot python3-certbot-nginx -y
然后，运行 Certbot 以获取并配置 SSL 证书：
sudo certbot --nginx -d your_domain
Certbot 将自动为你的 Nginx 站点配置 SSL。
第八步：验证你的部署
你的 Next.js 应用程序现在应该在你的域名 https://your_domain 上运行。在 Web 浏览器中访问你的域名，以验证一切工作是否正常。
结尾
你已经成功了解了如何在 Ubuntu 22.04 服务器上使用 Nginx 托管 Next.js 应用程序。通过使用 Nginx 处理传入流量和 PM2 管理应用程序进程，你的 Next.js 应用程序可以很好地处理生产工作负载。请记住保持你的服务器和应用程序更新，以确保最佳的安全性和性能。
雨云 - 新一代云服务提供商: https://rainyun.ivwv.site
我的博客：https://blog.ivwv.site