In the next sections, I will explain how I tackled these two problems.<\/p>\n
How to serve minimized and compressed JS and CSS bundles as a microservice?<\/h2>\n
I\u2019m using compression-webpack-plugin<\/a> as a result, I have my bundles like app.bundle.83b334b1c8ef06b0b956.js.gz<\/strong> and app.83b334b1c8ef06b0b956.css.gz<\/strong>.<\/p>\n I need a static server to host these bundles and also be able to serve compressed files. What will be the best candidate? It doesn\u2019t require much research to come to the conclusion: Nginx<\/strong>.<\/p>\n Here is my Dockerfile:<\/p>\n Here is my Nginx conf.d. I enabled the gzip with gzip_static on: Now you can run the image on your local to verify the result. Your website should be waiting for you at http:\/\/localhost.<\/p>\n Actually, this process can be generalized for injecting any environment variable on the frontend. The way I did it is through the index.html with a small env.js.<\/p>\n My env.js looks like this:<\/p>\n My index.html looks like this:<\/p>\n This is where I use the DEV_ENDPOINT:<\/p>\n BASE_URL<\/strong> is actually the production gateway endpoint. As a result, if DEV_ENDPOINT<\/strong> is not presented, it will fall back to the production endpoint. You can define anything in this env.js. Now that we’ve finished the development setup, we need to wrap everything into Kubernetes.<\/p>\n Kubernetes provides configmap to achieve something to this effect. Here is the configmap YAML:<\/p>\n And here is the deployment YAML:<\/p>\n Now Kubernetes will create the env.js at \/usr\/share\/nginx\/html\/config before starting the frontend container.<\/p>\n That\u2019s it!<\/p>\n This article was originally published on\u00a0Medium<\/a>.<\/em><\/p>\n# Node image\r\nFROM node:10 as builder\r\n\r\n<\/span># set working directory\r\nRUN mkdir \/usr\/src\/app\r\nWORKDIR \/usr\/src\/app\r\n\r\n<\/span># copy source code\r\nCOPY . \/usr\/src\/app\/\r\n\r\n<\/span># install app dependencies\r\nRUN npm install\r\n\r\n<\/span># run production build\r\nRUN npm run production\r\n\r\n<\/span># Nginx\r\nFROM nginx:1.15\r\nRUN rm -rf \/etc\/nginx\/conf.d\r\nCOPY conf \/etc\/nginx\r\nCOPY \u2014 from=builder \/usr\/src\/app\/app-build \/usr\/share\/nginx\/html\r\nEXPOSE 80 \r\nCMD [\u201cnginx\u201d, \u201c-g\u201d, \u201cdaemon off;\u201d]<\/span><\/pre>\n
\n<\/span><\/p>\nserver {\r\n listen 80;\r\n location \/ {\r\n gzip_static on;\r\n root \/usr\/share\/nginx\/html;\r\n index index.html index.htm;\r\n try_files $uri $uri\/ \/index.html;\r\n }\r\n error_page 500 502 503 504 \/50x.html;\r\n location = \/50x.html {\r\n root \/usr\/share\/nginx\/html;\r\n }\r\n}<\/pre>\nHow to switch gateway endpoints from the development environment to the staging\/production environment?<\/h2>\n
window.DEV_ENDPOINT = 'https:\/\/dev.gateway.io'<\/a>;<\/pre>\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <meta charset="utf-8">\r\n <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" \/>\r\n <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" \/>\r\n <\/head>\r\n <body>\r\n <div id="root">Loading...<\/div><\/span> <!-- inject the env -->\r\n <script type="text\/javascript" src="\/config\/env.js"><\/script>\r\n <\/body>\r\n<\/html>\r\n<\/span><\/pre>\nconst instance = axios.create({\r\n baseURL: window.DEV_ENDPOINT || CommonConstants.BASE_URL\r\n });<\/span><\/span><\/pre>\napiVersion: v1\r\nkind: ConfigMap\r\nmetadata:\r\n name: frontend-dev-configmap\r\n labels:\r\n name: frontend-dev-configmap\r\ndata:\r\n endpoint-config: |\r\n window.DEV_ENDPOINT = 'https:\/\/dev.gateway.io'<\/a>;<\/span><\/pre>\napiVersion: extensions\/v1beta1\r\nkind: Deployment\r\nmetadata:\r\n name: frontend\r\nspec:\r\n replicas: 2\r\n strategy:\r\n type: RollingUpdate\r\n template:\r\n metadata:\r\n labels:\r\n app: frontend\r\n spec:\r\n containers:\r\n - name: frontend-container\r\n image: frontend:latest\r\n imagePullPolicy: Always\r\n ports:\r\n - containerPort: 80\r\n name: http\r\n readinessProbe:\r\n httpGet:\r\n path: \/\r\n port: 80\r\n initialDelaySeconds: 5\r\n periodSeconds: 3\r\n successThreshold: 1\r\n volumeMounts:\r\n - name: env-config\r\n mountPath: \/usr\/share\/nginx\/html\/config\r\n volumes:\r\n - name: env-config\r\n configMap:\r\n name: frontend-dev-configmap\r\n items:\r\n - key: endpoint-config\r\n path: env.js<\/span><\/pre>\n
![\"OpenStack](\"https:\/\/ormuco.com\/wp-content\/uploads\/2019\/07\/Qinling-CTA-1-1.png\")
<\/a><\/p>","protected":false},"excerpt":{"rendered":"