使用 nginx 容器化 Angular 应用程序“没有这样的文件或目录”

Question

Im trying to deploy my angular app using google cloud run in an docker container.

My dockerfile looks like this:

# 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

And it seems that i have tried one milion different approaches to the dockerfile but i think this one is the one that have gotten me furthest. Here is the docker logs:

/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" "-"

Here is my file-structure:

Please help with this! I'm about to run bald with this container thing....

When I open the browser I get this:

Answer 1

I managed to do what i wanted using this 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

and set google run container port to 80

Answer 2

You need to copy your dist folder (the one with index.html inside) to a specific folder in nginx, so it's served properly. By looking at your project structure, I assume, that your index html is inside lumchtime directory. So you either change what you copy

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

or access browser at: http://localhost:8080/lumchtime

PS you have a typo in lumchtime , I guess it should be lunchtime instead.