使用 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;
    }

}

Docker文件

# 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 配置文件，然后我在 /usr/share/nging/html.

中复制前一阶段 npm run build 的输出

输出

我总是得到默认的 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

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;

Answer 2

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

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

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

try_files $uri $uri/ /index.html;

Answer 3

有时候原因可能是最愚蠢的事情，在我的angular.json中有这样的东西：

  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/my-app",

导致我的应用被复制到 /usr/share/nginx/html/my-app

我希望你不要像我一样浪费几个小时来打破你的想法:||

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

Deploy angular application on nginx server with Docker Welcome to nginx

deployment

production

nginx

docker

angular

nginx 服务器配置文件

Docker文件

输出

资源