如何在 nginx 容器下部署 Angular 应用程序？答案

【问题标题】：How to deploy Angular app under container of nginx?如何在 nginx 容器下部署 Angular 应用程序？
【发布时间】：2020-06-04 04:10:12
【问题描述】：

我正在尝试在 docker Nginx 下部署 Angular 应用程序。接下来是我的配置：

./Dockerfile

FROM node:12-alpine AS builder
ENV NODE_ENV production
WORKDIR /usr/src/app
COPY ["package.json", "yarn.lock", "./"]
RUN yarn install --production=false
COPY . .
RUN yarn build

FROM nginx:alpine
COPY --from=builder /usr/src/app/dist/angular-nginx/* /usr/share/nginx/html/
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

./nginx.conf

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
}

应用程序可以运行，但无法加载其图片等资产（在开发资产上有效）。

如果我尝试直接访问http://localhost:4000/assets/img/logo.png，请始终访问http://localhost:4000/

我的错误是什么？非常感谢您的帮助。

【问题讨论】：

你能提供dist/angular-nginx/里面的文件夹结构吗？
@Andrei 我添加了文件夹结构，请检查
try_files 行令人困惑：如果文件丢失，即使它应该是图像，它也会成功提供index.html 页面的内容，而不是发送 404 错误.

标签： angular docker nginx

【解决方案1】：

问题可能出在这个命令中

COPY --from=builder /usr/src/app/dist/angular-nginx/* /usr/share/nginx/html/

应该是

COPY --from=builder /usr/src/app/dist/angular-nginx/ /usr/share/nginx/html/

使用您的变体，您只是复制目录的第一层，而 COPY dir/ 应该做的事情

【讨论】：