This post will cover the technical implementation of serving Angular in Jenkins-X (JX) and Kuberenetes (K8S). We assume you have basic knowledge of Jenkins and Kubernetes.
To serve our Angular portal in K8S we “Pre” build the protal with jenkins, and expose it with a Nginx based docker image. If you don’t use Jenkins you can “pre” build angular locally or with a different tool.
Nginx:
First we added a Nginx config file namend “default.conf” and saved it at a folder named “server”.
This config file will be used by Nginx to route all the traffic to the index.html. This way Angular will pick up the request and return the needed Files to setup the portal. The file we used looks like:
server{
listen 80;
sendfile on;
default_type application/octet-stream;
gzip on;
gzip_http_version 1.1;
gzip_disable “MSIE [1-6]\.”;
gzip_min_length 1100;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_comp_level 9;
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html =404;
}
## When using Jenkins-x and Livenss checks enable the line’s below
#location /Liveness/status {
# return 200 “Running”;
# add_header Content-Type text/plain;
#}
}
NOTE! We listen to port 80 even when SSL is enabled. Kuberentes will handle the SSL and certificate’s and reroutes internally to port 80. This is also default exposed by docker
Docker:
K8s will user docker to make a container with our Angular portal in it.
Make a Docker file in de root of your (git) repo. This docker file only covers serving de dist (Build) folder compiled by ng build. So build your Angular portal before you build the docker image.
FROM nginx:1.14.1-alpine
## Copy our default nginx config
COPY server/default.conf /etc/nginx/conf.d/
## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder
COPY server/public /usr/share/nginx/html
## No expose nessecary because nginx config listens to port 80 and this is exposed automatically
CMD [“nginx”, “-g”, “daemon off;”]
NOTE! We do not configure an expose because Nginx will listen to port 80 and this is exposed by default
Jenkins-X:
Next we changed our Jenkins file to build the portal and safe it in de “server/public” folder.
container(‘nodejs’) {
sh “npm install”
sh “CI=true DISPLAY=:99 npm test”
sh “npm run build — –prod –output-path=\$(pwd)/server/public”
sh ‘export VERSION=`cat VERSION` && skaffold build -f skaffold.yaml’
sh “jx step post build –image $DOCKER_REGISTRY/$ORG/$APP_NAME:\$(cat VERSION)”
}
K8S values.yaml
Last but not least we have to edit the charts/${projectname}/values.yaml to expose the right internal port and change te probe path.
Change de “internalPort” from 8080 to 80 and the “probePath” from / to /Liveness/status.
Done!
When done everything right you will have an Angular portal running in your K8S cluster using Jenkins-X
