Getting some issues while dockerizing an angular application by fetching the code from github

Solution 1:

Assuming that you have Docker and Kubernetes solutions setup and ready.

First, as mentioned by the others, the best option is just to use Dockerfile from the repo instead of writing your own:

### STAGE 1: Build ###
FROM node:12.7-alpine AS build
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

### STAGE 2: Run ###
FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /usr/src/app/dist/aston-villa-app /usr/share/nginx/html

Please clone the repo:

git clone https://github.com/wkrzywiec/aston-villa-app.git
cd aston-villa-app

Create your Docker repository - steps are presented here - in this example I will create a public repository named testing-aston-villa-app.

docker login
...
Login Succeeded

Build and push Docker image to your repo - commands are like this:

docker build -t <your_username>/my-private-repo .
docker push <your_username>/my-private-repo

In our example (make sure that you are in the directory where repo is cloned):

docker build -t {your-username}/testing-aston-villa-app .
docker push {your-username}/testing-aston-villa-app

Ok, image is now on your Docker repository. Time to use it in Kubernetes. Please do below instructions on the host where you have kubectl installed and configured to interact with your cluster.

Following yaml file has definitions for deployment and for service. In image field please use <your_username>/my-private-repo name:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: aston-villa-app-deployment
spec:
  selector:
    matchLabels:
      app: aston-villa-app
  replicas: 2
  template:
    metadata:
      labels:
        app: aston-villa-app
    spec:
      containers:
      - name: aston-villa-app
        image: {your-username}/testing-aston-villa-app
        ports:
        - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: aston-villa-app-service
spec:
  selector:
    app: aston-villa-app
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80

Please save this yaml and run kubectl apply -f {file.yaml}.

After applied, check if pods are up and service exits:

kubectl get pods,svc
NAME                                                  READY   STATUS      RESTARTS        AGE
pod/aston-villa-app-deployment-5f5478b66d-592nd       1/1     Running     0               13m
pod/aston-villa-app-deployment-5f5478b66d-vvhq2       1/1     Running     0               13m

NAME                              TYPE        CLUSTER-IP       EXTERNAL-IP   PORT(S)     AGE
service/aston-villa-app-service   ClusterIP   10.101.176.184   <none>        80/TCP      13m

Now, let's check if service is working by making request to it from another pod:

kubectl run -i --tty busybox --image=busybox -- sh
If you don't see a command prompt, try pressing enter.
/ # wget 10.101.176.184
Connecting to 10.101.176.184 (10.101.176.184:80)
saving to 'index.html'
index.html           100% |*****************************************************************************|   596  0:00:00 ETA
'index.html' saved
/ # cat index.html 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AstonVillaApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/images/as_logo.svg">
</head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>

Note that I used IP address 10.101.176.184 because it's the IP address of the service/aston-villa-app-service. In your case, it will be probably different.

Getting some issues while dockerizing an angular application by fetching the code from github

Solution 1:

Related

Recent Posts