首页nginx同一域名同一端口部署多个前端项目

nginx同一域名同一端口部署多个前端项目

时间: 2025-06-22 17:45:50 浏览: 52

### 配置Nginx以实现在同一域名和端口上托管多个前端应用 #### 修改站点配置文件为了在同一域名和端口下使用 Nginx 托管多个前端应用程序，需编辑位于 `/etc/nginx/sites-enabled/` 下的配置文件。对于默认设置而言，则应修改名为 `default` 的文件[^1]。 #### 定义不同路径映射至各前端项目在该配置文件内，可以通过定义不同的 location 块来指定各个前端项目的根目录以及处理静态资源请求的方式： ```nginx server { listen 80; server_name yourdomain.com; # 第一个前端应用 location /app1/ { alias /path/to/app1/dist/; try_files $uri $uri/ /index.html; } # 第二个前端应用 location /app2/ { alias /path/to/app2/dist/; try_files $uri $uri/ /index.html; } } ``` 上述示例展示了两个前端应用分别挂载到了 `/app1/` 和 `/app2/` 这样的 URL 路径之下，并指定了各自构建后的输出文件夹位置作为服务源。同时利用 `try_files` 指令确保即使访问不存在的具体页面也能正确加载单页应用 (SPA)[^3]。 #### 处理 HTML5 History Mode 中的路由问题当采用 Vue Router 并启用 history 模式时，在刷新浏览器或直接输入地址栏中的深层链接时可能出现找不到对应资源的情况。此时可以在每个location块中加入如下指令解决此问题: ```nginx location /appX/ { ... try_files $uri $uri/ /appX/index.html; } ``` 其中 X 表示具体的应用编号，这会使得任何未匹配到实际存在的文件或目录的情况下都返回 index.html 文件从而让前端框架接管后续的路由解析工作[^4]。完成以上更改之后保存并关闭文件，最后执行命令重启 Nginx 即可使新的配置生效。

阅读全文