Ormuco
  • Solutions
    • IaaS Décentralisé
    • PaaS Périphérique
    • Provisionnement d'infrastructure
    • Administrateur Système Virtuel
  • Pourquoi Ormuco?
    • Nos Partenaires
    • Soutien
    • Cas d'utilisation
  • Prix
  • À Propos
    • À Propos d'Ormuco
    • Carrières
    • Juridique
  • Demander une démo
  • en_USEN
Ormuco
  • Solutions
    • IaaS Décentralisé
    • PaaS Périphérique
    • Provisionnement d'infrastructure
    • Administrateur Système Virtuel
  • Pourquoi Ormuco?
    • Nos Partenaires
    • Soutien
    • Cas d'utilisation
  • Prix
  • À Propos
    • À Propos d'Ormuco
    • Carrières
    • Juridique
  • Demander une démo
  • en_USEN

Making a React application with reverse proxy and environment-awareness

byYulong Song inDevelopers Corner posted onaoût 1, 2019
0
1
Making a React application with reverse proxy and environment-awareness

A little introduction to what I would like to achieve. I have been working on the frontend for quite some time. I upgrade all my React dependencies to the latest stable versions (it’s all about hooks!) and use Webpack to optimize my build to the maximum (tree-shaking, compression, chunk splitting, etc.). Now I have two problems:

  1. How do I serve my minimized and compressed JavaScript and CSS bundles as a microservice?
  2. How do I switch my gateway endpoint from the development environment to the staging/production environment? For example, in the development environment, all the API calls should go to https://dev.gateway.io and in the production environment, they should go to https://gateway.io without my having to rebuild the whole project.

In the next sections, I will explain how I tackled these two problems.

How to serve minimized and compressed JS and CSS bundles as a microservice?

I’m using compression-webpack-plugin as a result, I have my bundles like app.bundle.83b334b1c8ef06b0b956.js.gz and app.83b334b1c8ef06b0b956.css.gz.

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’t require much research to come to the conclusion: Nginx.

Here is my Dockerfile:

# Node image
FROM node:10 as builder

# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app

# copy source code
COPY . /usr/src/app/

# install app dependencies
RUN npm install

# run production build
RUN npm run production

# Nginx
FROM nginx:1.15
RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx
COPY — from=builder /usr/src/app/app-build /usr/share/nginx/html
EXPOSE 80 
CMD [“nginx”, “-g”, “daemon off;”]

Here is my Nginx conf.d. I enabled the gzip with gzip_static on:

server {
  listen 80;
  location / {
    gzip_static on;
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

Now you can run the image on your local to verify the result. Your website should be waiting for you at http://localhost.

How to switch gateway endpoints from the development environment to the staging/production environment?

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.

My env.js looks like this:

window.DEV_ENDPOINT = 'https://dev.gateway.io';

My index.html looks like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    </head>
    <body>
        <div id="root">Loading...</div>        <!-- inject the env -->
        <script type="text/javascript" src="/config/env.js"></script>
    </body>
</html>

This is where I use the DEV_ENDPOINT:

const instance = axios.create({
        baseURL: window.DEV_ENDPOINT || CommonConstants.BASE_URL
    });

BASE_URL is actually the production gateway endpoint. As a result, if DEV_ENDPOINT 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.

Kubernetes provides configmap to achieve something to this effect. Here is the configmap YAML:

apiVersion: v1
kind: ConfigMap
metadata:
  name: frontend-dev-configmap
  labels:
    name: frontend-dev-configmap
data:
  endpoint-config: |
    window.DEV_ENDPOINT = 'https://dev.gateway.io';

And here is the deployment YAML:

apiVersion: extensions/v1beta1
kind: Deployment
metadata:
  name: frontend
spec:
  replicas: 2
  strategy:
    type: RollingUpdate
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
      - name: frontend-container
        image: frontend:latest
        imagePullPolicy: Always
        ports:
        - containerPort: 80
          name: http
        readinessProbe:
          httpGet:
            path: /
            port: 80
          initialDelaySeconds: 5
          periodSeconds: 3
          successThreshold: 1
        volumeMounts:
        - name: env-config
          mountPath: /usr/share/nginx/html/config
      volumes:
        - name: env-config
          configMap:
            name: frontend-dev-configmap
            items:
              - key: endpoint-config
                path: env.js

Now Kubernetes will create the env.js at /usr/share/nginx/html/config before starting the frontend container.

That’s it!

This article was originally published on Medium.

OpenStack Summit

Share:
Yulong Song

Yulong leads the team that’s developing Ormuco's dynamic application deployment platform, with responsibilities in front-end development and DevOps. Yulong has previously worked as a Full-Stack Developer at Ormuco. He graduated with a Master of Computer Science from Concordia University and a Bachelor of Management Science from University of Shanghai for Science and Technology.

Previous

Currying Functions in JavaScript, Recursively

Next

[PR] Quebec Ministry of Economy and Innovation Allocates $4 Million to Montreal-Based Edge Computing Firm, Ormuco

Keep on reading

Currying Functions in JavaScript, Recursively
juillet 25, 2019
Currying Functions in JavaScript, Recursively
No Comments
A Quickstart Guide to Deploying Qinling in Production
juillet 11, 2019
A Quickstart Guide to Deploying Qinling in Production
No Comments
How to Set Up Ambassador with Socket.io
juillet 18, 2019
How to Set Up Ambassador with Socket.io
No Comments

Search

Categories

  • Business
  • Developers Corner
  • Press Releases
  • Technology

Ormuco Inc.

L'interface utilisateur virtuelle d'Ormuco exécute n'importe quelle application en contournant le traitement sur les systèmes d'exploitation des appareils de l'utilisateur final et le cloud computing. Avec Ormuco, vous pouvez lancer toutes vos applications via une plate-forme unique qui est plus sûre et plus rapide que d'utiliser des applications sur votre appareil et dans le cloud

Demander une démo

Compagnie

  • Qui est Ormuco
  • Pourquoi choisir Ormuco
  • Salle de Rédaction
  • Carrières

Solutions

  • IaaS Décentralisé
  • PaaS Périphérique
  • Provisionnement d'infrastructure
  • Administrateur Système Virtuel

Juridique

  • Politique de Confidentialité
  • Prix

Entrer en Contact

  • info@ormuco.com
© 2020 Ormuco Inc.