Can'；t使用nginx让两个单页应用程序在一台服务器上同时运行

更新：我编辑了这篇文章，以便更清楚地了解这个问题。此更新已覆盖上一篇文章

我们有两个单页应用程序，需要通过相同的域和端口，但在不同的位置进行访问

Application1是一个面向公众用户的应用程序，访问时应加载该应用程序

Application2是一个面向公共管理员的应用程序，需要身份验证，如果他们访问，应该加载它而不是application1

目前我加载第一个应用程序没有问题，但是，我尝试了各种与我的nginx conf文件的组合，以便在访问时加载第二个应用程序，但没有成功

它总是加载application1应用程序

Application1 = /var/www/client/public
Application2 = /var/www/client/admin

/var/www/client
     /public (application1)
          index.html
          /dist
     /admin (application2)
          index.html
          /dist

这是example.com.conf文件。我尝试过各种组合，但这是我试图保持它非常简单

server {
     listen 80;

     root /var/www/client;
     index index.html index.htm;

     server_name happyhourmenu.ca;

     location / {
          root /var/www/client/public;
          try_files $uri $uri/ =404;
     }

     location /admin {
          alias /var/www/client/admin;
          try_files $uri $uri/ =404;
     }
}

---

我花了好几天的时间在这上面，真不敢相信这么简单的事情让我耽搁了这么久。

您需要在服务器配置中添加位置。 假设您需要访问的路径是/admin，并且文件位于目录app2中

   location /admin {
        alias /app2; 
    }

因此，配置如下所示：

server {
       listen [::]:443 ssl ipv6only=on; # managed by Certbot
       listen 443 ssl; # managed by Certbot
       ssl_certificate /etc/letsencrypt/live/domain.ca/fullchain.pem; # m$
       ssl_certificate_key /etc/letsencrypt/live/domain.ca/privkey.pem; #$
       include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
       ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

       server_name domain.ca;
       root /var/www/client;
       index index.html index.htm;
       try_files $uri $uri/ =404;

       location /admin {
           alias /app2; 
       }
}

server {
       server_name domain.ca;

       listen 80;
       listen [::]:80;

       if ($host = domain.ca) {
               return 301 https://$host$request_uri;
       }

       return 404;
}

---

查看进一步的文档：

问题实际上与conf文件无关。在vuejs子reddit中reddit帖子上的/u/bakugo的帮助下，问题得以解决。我不知道我是否可以链接到那个帖子，但这是他的回复

正如我所怀疑的，这个问题与第二个nginx无关 index.html正在加载/dist/build.js（这是第一个应用程序） of/admin/dist/build.js

将脚本URL更改为./dist/build.js --/巴库戈

下面是conf文件的一个工作示例，它为两个单独的单页应用程序提供服务，在同一台服务器上共享一个域。conf文件还设置为通过端口80将请求重定向到端口443，并使用SSL证书

server {
    listen [::]:443 ssl ipv6only=on;
    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    root /var/www/client;
    index index.html index.htm;

    server_name example.com www.example.com;

    if ($host = www.example.com) {
        return 301 https://example.com$request_uri;
    }

    location / {
        root /var/www/client/public/;
        try_files $uri $uri/ /index.html =404;
        rewrite ^/admin$ /admin/ redirect;
    }

    location /admin {
        alias /var/www/client/admin/;
        try_files $uri $uri/ /index.html =404;
    }

    location /api {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://localhost:3001;
        proxy_ssl_session_reuse off;
        proxy_set_header Host $http_host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
        }
}

server {
    listen 80;
    listen [::]:80;

    if ($host = example.com) {
        return 301 https://$host$request_uri;
    }
    if ($host = www.example.com) {
        return 301 https://example.com$request_uri;
    }

    return 404;
}

---

由于您使用的是vue，所以只需在

vue.config.js

中设置

publichPath

即可，请查看此处以获取详细信息

这是怎么回事？app2与/admin位于同一位置。这是否意味着我将执行类似“location/admin{alias/admin；}？更新了我的问题，以更好地反映我面临的问题以及我的目录结构和conf文件的当前状态。如果您有时间，您可以再看一看您的建议是否仍然有意义吗？我已经阅读了很多nginx，并且我正在使用/admin路由的别名，因此路由确实添加了两次/admin/admin，但仍然没有成功。