Question

在我的应用程序中，我有3个站点 - 用户前端，管理员面板和启动页面。我想在localhost中运行用户前端：8080 ， localhost中的管理员面板：8080 / admin < / strong>和在localhost中飞溅：8080 / splash

要运行此操作，我使用以下配置：

server { listen 8080; server_name localhost; root /home/ajit/git/univisior; location / { alias /home/ajit/git/univisior/FrontEnd/dist/; index index.html; try_files $uri $uri/ /index.html; } location /admin{ alias /home/ajit/git/univisior/admin/dist/; index index.html; try_files $uri $uri/ index.html; } location /splash { alias /home/ajit/git/univisior/Splash/dist/; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:3000/api; } }

此配置的问题是这个

当我打开管理站点（localhost：8080 / admin）时，我收到错误

VM189：1未捕获的SyntaxError：意外的标记＆lt;

但是当我运行带有单站点配置的管理站点时，它运行正常，nginx配置粘贴在下面：

server { listen 9010; server_name localhost; root /home/ajit/git/univisior/admin/dist; index index.html index.htm; location / { index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:3000/api; } location /static { alias /opt/univisor; } }

使用启动页面我无法获取images.splash如果我使用单站点配置运行此操作也可以正常运行。

用户前端工作正常，但我面临管理员和splash.can的问题任何人帮我解决这个问题。

谢谢

Answer 1

从别名指令中删除尾随的/：

location / {
    alias /home/ajit/git/univisior/FrontEnd/dist/;
    index index.html;
    try_files $uri $uri/ /index.html;

}
location /admin{
    # alias /home/ajit/git/univisior/admin/dist/;
    alias /home/ajit/git/univisior/admin/dist;
    # index index.html;
    # try_files $uri $uri/ index.html;
    try_files $url $uri/;

}

location /splash {
    # alias /home/ajit/git/univisior/Splash/dist/;
    alias /home/ajit/git/univisior/Splash/dist;
    # index index.html;
    # try_files $uri $uri/ /index.html;
    try_files $uri $uri/;
}

Answer 2

我能够找出问题所在。管理员和启动页面中的问题都是相同的。 index.html中的图像和脚本文件的路径写为

<img src="../images/logo.png" alt="logo">
.
.
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>

当运行具有单站点nginx配置的索引文件（上面粘贴的管理站点配置）时，admin和splash都可以正常工作。但是在像这样的配置中运行它们时

.
.
location / {
    alias /home/ajit/git/univisior/FrontEnd/dist/;
    index index.html;
    try_files $uri $uri/ /index.html;

}
location /admin{
    alias /home/ajit/git/univisior/admin/dist/;
    index index.html;
    try_files $uri $uri/ index.html;

}

location /splash {
    alias /home/ajit/git/univisior/Splash/dist/;
    index index.html;
    try_files $uri $uri/ /index.html;
}
.
.

发出问题，因为<img src="../images/logo.png" alt="logo">将寻找url localhost：8080 / images / logo.png而不是localhost：8080 / admin / images / logo.png同样适用于脚本，因为此浏览器无法获取脚本/图像。

为了解决这个问题，我将index.html中的 ../ 替换为最终的index.html。

<img src="images/logo.png" alt="logo">
.
.
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>

Nginx：无法在单个URL中运行多个站点

2 个答案: