Prerequisites:
Nodejs Installed.
Docker Installed.
Kubernetes Installed.
Step 1: Create an angular application
Install angular CLI using below command
npm install -g @angular/cli
Below command helps you to create an Angular application.
ng new hello-world
Alternatively you can clone from my repository link
Now go inside the hello-world directory and run the local server using below command.
ng serve
By default application runs on port number 4200.You can test in your browser using this link
Step 2: Build the application in production environment
Run the below command which creates the dist folder in your root directory.
ng build --prod
Step 3: Create a DockerFile
We need to copy the files from dist folder to nginx path.
FROM nginx:alpine
COPY ./dist/hello-world ./usr/share/nginx/html
Step 4: Build the DockerFile
Navigate to the directory where you created the Dockerfile and enter the below command.
docker build -t angular/hello-world:v1 .
Once the build process is completed, You can check the docker images with below command.
docker ps -a
Step 5: Create a kubernetes Deployment Pod
You can get deployment file from my github repository link
kubectl apply -f deployment.yaml
Explanation for above YAML in short:
- Sample template for Deployment file can be found in official site
- apiVersion defines the version of kubernetes.
- kind indicates the type if it is a Deployment, Service, Job etc.
- metadata is the deployment name.
- Under spec.template.spec.containers, we need to mention the name of the docker image. In this example, we haven't pushed Docker image to its registry. So we need to mention imagePullPolicy: Never. If it is not mentioned, kubernetes tries to pull the image from the docker registry.
- containerPort tells in which port our deployment needs to run.
Step 6: Create a Service
You can get service file from my github repository link
Enter the below command to create a service pod.
kubectl apply -f service.yaml
Service pod helps in connecting to the application based on the deployment name mentioned under spec.selector.app
Verify the deployments
kubectl get all
Step 7: Final Step - Port Forwarding
This helps in forwarding our requests to our application
kubectl port-forward <service-name> <expose port no>:<service port num>
Now go to your browser and check by hitting (http://localhost:80). You should able to access your web application.
Top comments (2)
Don't we need to make changes for nginx.conf file?
Not necessary, unless you want to specify any configuration.