How to deploy Angular app under container of nginx?

Question

I'm trying to deploy Angular app under docker Nginx. My config is next:

./Dockerfile

FROM node:12-alpine AS builder
ENV NODE_ENV production
WORKDIR /usr/src/app
COPY ["package.json", "yarn.lock", "./"]
RUN yarn install --production=false
COPY . .
RUN yarn build

FROM nginx:alpine
COPY --from=builder /usr/src/app/dist/angular-nginx/* /usr/share/nginx/html/
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

./nginx.conf

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

The app works, but its assets like images doesn't load (On development assets works).

And if I try to access directly to http://localhost:4000/assets/img/logo.png always go to http://localhost:4000/

What is my mistake?, thank you very much for the help.

could you provide the folder structure inside of dist/angular-nginx/ ? — Andrei
– Andrei, Commented Feb 19, 2020 at 21:48
The try_files line is confusing things: if a file is missing, even if it's supposed to be an image, it's serving up the contents of the index.html page successfully rather than sending a 404 error. — David Maze
– David Maze, Commented Feb 20, 2020 at 1:14

Andrei · Accepted Answer · 2020-02-19 22:05:57Z

1

the problem is probabably in this command

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

should be

COPY --from=builder /usr/src/app/dist/angular-nginx/ /usr/share/nginx/html/

with your variant you are copying just the first layer of the directory and just COPY dir/ should do the thing

answered Feb 19, 2020 at 22:05

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

How to deploy Angular app under container of nginx?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related