nginx部署前端项目404

### 解决Nginx部署前端项目遇到的404错误

当在Nginx上部署前端项目并遇到404错误时，通常是因为请求路径未能正确映射到实际存在的资源。以下是针对此问题的具体处理措施：

#### 1. 配置文件调整
确保Nginx配置文件中的`location / { ... }`部分已设置为允许尝试静态文件匹配，并最终回退至索引页或单页面应用(SPA)入口文件。对于SPA而言，所有未知URL都应重定向到index.html以便JavaScript路由接管。

server {
    listen       80;
    server_name  localhost;

    location / {
        root   html;  # 前端项目的根目录位置
        try_files $uri $uri/ /index.html;  # 关键配置项用于支持前端路由
        index  index.html index.htm;
    }
}

该配置使得任何找不到对应物理文件的请求都会被导向`index.html`[^1]。

#### 2. 文件结构验证
确认服务器上的文件夹布局与预期相符，特别是HTML、CSS和其他资产的位置是否正确无误。如果使用构建工具打包后的产物，则需保证这些输出文件已被放置于Nginx所指向的确切路径下。

#### 3. Nginx日志审查
利用Nginx的日志功能追踪具体哪些请求触发了404状态码。通过查看`error_log`可以获取更多关于为何某些资源无法找到的信息；而`access_log`则有助于了解客户端发出的实际HTTP请求模式。

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

这一步骤能够帮助定位是否存在拼写错误或其他明显的配置失误。

#### 4. 测试连接与权限
检查是否有足够的读取权限让Nginx访问所需的Web内容。此外，还需测试网络连通性和防火墙规则以排除外部因素干扰正常的服务响应。

完成以上操作之后记得再次重启Nginx服务使更改生效:

systemctl restart nginx