Recently, my team and I faced a couple of issues when shipping our product into production. These are the problems we faced and how we circumvented them:
Vue-in-production
- Unable to call http REST API from https hosted Vue project
Frontend (Vue): https://zingzai.company.com/dir/index.html
Backend (Spring Boot): http://zingzai.company.com/apis/search/_user
Our Vue frontend app tried to make a backend Spring Boot API call that was served on “http”. The same-origin policy restricts how scripts interact from different origins to isolate malicious resources. More on same origin policy…
Resolution: Served backend Spring Boot API on “https”. - Slow performance
The first problem had us doubt our code which led to us doing a silly move of deploying our devt version of the app. This should not happen to you. In any case, I thought I would add this point in to demonstrate the difference between devt VS prod deployments.
Devt deployment: The slow performance was caused by a JavaScript file (app.js) that was 11MB in size. It took 8 seconds to load this file. Besides this particularly large file, other files took a few seconds to load as well.
Production deployment (Resolution): Built project using WebPack and deployed this instead. Files were minified and loading time reduced to a few milliseconds.
More on production deployment… - Large Docker image size
Despite already deploying our productionised Docker image, The file size of our first deployments were close to 700MB! Although Linux and Docker reuses already built layers, we knew our dist directory wouldn’t bulk up to 700MB. Each instruction in the Dockerfile adds another layer and bulks up the Docker’s image size. Despite executing line 14 which removes all directorys in the /app directory, it doesn’t seem to reduce the Docker image size.
Resolution: We went for Docker’s multi-stage build which effectively takes care of the large Docker image problem.
More on Docker multi-stage builds…
4. Apply prod config instead of dev config
We had to dockerise our frontend Vue app and deploy it into production. Ideally, we would want to inject Vue production config in our Dockerfile / Kubernetes. However, we haven’t gotten around this problem. Please let us know if you have any suggestions!
Resolution: More on production mode and environment variables…
Spring-Boot-in-production
- Apply prod config instead of dev config in Docker image
We also had to dockerise our backend Spring Boot app and deploy it into production. This was much simpler than injecting config into compiled JavaScript and dockerised images.
Resolution: I will share a couple of ways to do this.
1. Externalise Spring Boot config using k8 yaml env configs (We are practising this in production now. It made our deployments so much easier!)
2. Wrapping our Spring Boot docker image with an application-prod.properties (Due to time constraint, we adopted this and had to build our Docker image twice. We would’ve chosen option one any other day!)
3. k8 config-map
4. k8 secrets
