在Ubuntu中部署Next.js项目
<blockquote><p>以下步骤，均已多次在实战项目中实现，遂在此分享。</p>
<p>如有错漏之处，感谢斧正。</p>
<p>原文链接：https://mp.weixin.qq.com/s/Jaqpe4uhB5V1PsWhY6_Tzg</p>
</blockquote>
<h2 id="一服务器环境准备">一、服务器环境准备</h2>
<p>系统：Ubuntu 22.04 64位</p>
<p>配置：<strong>2</strong>核(vCPU) <strong>2</strong> GiB</p>
<p>允许远程SSH访问。</p>
<h2 id="二安装nginx">二、安装Nginx</h2>
<pre><code class="language-Shell"># 更新系统包
sudo apt update
# 安装 Nginx
sudo apt install nginx
# 开放防火墙端口,允许HTTP流量
sudo ufw allow 'Nginx HTTP'
</code></pre>
<h2 id="三安装nodejs">三、安装Node.js</h2>
<pre><code class="language-Shell"># 安装NVM（Node Version Manager）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
# 安装完成后，重新启动终端或运行
source ~/.bashrc
# 安装Node.js 18.17.0(需注意版本要求)
nvm install 18.17.0
# 验证安装
node -v# 应输出 v18.17.0
npm -v # 显示对应npm版本
</code></pre>
<h2 id="四部署nextjs项目">四、部署Next.js项目</h2>
<h3 id="41-将项目文件复制到服务器">4.1 将项目文件复制到服务器</h3>
<p>将项目文件夹中的文件复制到服务器指定文件夹（如 /usr/example-next-app），除了以下文件夹：</p>
<ul>
<li>
<p>.git</p>
</li>
<li>
<p>.vscode</p>
</li>
<li>
<p>node_modules</p>
</li>
</ul>
<h3 id="42-构建生产环境">4.2 构建生产环境</h3>
<p>将项目的源代码构建为生产环境可用的文件。</p>
<pre><code class="language-Shell"># 进入指定文件夹
cd /usr/example-next-app
# 安装项目依赖包
npm install
# 构建生产环境
npm run build
</code></pre>
<h3 id="43-安装pm2进程管理器">4.3 安装PM2进程管理器</h3>
<p>为了保持Next.js项目持续运行并实现自动重启，需安装PM2。</p>
<p>这是最常用的Node.js进程管理方案，具备自动重启、日志管理、集群模式等特性。</p>
<pre><code class="language-Shell"># 全局安装PM2
npm install pm2 -g
# 进入指定文件夹
cd /usr/example-next-app
# --name指定服务名称
# -- run start执行npm run start启动生产环境
pm2 start npm --name "example-next-app" -- run start
# 生成配置文件
pm2 ecosystem
</code></pre>
<p>修改生成的<code>ecosystem.config.js</code>：</p>
<pre><code class="language-JavaScript">module.exports = {
apps: [{
name: "example-next-app",
script: "npm",
args: "run start",
autorestart: true,// 启用崩溃自动重启
watch: false, // 关闭文件监听（生产环境建议关闭）
max_memory_restart: "1G" // 内存超限时重启
}]
}
</code></pre>
<p>持久化进程（开机自启）</p>
<pre><code class="language-Shell"># 生成系统服务配置
pm2 startup
# 保存当前进程列表
pm2 save
</code></pre>
<p>PM2其余的常用命令：</p>
<ul>
<li>
<p>查看进程状态：<code>pm2 list</code></p>
</li>
<li>
<p>实时日志监控：<code>pm2 logs next-app</code></p>
</li>
<li>
<p>手动重启服务：<code>pm2 restart next-app</code></p>
</li>
</ul>
<h2 id="五配置nginx反向代理">五、配置Nginx反向代理</h2>
<h3 id="51-创建-nginx-配置文件">5.1 创建 Nginx 配置文件</h3>
<p>在 <code>/etc/nginx/conf.d/</code> 目录下新建配置文件（如 <code>example-next-app.conf</code>），内容如下：</p>
<pre><code class="language-Nginx">server {
listen 80;
server_name 你的服务器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;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
# Next.js静态资源处理
location /_next/static {
root /usr/example-next-app/.next;# 关键路径修正
try_files $uri $uri/ =404;
add_header Cache-Control "public, max-age=31536000, immutable";
access_log off;
}
# 公共静态资源处理
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
root /usr/example-next-app/public;
try_files $uri @backend;
add_header Cache-Control "public, max-age=31536000, immutable";
access_log off;
}
# 回退到Node服务
location @backend {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
# 错误页面处理
error_page 404 /404.html;
location = /404.html {
internal;
}
}
</code></pre>
<h3 id="52-启用配置">5.2 启用配置</h3>
<pre><code class="language-Shell"># 检查Nginx语法，无错误提示则配置正确
sudo nginx -t
# 重载Nginx
sudo systemctl reload nginx
</code></pre>
<h3 id="53-其他nginx命令">5.3 其他Nginx命令</h3>
<pre><code class="language-Shell"># 查看 Nginx 服务状态
sudo systemctl status nginx
# 启动 Nginx
sudo systemctl start nginx
# 停止 Nginx
sudo systemctl stop nginx
# 重启 Nginx
sudo systemctl restart nginx
</code></pre>
<h2 id="六检查权限可选">六、检查权限（可选）</h2>
<h3 id="61-检查服务器文件夹权限">6.1 检查服务器文件夹权限</h3>
<p>确保 Nginx 有权限访问网站文件。你可以使用以下命令更改文件所有权和权限：</p>
<pre><code class="language-Shell">sudo chown -R www-data:www-data /usr/example-next-app
sudo chmod -R 755 /usr/example-next-app
</code></pre>
<h3 id="62-检查云服务器的防火墙设置">6.2 检查云服务器的防火墙设置</h3>
<p>如果云服务器有开启防火墙，防火墙可能会阻止对 Nginx 服务的访问。</p>
<p>所以，需要确保防火墙允许 HTTP（端口 80）或者 HTTPS（端口 443）流量通过。</p>
<pre><code class="language-Shell"># 允许HTTP流量
sudo ufw allow 'Nginx HTTP'
# 允许HTTPS流量
sudo ufw allow 'Nginx HTTPS'
</code></pre>
<h3 id="63-检查云服务器出入站规则">6.3 检查云服务器出入站规则</h3>
<p>在云服务器的防火墙（安全组）规则中，分别添加出入站规则，需支持HTTP，视情况支持HTTPS。</p>
<h2 id="七验证成功">七、验证成功</h2>
<p>在任意浏览器，输入【你的IP地址】便可正常访问Next.js网站了。</p><br><br>
来源：https://www.cnblogs.com/yypztop/p/18860302/nextjs-release-to-ubuntu
頁:
[1]