search

nheidloff / web-apps-kubernetes

Deployments of Angular, React and Vue Applications on Kubernetes
Apache License 2.0
28 stars 10 forks source link

GKE K8s deployment #2

Open sakibulhasan opened 5 years ago

sakibulhasan commented 5 years ago

Great tutorial. Can you do it for Google Cloud K8s deployment? Thanks.

tomney commented 5 years ago

@sakibulhasan I wanted to get the angular project working on GKE lately too! You can do it with some slight revisions to the ReadMe:

After you've run the Angular app locally per @nheidloff 's instructions, you will need to get set up with Google Cloud.

To start you will need a Google Cloud project. You can create one by navigating here, clicking "Try free" and following the prompts.

If you have not already been prompted to do so you will need to download and install the Google Cloud SDK.

We can now set up a Google Kubernetes Cluster:

$ gcloud container clusters create angular-app \
    --scopes "cloud-platform" \
    --machine-type=g1-small \
    --num-nodes 1 \
    --enable-basic-auth \
    --issue-client-certificate \
    --enable-ip-alias \
    --zone northamerica-northeast1-b

We can build the docker container and identify it with a tag that will be suitable for Google Cloud Container Registry. Navigate to the angular-app directory and build the container:

$ cd web-apps-kubernetes/angular-app
$ docker build -t gcr.io/$PROJECT_ID/angular-app .

where $PROJECT_ID is the name of the Google Cloud project you wish to deploy through.

Once the container is successfully built, we can push it to the Container Registry via:

$ gcloud docker -- push gcr.io/$PROJECT_ID/angular-app

To allow external traffic through our NodePort* we will have to configure firewall rules for specific ports. If we don't specify nodePort for each of the ports we are configuring in kube-angular.yaml, gcloud will randomly assign them upon deployment, and we will have to set new firewall rules each time we deploy. We can avoid this by specifying nodePort for each port in kube-angular.yaml like so:

spec:
  type: NodePort
  ports:
  - port: 80
    nodePort: 30080
    targetPort: 80
    protocol: TCP
    name: http
  - port: 443
    nodePort: 30443
    protocol: TCP
    name: https
  selector:
    run: angular-app

After changing these two lines in kube-angular.yaml use kubectl to deploy resources to the cluster for the frontend:

$ kubectl apply -f kube-angular.yaml

You can now set the firewall rules to allow you to access ports 30080 and 30443 via tcp.

$ gcloud compute firewall-rules create myservice --allow tcp:30080,tcp:30443

To view the app you will need to know the external IP of the node your pod(s) is/are running on. You can see this by running:

$ kubectl get nodes --output wide

Get the external IP of the node associated with your deployment and navigate to:

http://$EXTERNAL_IP:30080

then try

https://$EXTERNAL_IP:30443

*Firewall rules really only need to be configured this way if we are set on using a NodePort. It may be easier to use a LoadBalancer if it is appropriate. A good discussion of the differences between the two can be found here.