在Nginx上服务两个SPA应用程序

时间:2019-06-12 11:04:15

标签: angular nginx single-page-application nginx-config serve

我尝试通过本地的nginx服务两个角度应用程序

我具有以下文件夹结构:

/html/page1

/html/page2

每个文件夹中都包含每个应用程序的文件。

page1 内部:

3rdpartylicenses.txt
favicon.ico
index.html
main.14de877820428b623cf2.js
polyfills.f4b78b65941f8063fd57.js
runtime.06daa30a2963fa413676.js
styles.22f686fc418e8e8e0c6e.css

page2 内部:

3rdpartylicenses.txt
favicon.ico
index.html
main.275a9dc67ff328ee34fa.js
polyfills.4ea17e55c619d6f4aaad.js
runtime.b57bf819d5bdce77f1c7.js
styles.f7757684f1abbaee3fb9.css

这是我的 nginx.confg

worker_processes  1;

error_log  logs/error.log;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;


        location /page1{
            alias   html/page1;
            $uri $uri/ $uri/index.html /page1/index.html html/page1/index.html index.html
        }

        location /page2{
            alias   html/page2;
            $uri $uri/ $uri/index.html /page2/index.html html/page2/index.html index.html
        }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}
  

当我尝试访问http://localhost/page2/http://localhost/page2/时,我得到一个空白页

在控制台中,我看到错误:

  

获取http://localhost/styles.f7757684f1abbaee3fb9.css净值:: ERR_ABORTED 404(未找到)   GET http://localhost/runtime.b57bf819d5bdce77f1c7.js net :: ERR_ABORTED 404(未找到)   GET http://localhost/styles.f7757684f1abbaee3fb9.css net :: ERR_ABORTED 404(未找到)   GET http://localhost/runtime.b57bf819d5bdce77f1c7.js net :: ERR_ABORTED 404(未找到)

但是,如果我运行URL http://localhost/page1/runtime.b57bf819d5bdce77f1c7.js,我得到的文件没有任何问题。

我为try_files尝试了多种方法。我认为问题出在那一行。

/location文件夹运行良好,如果我放置静态索引文件,它们将正常运行。

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

nginx.conf 文件中需要以下配置:

location / { 
      root html; 
      try_files /page1$uri /page2$uri =404; 
}

location /page1{
      alias   html/page1;
      try_files $uri $uri/ $uri/index.html /page1/index.html;
}

location /page1{
      alias   html/page2;
      try_files $uri $uri/ $uri/index.html /page2/index.html;
 }

除了这些配置之外,我们还必须在nginx的html目录中创建名为page1和page1的文件夹。

在构建应用程序时,也可以通过以下方式将--base-href参数与将包含该参数的文件夹的名称一起应用:

ng build --prod --base-href / page1

ng build --prod --base-href / page2