使用 Docker 在 nginx 服务器上部署 Angular 应用程序 欢迎使用 nginx

Question

我开发了一个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

npm run build我将 nginx 配置文件复制到默认位置，然后将前一阶段的输出复制到/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包含一些错误。
是否有什么配置错误的？在“资源”部分中，我添加了我所关注的文章。

资源

Docker 中的 Angular 与 Nginx

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