Hello folks, from past few months i was reading about the docker and deployment stuffs, so i thought it will be useful to share the steps which i usually follow.
Note: I presumed that u already know about the docker and how angular build takes place
If you didn't know much about docker you can go through link below
If you want to know more about angular you can go through link below
If you want to know more about nginx you can go through link below
Before start we need few things to be setup correctly
1) Nodejs
2) Angular CLI
3)Docker
So, Lets create simple angular application for this blog You can skip this step 1 if you have app with you
1) On Terminal run below command to create angular application
ng new angular-docker-blog
2) Create 2 file with name Dockerfile , .dockerignore and nginx.conf in project root folder
Dockerfile will consist of commands which needs to execute when we are building docker image
.dockerignore contains which file/folder we need to ignore while docker build takes place
Dockerfile
# STEP-1 BUILD
# Defining node image and giving alias as node-helper
# It's better to define version otherwise me might face issue in future build
FROM node:14-alpine3.15 as node-helper
#Accepting build-arg to create environment specific build
#it is useful when we have multiple environment (e.g: dev, tst, staging, prod)
#default value is development
ARG build_env=development
#Creating virtual directory inside docker image
WORKDIR /app
RUN npm cache clean --force
#Copying file from local machine to virtual docker image directory
COPY . .
#installing deps for project
RUN npm install
#creating angular build
RUN ./node_modules/@angular/cli/bin/ng build --configuration=$build_env
#STEP-2 RUN
#Defining nginx img
FROM nginx:1.20 as ngx
#copying compiled code from dist to nginx folder for serving
COPY --from=node-helper /app/dist/angular-docker-blog /usr/share/nginx/html
#copying nginx config from local to image
COPY /nginx.conf /etc/nginx/conf.d/default.conf
#exposing internal port
EXPOSE 80
.dockerignore
.git
.gitignore
/node_modules
nginx.conf
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;
}
}
3)Docker build command
for creating docker image open terminal and run command
For creating development build
docker build -t ad-blog:development .
For creating tst build
docker build -t ad-blog:tst --build-arg build_env=tst .
For creating production build
docker build -t ad-blog:production --build-arg build_env=production .
-t: Tag (if not specified, docker will take "latest" by default)
--build-arg : for passing build argument, in our case we are passing 'build_env' to tell angular which environment to pick while creating build.
4) for creating docker container
docker run -p 8080:80 -d ad-blog:tst
-p for defining port
Syntex:-> [host-port]:[docker-port]
80 port is exposed from container and we are mapping that with 8080
-d for running running container in Detach mode
the docker will keep the console running
Finally
If you followed steps correctly you will have docker container running on port 8080 and you will able to access you application on http://localhost:8080/
Extras
if you want to see running docker containers you can run this command
docker ps
for stoping docker container
docker stop CONTAINER_ID
CONTAINER_ID you will get from docker ps command
GITHUB Repo
If you want to see how i configured for different environment
consider checking angular.json, environment folder here Github
Top comments (0)