docker容器中的Angular应用程序会使nginx代理感到遗憾

时间:2018-03-16 08:58:47

标签: angular docker nginx proxy

你有一点angular5申请。使用ng serve在本地运行它可以正常工作。

现在,在执行ng build --prod之后,我正试图将dist files投入生产。

如果我将dist文件夹的内容放在apache服务器的根文件夹中,它也可以正常工作。

但我正在使用docker。所以我有一个nginx containter充当proxy

在我的default.conf我有类似的东西

set $portainer_upstream portainer:9000;

location /portainer/ {
    rewrite ^/portainer/(.*) /$1 break;
    proxy_http_version 1.1;
    proxy_set_header Connection "";
    proxy_pass http://$portainer_upstream;
}

它适用于多个应用程序,如portainer,phpmyadmin,...

所以我尝试了

set $dmr_upstream angular-dmr;

location /dmr/ {
    rewrite ^/dmr/(.*) /$1 break;
    proxy_http_version 1.1;
    proxy_set_header Connection "";
    proxy_pass http://$dmr_upstream;
}

但它没有完全奏效。如果我转到myhost.be/dmr/,我的浏览器会显示空白页面。应用程序名称很好地显示在选项卡中,但仅此而已。我的所有资源都有404错误。

Échec du chargement pour l’élément <script> dont la source est « http://myhost.be/inline.318b50c57b4eba3d437b.bundle.js ».
Échec du chargement pour l’élément <script> dont la source est « http://myhost.be/polyfills.bf95165a1d5098766b92.bundle.js ».
Échec du chargement pour l’élément <script> dont la source est « http://myhost.be/main.dc3c390914b6d1b8c64c.bundle.js ».

我该怎么办?我不明白为什么页面试图从http://myhost.be/ ...

加载资源
  

解决方案

构建dist应用程序后,index.html包含

<base href="/">

它解释了为什么资源是从http://myhost.be/ ...

加载的

解决方案是使用ng build --target=production --base-href /dmr/进行构建。现在index.html包含

<base href="/dmr/">

它正在发挥作用。

但这意味着如果我想将/dmr/更改为/newlocation/,我将不得不在我的代理中进行更改(确定,这是正常的),还要使用新路径重建应用程序并重新部署到容器。我不知道是否还有其他办法。

0 个答案:

没有答案