Dockerizing custorm base-href Angular App With Nginx

Image Source : https://typeofnan.dev/static/b156f99067cdcf76f3f9bc85dfc21224/8ad1b/cover.png

On the occasion of distinctive requirements, you need to deploy the Angular app with a custom base-href on the container by Nginx. The problem is that the simple command — base-href wouldn’t be enough. More on Nginx configuration is required, and here is one of the easy ways to try.

first, build the application with desire path by — base-href

npm run build — — prod — base-href=/my/custom/path/

(or)

ng build — prod — base-href=/my/custom/path/

These two commands are just the same, use the appropriate one for your occasion. After that, in dockerfile, I use “nginx:stable-alpine” as the based image and expose port 80 and copy App files along with the custom path after the prefix “/usr/share/nginx/html/”, that is the directory of Nginx root directory. Furthermore, we also copy nginx.conf file that will gonna talk.

FROM nginx:stable-alpine
EXPOSE 80
COPY dist/* /usr/share/nginx/html/my/custom/path/
COPY nginx.conf /etc/nginx/nginx.conf

As you see, we need to create “nginx.conf”, which will contain configuration for Nginx Server. That would look like this

events{}

http {

    include /etc/nginx/mime.types;

    server {
        listen 8021;
        server_name localhost;
        root /usr/share/nginx/html;
        location /my/custom/path/ {
            try_files $uri $uri/ /my/custom/path/index.html;
        }
    }
}

In this config, we only need to see is the location and tail of try_files. In location define your path /my/custom/path/ and in the behind of try_files, provide your path along with /index.html;

Here we go, app is ready to build the docker and run the images.