Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to dynamically insert the back-end API base address in the front-end project". In the daily operation, I believe that many people have doubts about how to dynamically insert the back-end API base address in the front-end project. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to dynamically insert the back-end API base address in the front-end project". Next, please follow the editor to study!

Common web front and back end separation: the front end is deployed separately, the front end project is hosted by the nginx package file, reverse proxy request.

Some parts of the application must be configurable, such as the API calling base address, which is uniformly inserted into the front end when it is packaged, resulting in the formation of chunk files, which is carried by nginx.

#

# generate chunk files

#

FROM node:10-alpine as builder

# install and cache app dependencies

COPY package.json package-lock.json. /

RUN npm install & & mkdir / react-frontend & & mv. / node_modules. / react-frontend

WORKDIR / react-frontend

COPY. .

RUN npm run build

#

# Production Build

#

FROM nginx:latest

COPY nginx.conf / etc/nginx/nginx.conf

COPY-- from=builder / react-frontend/build / usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "- g", "daemon off;"]

When packaging the front end in Docker, you may try to pass the back-end API call base address with the image construction parameter Arg/Env, but this is not ideal:

When packaging, the parameters are inserted uniformly, and the resulting chunk file is used as part of the final image, resulting in a strong association between the final front-end image and the backend API address.

"

You may build different front-end images for unused back-end environments (canary, staging, production), but this is a time-consuming effort, not a best practice.

Let's share a practice of dynamically inserting a back-end API base address in the container runtime.

Front-end independent deployment, dynamically inserting back-end API base address (in Docker)

I want to delay the API base address to the container generation stage (decoupled from the process of building the image) so that I can use an image to pass parameters for different environments to form different front-end containers.

The script for the front-end project insertion configuration is as follows:

/ / FILE: set-env.ts

...

Export const environment = {

Production: ${isProd}

ApiBaseUrl: 'API_BASE_URL'

Version:'v ${require ('.. / package.json') .version}'

}

...

We write API_BASE_URL placeholders in the front-end configuration and package the front-end according to the established process

The Dockerfile CMD directive instructs the container how to run:

Replace the original API_BASE_URL placeholder in the front chunk files with the real value and use the nginx to host the replaced chunk files# FILE: Dockerfile

...

EXPOSE 80

COPY-- from=builder / react-frontend/replace_api_url.sh /

CMD ["sh", "replace_api_url.sh"]

Here is the content of replace_api_url.sh:

#! / usr/bin/env sh

Find'/ usr/share/nginx/html'-name'* .js'- exec sed-I-e's

Nginx-g "daemon off;"

After building the image normally, you can replace the API_BASE_URL string of the original front-end chunk files by passing parameters in the environment variable when you generate the container.

Docker build-t front.

Docker run-p 80:80-e API_BASE_URL= http://somebackend.com/api front, the study on "how to dynamically insert a back-end API base address in a front-end project" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.