Loading

How To Dockerize Angular Application With Nginx

How To Dockerize Angular Application With Nginx

In this article, We will learn how to dockerize angular application. So Lets Start

Prerequisite Need below application for dockerizing, an application. dockerizing is the process that deploys & run an application using containers.

  • NodeJS
  • npm or Yarn
  • Angular CLI
  • Code editor of your choice. (I favour Visual Studio Code.)
  • Docker

Create a new Angular application

ng new my-project
cd my-project

Try to run the application to everything is install & displaying properly in the browser

ng serve --open

By default, the angular application uses port 4200 so the browser will open the application in http://localhost:4200.

Create a Docker image

Let's create the docker image of the newly created angular application we will use the Nginx to serve the compiled application

Create a Dockerfile now open your angular application any vs code editor and create a "Dockerfile" file without any extension at the root folder.

Write the below code in Dockerfile & save it.

FROM nginx:stable-alpine
LABEL version="1.0"

COPY nginx.conf /etc/nginx/nginx.conf

WORKDIR /usr/share/nginx/html
COPY dist/my-project/ .

As you can see from the above code, we will copy the dist folder inside the image, together with the nginx.conf configuration file

Create a .dockerignore file

node_modules
.git
.gitignore

Create nginx.conf file

worker_processes 1;

events { worker_connections 1024; }

http {
    server {
        listen 80;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

Our simple configuration is ready now we only need a dist folder that contains the compiled application of the angular build version which can be the production version or the development version.

Angular Build

We will create the angular production version

ng build --prod

Build a Docker image

docker image build  -t my-project .

this process will take 2-3 mins to complete and after completion, it will show the success message with the docker image tag name.

How to see the docker images

docker image ls

this will display all the Docker images you have on your computer

Run the Docker image

docker run -p 3000:80 --rm my-project

When you now navigate to the http://localhost:3000, you will get the Angular application up and running there.

That's it. Thanks for reading the post, I hope this will help you to dockerize easily your Angular Application.

Related Articles