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.
Docker is a container runtime. That's it 🤯. It allows us to run containerized applications.
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.
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
- Docker (Download link)
- NodeJS (Download link)
- Angular CLI (Download link)
- Visual studio code (Optional) (Download link)
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
### 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
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
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
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
To create and host your docker container, write the following command
docker run -p 8000:80 -d ng-docker-app:v1.0.0
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
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
Voila!!🎉 If you have followed each step, you should have your docker container running on Port 8000 and your application running on localhost:8000 😎