Nginx 404 in angular app running in docker container

We have an angular app that runs in a docker container. The angular app routes to a /login page by default. This causes issues with nginx routing away from the index.html and showing a 404 page.

I tried changing the COPY line in the Dockerfile to

COPY --from=build /app/default.conf.template /etc/nginx/conf.d/default.conf

But this just caused the app to show a regular 404 page (not nginx one). This tells me that the config is not the issue.

My understanding of the line try_files $uri $uri/ /index.html is that nginx should route every path back to the index.html, which also happens but only after seeing the 404 page first and then manually deleting /login at the end.

When I run the app locally, everything works as intended.

Dockerfile:


WORKDIR /app

COPY package.json package.json
COPY package-lock.json package-lock.json
COPY .npmrc .npmrc

RUN npm clean-install

COPY . .

RUN npm run build

FROM nginxinc/nginx-unprivileged

COPY --from=build /app/default.conf.template /etc/nginx/templates/default.conf.template
COPY --from=build /app/dist/angular /usr/share/nginx/html

# Expose the default nginx port
EXPOSE 8080

ENV ENDPOINT_URL="http://localhost:5173"

CMD ["nginx", "-g", "daemon off;"]


default.conf.template:

server {
listen 8080;
server_name localhost;

# access_log /var/log/nginx/server.access.log main;

location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;

ssi on;
ssi_types text/html application/json;
set $ssiendpointurl "${ENDPOINT_URL}";
}
}

Continue reading...