4

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:

enter image description here

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

When I open the browser I get this:

enter image description here

Improve this question
2
  • Please update the question with your NGINX configuration. Commented Nov 23, 2020 at 12:09
  • How do you run your docker image? I'm assuming is with docker run -p 9000:80 <image> since it seems you are using the default ngnix config, and the default one is listening to 80. Also did you call localhost:9000/usr/share/nginx/html and localhost:9000/html in order to get that errors in the docker logs? Can you show us your routing module? Commented Nov 23, 2020 at 14:46

2 Answers 2

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.