Here is a step-by-step tutorial on how to dockerize an Angular application:
Step 1: Install Docker
Make sure you have Docker installed on your machine. You can download and install Docker from the official website (https://www.docker.com/products/docker-desktop).
Step 2: Create a Dockerfile
Create a file named "Dockerfile" in the root directory of your Angular application. This file will contain the instructions for building the Docker image.
Step 3: Specify the base image
In the Dockerfile, start by specifying the base image you want to use. For example, you can use the official Node.js image as the base image:
“`
FROM node:14-alpine
“`
Step 4: Set the working directory
Set the working directory inside the Docker image where your Angular application code will be copied. For example:
“`
WORKDIR /app
“`
Step 5: Copy the package.json and package-lock.json files
Copy the package.json and package-lock.json files from your local machine to the Docker image. This will allow Docker to install the necessary dependencies for your Angular application. For example:
“`
COPY package*.json ./
“`
Step 6: Install dependencies
Run the npm install command inside the Docker image to install the dependencies. For example:
“`
RUN npm install
“`
Step 7: Copy the application code
Copy the entire Angular application code from your local machine to the Docker image. For example:
“`
COPY . .
“`
Step 8: Build the application
Build the Angular application inside the Docker image. Use the ng build command to build the application. For example:
“`
RUN ng build –prod
“`
Step 9: Expose the application port
Specify the port on which the Angular application will run inside the Docker container. For example:
“`
EXPOSE 80
“`
Step 10: Start the application
Specify the command to start the Angular application inside the Docker container. For example:
“`
CMD ["npm", "start"]
“`
Step 11: Build the Docker image
Open a terminal or command prompt, navigate to the root directory of your Angular application where the Dockerfile is located, and run the following command to build the Docker image:
“`
docker build -t angular-app .
“`
Step 12: Run the Docker container
After the Docker image is built, you can run a Docker container based on that image. Run the following command to start the Docker container:
“`
docker run -p 8080:80 angular-app
“`
Step 13: Access the application
Open a web browser and navigate to http://localhost:8080 to access your Angular application running inside the Docker container.
That’s it! You have successfully dockerized your Angular application.