ubuntu上用nginx部署前端项目

项目上需要在ubuntu部署前端应用，我梳理了完整流程，希望对你也有用。

下图清晰地展示了从规划到上线的完整步骤与检查点，你可以按此流程操作：

---

📝 第一步：规划——确定三个关键参数

在开始前，先明确以下信息（以“项目B”为例）：

项	建议	示例（请替换为你的实际内容）	必须确保
1. 端口	选一个未被占用的端口。	3003	不能与现有应用（3001, 3002）或系统服务冲突。
2. 访问域名/方式	本地测试可用自定义域名或IP直连。	project-b.local 或直接用 服务器IP:3003	若用域名，需在本机hosts文件添加映射。
3. 网站根目录	在 /var/www/ 下创建独立新目录。	/var/www/project-b	目录名清晰，与项目对应。

检查端口是否被占用（以3003为例）：

sudo ss -tulpn | grep :3003

无输出则表示端口可用。

---

📁 第二步：准备应用文件与目录

1. 创建项目根目录：

   sudo mkdir -p /var/www/project-b
   

2. 上传前端文件：将你构建好的前端文件（如 dist 目录下的所有内容）上传至此目录。可以使用 scp 命令（从你的本地电脑执行）：

   scp -r ./dist/* your_username@你的服务器IP:/var/www/project-b/
   

3. 设置正确的权限：

   sudo chown -R www-data:www-data /var/www/project-b
   sudo chmod -R 755 /var/www/project-b
   

这一步至关重要，不设置的话会有403错误。

---

⚙️ 第三步：创建Nginx配置文件

1. 在 sites-available 目录下创建新配置文件：

   sudo nano /etc/nginx/sites-available/project-b
   

2. 复制并修改以下配置模板。请重点关注注释行，根据你的规划进行修改：

   server {
       # 【修改点1】监听端口：改为你规划的端口，例如3003
       listen 3003;
       # 监听IPv6的相同端口（可选）
       listen [::]:3003;
   
       # 【修改点2】设置域名：本地测试可用自定义域名（如 project-b.local）
       # 如果不需要域名，用下划线 _ 作为通配符，通过 IP:端口 访问
       server_name project-b.local;
   
       # 【修改点3】网站根目录：指向你刚创建的目录
       root /var/www/project-b;
       index index.html index.htm;
   
       location / {
           # 此指令对Vue/React等单页应用路由至关重要
           try_files $uri $uri/ /index.html;
       }
   
       # （可选）静态资源缓存，提升性能
       location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg)$ {
           expires 1y;
           add_header Cache-Control "public, immutable";
       }
   
       # （可选）禁止访问隐藏文件（如.git、.env）
       location ~ /\. {
           deny all;
       }
   }
   

   nginx的配置跟在windows中是一样的。

3. 按 Ctrl+O 保存，Enter 确认，再按 Ctrl+X 退出 nano。

这一步跟vim操作差不多。

---

🔗 第四步：启用站点配置

创建从 sites-available 到 sites-enabled 的符号链接（即“启用”该站点）：

sudo ln -s /etc/nginx/sites-available/project-b /etc/nginx/sites-enabled/

这一步相当于在sites-enabled目录建立一个快捷方式，代表此项目可用。

---

✅ 第五步：测试配置并重载Nginx

这是必须且关键的步骤，任何配置修改后都要执行。

1. 测试语法：

   sudo nginx -t
   

   如果输出 syntax is ok 和 test is successful，说明配置无误。
2. 重载Nginx（应用新配置）：

   sudo systemctl reload nginx
   

---

🌐 第六步：验证与访问

1. 确认Nginx正在监听新端口：

   sudo ss -tulpn | grep :3003
   

   应有输出，显示 nginx 进程在监听 3003。
2. 在服务器上本地测试：

   curl -I http://127.0.0.1:3003
   

   应返回 HTTP/1.1 200 OK。
3. 在客户端电脑访问：
   • 方案A（通过IP:端口）：直接在浏览器输入 http://你的服务器IP:3003就可以访问了。
   • 方案B（通过自定义域名，如project-b.local）：
     • 如果你想自定义域名，可先在客户端电脑的 hosts 文件中添加一行：你的服务器IP project-b.local。
     • 然后在浏览器输入 http://project-b.local:3003。

⚠️ 如果无法访问，请检查

• 防火墙：如果服务器开启了防火墙（如UFW），需放行新端口：

  sudo ufw allow 3003/tcp
  sudo ufw reload
  

• 错误日志：查看具体错误信息：

  sudo tail -f /var/log/nginx/error.log
  

---

📦 总结：一套清晰的标准化流程

未来部署第N个应用，只需重复此流程，并确保：

1. 端口不重复。
2. 目录独立。
3. server_name 或端口在配置中唯一。
4. 每次修改配置后，必执行 sudo nginx -t && sudo systemctl reload nginx。