Dockerizing Angular應用程序后路由不起作用

Question

是Angular和Docker的新手。 我開發了一個Angular 7應用程序並試圖將它停靠。 我確實看到了很多教程，並且能夠構建Docker鏡像。 下面是我的Dockerfile

FROM nginx:1.13.3-alpine
## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*
COPY ./ /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

然后我使用命令運行docker容器

docker run -d --name containerName -p 8082:80 imagename

我的容器確實啟動了，在瀏覽器中查看http：// IP-address：8082 /我可以看到我的應用程序的索引html。 除了我的應用程序的其他網址，如登錄頁面（ http：// IP地址：8082 /登錄 ）或儀表板（ http：// IP地址：8082 /儀表板 ）工作。 我看到404頁面未找到問題。 還有什么可以確保路由在我的dockerized容器中工作？

下面是我的default.conf文件

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

我的docker版本是Docker版本17.03.2-ce。 任何幫助贊賞

Answer 1

發生這種情況是因為基本nginx映像將嘗試提供來自docroot的請求，因此當您向/login發送請求時，它將嘗試查找login.html 。

為了避免這種情況， 無論請求是什么 ，都需要nginx來提供index.html ，從而讓angular處理路由。

為此，您需要更改當前在圖像中的nginx.conf ，以包含以下內容：

try_files $uri $uri/ /index.html;

而不是默認值：

try_files $uri $uri/ =404;

您可以通過多種方式實現這一目標，但我想最好的方法是在Dockerfile一個額外的命令，通過nginx配置進行復制，如下所示：

COPY nginx/default.conf /etc/nginx/conf.d/default.conf

並將目錄中的nginx/default.conf文件（包含默認的nginx配置）替換為上面指定的命令。

編輯

已經存在完全相同的圖像，因此您可以使用除官方圖像之外的圖像，這是專門為此而制作的圖像，它應該可以正常工作： 示例