Docker Deployment Angular 5 Application to Heroku

Docker makes things a lot more easier. Docker is a containerization platform basically it runs your application bundled with required operating system file system, libraries and required dependencies to run your application.

We assume here, you have already developed your Angular application now you want to deploy it. We will now do it through docker.

Docker Deployment Angular 5 Application to Heroku

First All you need is a Dockerfile. Dockerfile is something like blueprint it contains what are all things needed to run your application. From the Dockerfile we create Docker Image, from the docker image we run container(basically we are running your application). We are gonna do it in a while.

Create a Dockerfile

Create a Dockerfile with the name Dockerfile. Name is case sensitive so write the first letter D in caps and rest of the letters in lowercase without any space.

FROM node:8.9.1-alpine as node

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

# Stage 2
FROM nginx:1.13.12-alpine

COPY --from=node /usr/src/app/dist /usr/share/nginx/html

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

CMD sed -i -e 's/$PORT/'"$PORT"'/g' /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'

What exactly is happening in above mentioned Dockerfile is that

In the 1st line we are pulling alpine version of linux image along with node from the Docker Hub.
In the 3rd line we are creating a working directory for our application.
In the 5th line we are copying all the package.json files including package-lock.json file to our current work directory.
In the 7th line we are installing all the required dependencies from the package.json file.
In the 9th line we are copying all the source code of our application.
In the 11th line we are building our application.

Its mutlistage Dockerfile.

In the second stage at the line number 14 we are pulling nginx web server for the alpine linux image from the Docker Hub.
All our built files will be in the dist folder so we need to move to the web server serving folder.(At the line number 16 we are doing it.)

At the line number 18 we are copying our nginx conf file to required location of web server conf file. (we will create nginx conf file in a while).

At the line number 20 we are finding dynamic port number to serve our application and writing it to the nginx conf file, using sed command line interface.

Create nginx conf file.

create nginx.conf file in the current project directory.

server {
  listen $PORT;

  location / {
    root   /usr/share/nginx/html;
    index  index.html;
  }
}

Now, all we are left to do is a create Docker Image from our Dockerfile.

Docker Deployment Angular 5 Application to Heroku

Building the Docker image from the Dockerfile.

Run the below command

 docker build -t angular .

we will build our docker image with the name angular(with the -t argument we will give a name to our image)

you can check all the docker images by running a command

 docker images

We will now run the docker container from our created image. We will test it locally whether our application running properly or not.

Running Docker Container from Docker Image

To run the docker container to we will run below command

docker run -p 80:80 --name angular-container -d angular

With -p argument we will map docker port to our local machine port.

After running the above command you can check your application in your browser by typing url localhost:80

Docker Deployment Angular 5 Application to Heroku

If everything is fine now we are ready to deploy our application to heroku.

Install Heroku

If you have not installed heroku CLI install heroku CLI by running

 npm install -g heroku

Create heroku account

By visiting to the https://signup.heroku.com/ you can create your heroku account.

Once you created your account you need to login

Heroku Login

By running below command you can login to Heroku

heroku container:login

Create heroku app

You need to create heroku app (to which we are going to do the deployment).

Run the command

 heroku create

which creates an application with a random name.

Push your application to heroku

Run the command

docker tag yourimagename registry.heroku.com/yourherokuappname/web

Above command will tag your docker image to heroku registry then

 docker push registry.heroku.com/yourherokuappname/web

Above command creates a docker image from the Dockerfile in the heroku container registry.

After it’s done all you need to do is release your application

Release your web app

By running below command you can release your web app.

 heroku container:release web --app=your created app name

Open your running application in the browser

 heroku open

this will automatically open your application in the browser.

I hope this was helpful!

Docker Deployment Angular 5 Application to Heroku

We will discuss the gitlab continuous integration of our Docker Heroku Deployment.

Happy Coding..!