将 nginx 配置为 Angular 中的服务器资产文件答案

【问题标题】：Configuring nginx to server assets files in angular将 nginx 配置为 Angular 中的服务器资产文件
【发布时间】：2020-05-04 18:18:25
【问题描述】：

我正在从assets 文件夹中获取数据。在我的本地机器上，我可以使用这个 url 获取数据：

http://localhost:4200/assets/data.json

但是当我在 VM 中使用 docker 部署我的应用程序时，我收到了 HTTP 404 错误。

HTTP 请求：

http://192.168.xxx.xxx:22/assets/data.json

错误：

<html>
<head><title>404 Not Found</title></head>
<body>
<center><h1>404 Not Found</h1></center>
<hr><center>nginx/1.17.7</center>
</body>

这是我的 docker 文件

FROM node:alpine AS builder

WORKDIR /app
COPY . .
FROM nginx:alpine

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

我发现我还应该像this example 那样添加一个 nginx 配置文件

我想在我的情况下如何配置 nginx 以提供资产文件

【问题讨论】：

有吗？你可以docker run --rm yourimage ls /usr/share/index/html看看构建的容器文件系统。
其实没有配置文件。该应用程序运行但不是当我通过 Http 请求请求静态文件时

标签： angular docker nginx

【解决方案1】：

我找到了解决办法。

我的问题是我是/app/dist/proj/*中的*，在我的情况下，该命令复制同一目录级别中的所有文件html，而不是将文件保存在子目录assets中

我删除了*，效果很好

【讨论】：

【解决方案2】：

此配置对我有用：

Dockerfile

FROM node:alpine AS build-stage

WORKDIR /app

# to use cache on node_modules
COPY package*.json /app/
RUN npm install

COPY . /app/
RUN npm run build --prod

FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf

COPY --from=build-stage /app/dist/ /usr/share/nginx/html/

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

events {}

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

【讨论】：