ubuntu上用nginx部署前端项目

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

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

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

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

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

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

bash 复制代码

sudo ss -tulpn | grep :3003

无输出则表示端口可用。

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

创建项目根目录 ：
bash 复制代码
```
sudo mkdir -p /var/www/project-b
```
上传前端文件 ：将你构建好的前端文件（如 dist 目录下的所有内容）上传至此目录。可以使用 scp 命令（从你的本地电脑执行）：
bash 复制代码
```
scp -r ./dist/* your_username@你的服务器IP:/var/www/project-b/
```

设置正确的权限 ：

bash 复制代码

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

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

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

在 sites-available 目录下创建新配置文件：
bash 复制代码
```
sudo nano /etc/nginx/sites-available/project-b
```

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

nginx 复制代码

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中是一样的。

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

这一步跟vim操作差不多。

🔗 第四步：启用站点配置

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

bash 复制代码

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

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

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

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

测试语法 ：
bash 复制代码
```
sudo nginx -t
```
如果输出 syntax is ok 和 test is successful，说明配置无误。
重载Nginx（应用新配置） ：
bash 复制代码
```
sudo systemctl reload nginx
```

🌐 第六步：验证与访问

确认Nginx正在监听新端口 ：
bash 复制代码
```
sudo ss -tulpn | grep :3003
```
应有输出，显示 nginx 进程在监听 3003。
在服务器上本地测试 ：
bash 复制代码
```
curl -I http://127.0.0.1:3003
```
应返回 HTTP/1.1 200 OK。
在客户端电脑访问 ：
- 方案A（通过IP:端口） ：直接在浏览器输入 http://你的服务器IP:3003就可以访问了。
- 方案B（通过自定义域名，如project-b.local） ：
  - 如果你想自定义域名，可先在客户端电脑的 hosts 文件中添加一行：你的服务器IP project-b.local。
  - 然后在浏览器输入 http://project-b.local:3003。

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

防火墙 ：如果服务器开启了防火墙（如UFW），需放行新端口：
bash 复制代码
```
sudo ufw allow 3003/tcp
sudo ufw reload
```
错误日志 ：查看具体错误信息：
bash 复制代码
```
sudo tail -f /var/log/nginx/error.log
```

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

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

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