Dockerize Angular 与路由和 nginx

Question

I am trying to Dockerize a simple Angular 9 application that has routing.

I have the following:

Dockerfile

FROM nginx:alpine
RUN rm -rf /usr/share/nginx/html/*
COPY /dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

I run:

docker build --pull --rm -f "Dockerfile" -t ng-nexct-approval-ui-image:latest "."
docker run --rm -d  -p 4200:80/tcp --name ng-nexct-approval-ui-container ng-nexct-approval-ui-image:latest

When I access:

http://localhost:4200/

I get the nginx page as expected.

If I access:

http://localhost:4200/nexct-approval-ui/index.html

I get access to the index.html file in the /dist directory.

Problem

How do I access the Angular components?

eg for:

http://localhost:4200/login

and

http://localhost:4200/approval-edit/1573515

I get a 404 .

Question

How do I configure docker so I can access the following Angular routing:

const routes: Routes = [
    { path:'login', component:LoginComponent, canActivate: [AuthGuard] },
    { path: 'approval-list', component: ApprovalListComponent, canActivate: [ApprovalListGuard] },
    { path: 'approval-edit/:tripId', component: ApprovalEditComponent, canActivate: [ApprovalEditGuard] }
];

UPDATE

I add the following to the Dockerfile :

COPY nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf

server {
    listen   80;

    root /usr/share/nginx/html;
    index index.html;

    server_name _;

    location / {
        try_files  $uri /index.html
    }

}

I can access the:

http://localhost:4200/nexct-approval-ui/index.html

(but this is just a blank html file generated in the /dist folder on ng build .

If I try access any of the routes, I now get a 500 .

2020/07/21 15:40:35 [error] 29#29: *24 rewrite or internal redirection cycle while internally redirecting to "/index.html", client: 172.17.0.1, server: _, request: "GET /nexct-approval-ui/login HTTP/1.1", host: "localhost:4200"

172.17.0.1 - - [21/Jul/2020:15:40:35 +0000] "GET /nexct-approval-ui/login HTTP/1.1" 500 579 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36" "-"

Surely it is pretty common to run an Angular app on a nginx server. I am struggling to find a clear answer anywhere.

Answer 1

This should make it return the index.html for any URL received, and therefore all the Angular router URIs should work even when going to the URL directly rather than being redirected from an internal section of the app.

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

Also, make sure you're not doing anything crazy with the base_href.

Last time I did this was in Angular4 so I might be outdated:)
Hope this works for you.

---

Edit to answer question in comment:
The nginx.conf above will expect to find the index.html file under /usr/share/nginx/html . Depending on how the ng build is performed, you need to copy the content of the folder that contains the index file to the root location. Sometimes this is created in a nested folder under dist.

Answer 2

The problem was in my Dockerfile, when I copied the /dist folder. So I changed from:

COPY /dist /usr/share/nginx/html

to

COPY /dist/nexct-approval-ui /usr/share/nginx/html

and now it works