使用Nginx将Angular应用程序容器化时出现“没有此文件或目录”错误。

Question

我是一名有用的助手，可以为您进行翻译。以下是您需要翻译的内容：

我正在尝试使用Google Cloud Run在Docker容器中部署我的Angular应用程序。

我的Dockerfile如下：

# stage 1

FROM node:alpine AS my-app-build
WORKDIR /app
COPY . .
RUN npm ci && npm run build

# stage 2

FROM nginx:alpine
COPY --from=my-app-build /app/dist /usr/share/nginx/html
EXPOSE 8080

看起来我尝试了一百万种不同的Dockerfile方法，但我认为这个是让我取得最大进展的一个。 以下是Docker日志:

/docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration

/docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/

/docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh

10-listen-on-ipv6-by-default.sh: Getting the checksum of /etc/nginx/conf.d/default.conf

10-listen-on-ipv6-by-default.sh: Enabled listen on IPv6 in /etc/nginx/conf.d/default.conf

/docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh

/docker-entrypoint.sh: Configuration complete; ready for start up

2020/11/20 20:23:49 [error] 29#29: *3 open() "/usr/share/nginx/html/usr/share/nginx/html" failed (2: No such file or directory), client: 172.17.0.1, server: localhost, request: "GET /usr/share/nginx/html HTTP/1.1", host: "localhost:9000"

172.17.0.1 - - [20/Nov/2020:20:23:49 +0000] "GET /usr/share/nginx/html HTTP/1.1" 404 555 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36" "-"

2020/11/20 20:23:54 [error] 29#29: *5 open() "/usr/share/nginx/html/html" failed (2: No such file or directory), client: 172.17.0.1, server: localhost, request: "GET /html HTTP/1.1", host: "localhost:9000"

172.17.0.1 - - [20/Nov/2020:20:23:54 +0000] "GET /html HTTP/1.1" 404 555 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36" "-"

这是我的文件结构：

请帮忙！我快被这个容器的问题折磨得秃头了....

当我打开浏览器时，会看到这个：

- Daniel Gustafsson

---

请更新问题并附上您的NGINX配置。 - anemyte

你如何运行你的 Docker 镜像？我猜测是通过 docker run -p 9000:80 <image>，因为它似乎使用默认的 Nginx 配置文件，默认情况下 Nginx 监听的端口是 80。此外，你是否调用 localhost:9000/usr/share/nginx/html 和 localhost:9000/html 来获得 Docker 日志中的错误信息？能否展示一下你的路由模块？ - Andrei Stoicescu

Answer 1

使用这个dockerfile，我成功地实现了我的目标:

# Stage 0, "build-stage", based on Node.js, to build and compile the frontend
FROM tiangolo/node-frontend:10 as build-stage
WORKDIR /app
COPY package*.json /app/
RUN npm install
COPY ./ /app/
ARG configuration=production
RUN npm run build -- --output-path=./dist/out --configuration $configuration
# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
FROM nginx:1.15
COPY --from=build-stage /app/dist/out/ /usr/share/nginx/html
# Copy the default nginx.conf provided by tiangolo/node-frontend
COPY --from=build-stage /nginx.conf /etc/nginx/conf.d/default.conf

并将谷歌运行容器端口设置为80

- Daniel Gustafsson

Answer 2

你需要将 dist 文件夹（其中包含 index.html）复制到 nginx 中的特定文件夹中，以便正确提供服务。通过查看您的项目结构，我假设您的索引 HTML 在 lumchtime 目录中。因此，您可以更改要复制的内容。

...
COPY dist/lumchtime /usr/share/nginx/html/
...

或者在浏览器中访问以下网址：http://localhost:8080/lunchtime

P.S. 你在 lumchtime 中打错了一个字母，我猜应该是 lunchtime。

- Yuriy Kravets