Building an Angular5 Docker App and deploying it using TeamCity, Kubernetes inside Google Cloud

How to use TeamCity to manage your GCE Continuous Integration ?

Intro

This post is the first in a series called Continuous Integration on Google Cloud.

Kubernetes Configuration

The Nginx web deployment

We choose to describe our web container using the Kubernetes Deployment Container. A Deployment controller provides declarative updates for Pods and ease of scale.

In our case, we define only one replica that uses our previous gcr.io/<YOUR-PROJECT-ID>/web-pod docker image. Do not hesitate to increase the replica’s number if you need to handle a heavy load.

apiVersion: apps/v1beta1
kind: Deployment
metadata:
name: web-pod
spec:
replicas: 1
selector:
matchLabels:
app: web-pod
template:
metadata:
name: web-pod
labels:
app: web-pod
spec:
containers:
- name: web-pod
image: gcr.io/<YOUR-PROJECT-ID>/web-pod:latest

The Nginx web service

Now that we have our deployment, we need to expose it as service on port 80.

kind: Service
apiVersion: v1
metadata:
name: web-service
spec:
type: LoadBalancer
selector:
app: web-pod
ports:
- protocol: TCP
port: 80

CI using TeamCity Build Configuration

We wrote the Kubernetes configuration, but we need something to deploy. We need to:

  1. Build the web dist
  2. Build the docker image
  3. Update our deployment

I’m sure you are able to run it manually, or by writing an awesome script. But I will show you how to manage it easily with JetBrain TeamCity.

If you need some help in deploying your TeamCity CI architecture, you can use this:

You also already need to have a basic project in your TeamCity. If not, you will find the necessary information in the documentation:

1. Install NPM

It is good practice to keep an independent version of NPM for each of your builds. The one is a good TeamCity plugin to do that:

Configure your first step with:

2. NPM build

In this step, it’ll run the NPM install and the NPM build (ng build):

3. Docker Build

We have now generated our Angular5 dist. Now, let’s write our Dockerfile:

FROM nginx:latest

## Add the default configuration for Angular app
COPY peter-web/default.conf /etc/nginx/conf.d/

## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

## Copy the dist result
COPY peter-web/dist/apps/webview/ /usr/share/nginx/html

And configure the build:

I choose to add the build counter as docker tag to be able to identify each image.

4. Docker Push

We can now push our docker image to the registry. This will only work if your agent is authentified as the owner of your project. For more information, take a look at this Readme:

5. Kubernetes update

And now the magic happens: You just have to add this single line to update your Deployment ;)

Conclusion

In this post we quickly saw how to deploy the Angular 5 app in Google Cloud Kubernetes architecture.

Be careful. Using this configuration, however, you will not have fixed the IP for your service. Which makes it very difficult to use. To turn it into a production ready service please do the next step:

https://medium.com/p/6d2b31e1f85c