Deploy angular application on nginx server with Docker Welcome to nginx

Question

I developed an Angular 7 application and now I'm going to deploy it on production server on an nginx server. I'm pretty new to frontend deployment on nginx server, so probably I'm missing something easy to find. I decided to use Docker to manager the deployment.
The application name is MyWalletFe.

---

nginx server configuration file

Path: ./conf/default.conf

server {
    listen 80;

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

}

Dockerfile

# build
FROM node:alpine as builder
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

# deploy
FROM nginx
EXPOSE 80
COPY ./conf/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/dist/ /usr/share/nginx/html

Where I copy my nginx configuration file in the default location, then I copy the output of npm run build from previous stage in the /usr/share/nging/html.

Output

I always get the default nginx webpage:

And the reason why this happens is that the folder /app/dist contains a subfolder with the name of the app, MyWalletFe, which contains all the file of the Angular application (the image is taken after run locally npm run build to show the folder structure):

while on the production server in folder /usr/share/nginx/html there is still the default index.html with this page that is served.

root@3b7da83d2bca:/usr/share/nginx/html# ls -l
total 12
-rw-r--r-- 1 root root  494 Mar  3 14:32 50x.html
drwxr-xr-x 2 root root 4096 Apr 13 20:32 MyWalletFE
-rw-r--r-- 1 root root  612 Mar  3 14:32 index.html

I think that for this to work the content of MyWalletFe folder should be copied to the parent folder (/usr/share/nginx/html); in this case default.conf or Dockerfile contain some errors.
Is there something that is configured in a wrong way? In Resources section I've added the article which I followed.

Resources

Angular in Docker with Nginx

Byran

Answer 1

you can add the command to remove the default nginx index page just before copying

COPY ./conf/default.conf /etc/nginx/conf.d/default.conf
RUN rm -rf /usr/share/nginx/html/*  <--- add this
COPY --from=builder /app/dist/ /usr/share/nginx/html    

and change your nginx config to :

try_files $uri $uri/ /index.html =404;

Sochor

Thank you! So the problem was the default files in /usr/share/nginx/html/.. Why do I have to modify the nginx config in that way? – Byran

Answer 2

Change the last line of your docker file to:

COPY --from=builder /app/dist/ /var/www/html/

And for single-page applications like Angular, you should change your Nginx config to this:

try_files $uri $uri/ /index.html;

Sefton

Answer 3

Sometimes the cause can be the most stupid thing, having something like this in my angular.json:

  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/my-app",

that was causing my app was copied to /usr/share/nginx/html/my-app

I hope you don't waste several hours breaking your mind like me :||

Dneprodzerzhinsk

Answer 4

If you're working with Angular 17, there's been a small change in the position of the main folder: instead of being directly in the dist or even the folder specified for you, there's a new subfolder called browser. browser has become the main folder in which your index.html can be found after the build. A small change will therefore take place in the docker file :

You must add browser to path

# build
FROM node:alpine as builder
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

# deploy
FROM nginx
EXPOSE 80
COPY ./conf/default.conf /etc/nginx/conf.d/default.conf

# You must add browser to path

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

Holton