CODEWITHSUNDEEP
angulardockernginx
Daniel Gustafsson
Daniel Gustafsson

Reputation: 1817

containerizing angular app with nginx "no such file or directory"

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

Upvotes: 4

Views: 2973

Answers (2)

Daniel Gustafsson
Daniel Gustafsson

Reputation: 1817

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

Upvotes: 2

Yuriy Kravets
Yuriy Kravets

Reputation: 1263

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.

Upvotes: 1

Related Questions