【问题标题】：Deploy angular application on nginx server with Docker Welcome to nginx使用 Docker 在 nginx 服务器上部署 Angular 应用程序欢迎使用 nginx
【发布时间】：2020-07-26 13:25:54
【问题描述】：

我开发了一个 Angular 7 应用程序，现在我将把它部署在 nginx 服务器上的生产服务器上。我对 nginx 服务器上的前端部署很陌生，所以我可能遗漏了一些容易找到的东西。我决定使用 Docker 来管理部署。
应用名称为MyWalletFe。

nginx服务器配置文件

路径：./conf/default.conf

server {
    listen 80;

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

}

Dockerfile

# build
FROM node:alpine as builder
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

# deploy
FROM nginx
EXPOSE 80
COPY ./conf/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/dist/ /usr/share/nginx/html

我将我的 nginx 配置文件复制到默认位置，然后将 npm run build 的输出从上一阶段复制到 /usr/share/nging/html。

输出

我总是得到默认的 nginx 网页：

发生这种情况的原因是文件夹/app/dist 包含一个名为MyWalletFe 的应用程序名称的子文件夹，其中包含Angular 应用程序的所有文件（该图像是在本地运行后拍摄的npm run build 以显示文件夹结构）：

在生产服务器上的文件夹 /usr/share/nginx/html 中，仍然有默认的 index.html 提供此页面。

root@3b7da83d2bca:/usr/share/nginx/html# ls -l
total 12
-rw-r--r-- 1 root root  494 Mar  3 14:32 50x.html
drwxr-xr-x 2 root root 4096 Apr 13 20:32 MyWalletFE
-rw-r--r-- 1 root root  612 Mar  3 14:32 index.html

我认为为此，应将MyWalletFe 文件夹的内容复制到父文件夹（/usr/share/nginx/html）；在这种情况下，default.conf 或 Dockerfile 包含一些错误。
有没有以错误的方式配置的东西？在资源部分，我添加了我关注的文章。

资源

Angular in Docker with Nginx

【问题讨论】：

标签： angular docker nginx deployment production

【解决方案1】：

您可以在复制之前添加命令以删除默认的nginx索引页面

COPY ./conf/default.conf /etc/nginx/conf.d/default.conf
RUN rm -rf /usr/share/nginx/html/*  <--- add this
COPY --from=builder /app/dist/ /usr/share/nginx/html

并将您的 nginx 配置更改为：

try_files $uri $uri/ /index.html =404;

【讨论】：

谢谢！所以问题是/usr/share/nginx/html/..中的默认文件。为什么我必须以这种方式修改nginx配置？

【解决方案2】：

将 docker 文件的最后一行更改为：

COPY --from=builder /app/dist/ /var/www/html/

对于像 Angular 这样的单页应用程序，您应该将 Nginx 配置更改为：

try_files $uri $uri/ /index.html;

【讨论】：