无法使用Nginx在一个服务器上同时运行两个单页应用程序 [英] Can't get two single page applications to run together on one server using nginx

问题描述

更新:我已经编辑了这篇文章，以使您对问题有更清晰的了解.此更新已覆盖以前的帖子.

UPDATE: I have edited this post to provide a clearer understanding of the issue. The previous post has been overwritten by this update.

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

We have two single page applications that need to be accessible through the same domain and ports but at different locations.

Application1 是面向公众的应用程序，应在访问 https://example.com时加载.

Application1 is a public user facing application that should be loaded when visiting https://example.com.

Application2 是面向公共管理员的应用程序，需要进行身份验证，如果访问

Application2 is a public admin facing application that will require authentication and should be loaded instead of application1 if they visit https://example.com/admin.

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

Currently I have no problem loading the first application, however, I have tried all sorts of combinations with my nginx conf file to get the second application to load when visiting https://example.com/admin without success.

它总是代替加载application1应用.

It is always loading the application1 app instead.

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文件.我尝试了各种组合，但这是我尝试使其保持非常简单的方式.

This is the example.com.conf file. I have tried all sorts of combinations but this is me trying to keep it very simple.

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;
     }
}

我已经花了好几天了，无法相信这么简单的事情已经拖了我这么久了.

I have spent days on this, can't believe something that should be so simple has been holding me up this long.

推荐答案

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

The issue actually had nothing to do with the conf file. It was solved with the help of /u/bakugo on a reddit post in the vuejs subreddit. I don't know if I am allowed to link to that post but here was his reply.

就像我怀疑的那样，问题与nginx无关，第二个 index.html正在加载/dist/build.js(这是第一个应用程序) /admin/dist/build.js

Like I suspected, the problem has nothing to do with nginx, the second index.html is loading /dist/build.js (which is the first app) instead of /admin/dist/build.js

将脚本URL更改为./dist/build.js -/u/bakugo

Change the script URL to ./dist/build.js --/u/bakugo

这是我们的conf文件的一个有效示例，该文件服务于两个单独的单页应用程序，它们在同一服务器上共享一个域. conf文件也已设置为使用SSL证书通过端口80将请求重定向到端口443.

Here is a working example of our conf file which is serving two separate single page applications, sharing one domain on the same server. The conf file is also setup to redirect requests over port 80 to port 443, and using SSL cert.

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;
}

这篇关于无法使用Nginx在一个服务器上同时运行两个单页应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！