When you have two or more different framework projects that need to be merged into one and need to jump to one another to realize multiple projects and share token and user information, we need the following two methods

  1. Use iframe tags for nesting. The simplest is to deploy the two projects on different servers and switch urls or nested child and parent.
  2. Use Nginx to forward pages and become a “multi-page” application. Medium difficulty, need to build a layer outside, and configure Nginx forwarding.

This post focuses on the implementation of the second method.

First, build the outermost frame.

1. Create a folder and put the two projects in it. The two projects can be written in any framework: Vue, React, Angular… . Here we have three a, B and C projects.

  1. Create a package.json file for easy command operation. Package. json defines various configuration information and dependency modules for the project, and scripts defines various scripts, one for each property. In the article written by Ruan Yifeng, we can know that not only NPM scripts can be used, for example, shell scripts can be put in scripts when using Linux system. The exit code of the NPM script follows the exit code of the shell script. If the value is not 0, it is regarded as failure. We won’t go into the execution order, wildcards, etc. For details, see NPM Scripts usage Guide by Yifeng Nguyen.

  2. We have written three commands in package.json to install, start, and package the project. Note the execution order of all :all. We emphasize that concurrently, this is a Node package that can use multiple ports at once, which is rare because one script command is executed singly because we need to package three projects simultaneously. So use the node dependency package CONCURRENTLY.

{
    "name": "micro-examples"."scripts": {
      "install:all": "yarn install:a-project && yarn install:a-project && npm run install:a-project ".// Install all project dependencies
      "install:a-project": "cd a-project && yarn".// There are three dependency methods. Some people prefer yarn while others prefer NPM. Go to the project folder and install
      "install:b-project": "cd b-project && npm install"."install:c-project": "cd c-project && npm i".// NPM install

      "serve:all": "concurrently \"serve:a-project\" \"yarn serve:b-project\" \"yarn serve:c-project\"".// Start three projects locally
      "serve:a-project": "cd a-project && yarn serve"."serve:b-project": "cd b-project && yarn serve"."serve:c-project": "cd c-project && yarn serve"."build:all": "concurrently \"yarn build:a-project\" \"yarn build:b-project\" \"yarn build:c-project\"".// Package three items
      "build:a-project": "cd a-project && yarn build"."build:b-project": "cd b-project && yarn build"."build:c-project": "cd c-project && yarn build",},"devDependencies": {
      "concurrently": "^ 6.0.0"}}Copy the code

Second, write.gitlab-ci.yml, we use Gitlab CI to build.

For those who do not know this, please consult the operation and maintenance students about yamL grammar.

# specify docker image
image: a/b/node:8000

# Define the execution stage of the scene. The order of the elements determines the execution of the task
stages:
  Create a folder to install the outermost dependencies
  - create_dir 
  # Package all projects
  - node_build_all
  # Build docker image
  - docker_build_dev
  # clear cache
  - clean-cache  

# Command before task execution
before_script:
  - *auto_devops


create_dir:
 stage: create_dir
 script:
   # create folder in root directory
   - mkdir -p 
   Copy the outermost folder to the created root directory
   - cp -r 
   - ls 
   Install the outermost dependency CONCURRENTLY
   - npm install

node_build_all:
  stage: node_build_all
  script:
    - npm run build:all
    - ls 
    - cp -r 
    - ls 
  when: manual

A function called docker_build is defined when there are repeated tasks
.docker_build: &docker_build  
  image: The specified docker The mirror
  script:
    - docker_build
    - chart_build
  when: manual

Build the Docker image into the development environment
docker_build_dev:
  < < : *docker_build  Merge the docker_build function
  stage: docker_build_dev

# cache
clean-cache:
  stage: clean-cache
  script:
    - rm -rf /cache/
    - clean_cache // This function is in devops.sh
  when: manual


.auto_devops: &auto_devops | # set NPM image source function set_registry () {NPM config set registry https://registry.npm.taobao.org}
    # building a docker
    function docker_build(){
        export 
        cp -rf  
        docker build -t 
        docker login -u 
        docker push 
    }
Copy the code

3. Write default.conf to forward pages.

server{ listen 90 default_server; server_name localhost; charset utf-8; access_log /var/log/nginx/nginx.log; error_log /var/log/nginx/nginx.error.log debug; /usr/share/nginx/html/a-project; /usr/share/nginx/html/a-project; index index.html; try_files $uri $uri/ /index.html; } location /b-project {// forward to b project root /usr/share/nginx/html/b-project; index index.html; try_files $uri $uri/ /index.html; } location /a-project {// forward to c project root /usr/share/nginx/html/c-project; index index.html; try_files $uri $uri/ /index.html; }}Copy the code

The server will request static resources such as HTML, JS and CSS to be forwarded. Note: To configure the publicPath public resource request path in the WebPack build file, request resources relative to the path (JS, CSS…).