So recently, I have been digging into DevOps and Cloud Technologies and came across this service called Google Cloud Run which lets you host your application, but the only thing that bugged me was it required a docker image, and at this point, I had no idea what docker, containers, images or any of this words meant. 😕
So like any sane person with no social life on weekends 🤪 I started learning about Docker and at first, it did seem a little challenging but eventually, I think the process is quite easy and interesting.
So, if you have no idea about Docker and containers, I have put some links at the bottom which were super useful to me.
But here's a summary of Docker 🐳
Docker is a container runtime. That's it 🤯. It allows us to run containerized applications.
So what are containers? 📦
Containers are lightweight, portable and isolated processes running on your system using the same OS kernel and user space but each with its own set of specific dependencies that do not conflict with each other.
And Images? 🙄
A Docker image is a file used to execute code in a container. It contains application code, libraries, tools, dependencies and other files needed to run the application.
So without wasting any more time, let's get started with the main topic
Dockerizing an Angular application
Now obviously there are certain things you need to have installed in your system
- Docker (Download link)
- NodeJS (Download link)
- Angular CLI (Download link)
- Visual studio code (Optional) (Download link)
Step 1: Creating an Angular Application
This one is pretty basic, we aren't going to build anything fancy here, just the pre-built template will work for this tutorial.
To create your angular application, just open the terminal in the folder where you want to create your app, and write the following command.
ng new my-docker-angular-app
Now once this is done you should have an angular app generated, open it in VS code
Step 2: Creating Dockerfile and .dockerignore
Dockerfile
In the main folder of your application, create a new file and name it "Dockerfile". In the file, write the following commands
### STAGE 1:BUILD ###
# Defining a node image to be used as giving it an alias of "build"
# Which version of Node image to use depends on project dependencies
# This is needed to build and compile our code
# while generating the docker image
FROM node:12.14-alpine AS build
# Create a Virtual directory inside the docker image
WORKDIR /dist/src/app
# Copy files to virtual directory
# COPY package.json package-lock.json ./
# Run command in Virtual directory
RUN npm cache clean --force
# Copy files from local machine to virtual directory in docker image
COPY . .
RUN npm install
RUN npm run build --prod
### STAGE 2:RUN ###
# Defining nginx image to be used
FROM nginx:latest AS ngi
# Copying compiled code and nginx config to different folder
# NOTE: This path may change according to your project's output folder
COPY --from=build /dist/src/app/dist/my-docker-angular-app /usr/share/nginx/html
COPY /nginx.conf /etc/nginx/conf.d/default.conf
# Exposing a port, here it means that inside the container
# the app will be using Port 80 while running
EXPOSE 80
DockerIgnore
If you have worked with git and know .gitignore, .dockerignore does the same thing, it specifies the files that we want to ignore while creating our docker image
Normally it may contain node_modules, test files, etc...
To create dockerignore, just create a file and name ".dockerignore"
For our application, just write the following inside the file
.git
.editorconfig
/.vscode/*
/node_modules
/e2e
/docs
.gitignore
*.zip
Step 3: Create nginx.conf
We'll be using Nginx to host the angular build inside the container. So for this, we need to create a configuration file for nginx.
Create a file inside main folder and name it "nginx.conf".
NOTE: We're telling nginx to listen to port 80 here as that is the port we had exposed in Dockerfile (refer). This needs to be same as what we defined in there
server {
listen 80;
sendfile on;
default_type application/octet-stream;
gzip on;
gzip_http_version 1.1;
gzip_disable "MSIE [1-6]\.";
gzip_min_length 256;
gzip_vary on;
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;
gzip_comp_level 9;
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html =404;
}
}
Step 4: Creating a docker image
To create a docker image, open a terminal in your project folder and write the following command
docker build -t ng-docker-app:v1.0.0 -f ./Dockerfile .
-t: Tag (if not specified, docker will take "latest" by default)
-f: File (Write the path to your Dockerfile)
After this, we should have a docker image created in your system. To get the list of docker images in your system, write the following in the terminal
docker image ls
Step 5: Create a docker container
To create and host your docker container, write the following command
docker run -p 8000:80 -d ng-docker-app:v1.0.0
-p: Port
Here you'll need to define a port on which the container will be hosted and the port on which app is hosted inside the container
Syntex: <host-port>:<docker-port>
-d: Detach
If this is not specified, the docker will keep the console running
NOTE: We had exposed port 80 in Dockerfile and assigned nginx to listen to port 80, so <docker-port> has to be the same here as well
To get the list of currently running containers in your system, you can get this by typing
docker container ls
Finally
Voila!!🎉 If you have followed each step, you should have your docker container running on Port 8000 and your application running on localhost:8000 😎
Referances
How to install docker on windows 10?
How to install docker on Mac OS?
How to install docker on Ubuntu
Freecodecamp - What is docker used for?
Freecodecamp - Docker handbook
IBM - What is docker?
Oldest comments (9)
This post made my day!!! I was stuck for days figuring out how to use docker and angular together, and this is one stop solution!🔥🔥
👍
Nice 🤩
Thanks 😀
What's about projecting environment app configuration from env variables?
Thank you so much for the excellent post!
Hey bro!! This seems to work for me. But I dont really know whats going on in the nginx.conf file. Can you please explain what have you configured. I don't really have idea about configuring own nginx file. Basically I am noob at this.
Thank you
IT is not working. It keeps restarting and the container log shows
\"server\" directive is not allowed here
Absolutely nailed it with this guide! Got everything up and running on my K8s cluster without a hitch. Can't thank you enough! 😄👏