CODEWITHSUNDEEP
angulardockerkubernetesdockerfilecontainers
XANDER_015
XANDER_015

Reputation: 85

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

This is the image of the steps that needs to be done using a dockerfile and a kubernetes file.

This is the Dockerfile that I have written to perform the tasks but it's not running properly and I am not able to figure out the error.

I will be very thankful if anybody can help me out with this dockerfile and kubernetes conf file to perform the following tasks. I wanted to create a Dockerfile which can fetch the source code of an angular app from github and build it and also push it to the docker hub. I have tried with the Dockerfile below but there are issues with the file. If anyone can guide me to the mistakes I have done or can provide a suitable Docker file then it will be great. Also If possible I also want to ask for the kubernetes conf file which can pull the image from the dockerhub and run it as a service. Thank You.

Upvotes: 1

Views: 830

Answers (2)

Mikolaj S.
Mikolaj S.

Reputation: 3224

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.

Login to the Docker registry on your host:

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.

Upvotes: 1

Hans Kilian
Hans Kilian

Reputation: 25479

There already is a working Dockerfile in the repo that you can use. You can just clone the repo and build it.

If you can't do that and want to clone the repo from inside the Dockerfile, you can modify it like this

### STAGE 1: Build ###
FROM node:12.7-alpine AS build
RUN apk update && apk add git
RUN git clone https://github.com/wkrzywiec/aston-villa-app.git
WORKDIR /aston-villa-app
RUN npm install
RUN npm run build --prod

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

Build and run with

docker build -t aston .
docker run -d -p 5000:80 aston

Then go to http://localhost:5000/ in a browser.

As for getting it to run on AWS/Kubernetes, I suggest making a new question for that. You should only have one question in a Stackoverflow post.

Upvotes: 0

Related Questions