マイクロアプリのマイクロフロントエンドベースとサブアプリケーションのマウント構成

1. マイクロアプリとは何ですか

マイクロ フロントエンドの概念は、2016 年に ThoughtWorks によって提案されました。マイクロサービスのアーキテクチャ概念を利用しています。中心となるのは、巨大なフロントエンド アプリケーションを複数の独立した柔軟な小さなアプリケーションに分割することです。各アプリケーションは独立して開発および実行できます。個別にデプロイしてから、これらの小さなアプリケーションを完全なアプリケーションに統合するか、長期間実行されている関連性のない複数のアプリケーションを 1 つのアプリケーションに統合します。マイクロフロントエンドは、複数のプロジェクトを 1 つに統合するだけでなく、プロジェクト間の結合を減らし、プロジェクトのスケーラビリティを向上させることができます。フロントエンド ウェアハウス全体と比較して、マイクロフロントエンド アーキテクチャのフロントエンド ウェアハウスは小さくなる傾向があります。フレキシブル。

主に次の 2 つの問題を解決します。

• 1. プロジェクトの反復アプリケーションがますます大きくなり、維持することが困難になります。
• 2. チーム間または部門間での共同開発プロジェクトは効率の低下につながります。

2. ドックアクセスサブアプリケーションプロセス

2. サブアプリケーションのフロントエンド開発が完了したら、クロスドメイン サポートをセットアップします。

にvue.config.js設定を追加

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
  }
}

3. サブアプリケーションがベース(フロントエンド vue3 Webpack ビルド ツール) にマウントされているときに発生する問題:

1. エラーはクロスドメインの問題として報告されます。

解決： 

1) まず、展開後に負荷分散 (フロントエンド) にアクセスできるかどうかを確認します。アクセスできない場合は、

2) k8s で作成したフロントエンドアプリケーションの PodIP アドレス + ポート番号にアクセスできるかどうか (注: PodIP はリアルタイム更新アドレスであり、ポート番号は固定です。PodIP + ポート番号が正常にアクセスできる場合、強制同期 DLB ボタンをクリックして、PodIP と k8s によって作成されたフロントエンド アプリケーション マッピングを同期します。それでもアクセスできない場合は、ベースを保守している人を見つけて、問題があるかどうかを確認します。

2. フロントエンド アプリケーションに正常にアクセスした後、ベースにマウントすると、エラー 405 Not allowed が報告されます。

問題: Dock とサブアプリの構成が一致しない

解決：

1) 実装されているアクセスインターフェースのプレフィックスはベース担当者とネゴシエートする必要があり、サブアプリケーション名(ネゴシエートされた名前ルールに従っていない場合) + APIを使用すると、上記のエラーが発生します。報告される

2) サブアプリケーションは開発環境構成に対応します

基本コンフィギュレータの場合:

{
    name: 'projectname',
    url: 'http://10.80.244.32:30000',
    proxy: {
      api: 'http://10.83.240.49:18000',
    }
  },

フロントエンド開発環境の設定: vue.config.js

module.exports = {
  lintOnsave: false,
  publicPath: './',
  devServer: {
    devServer: {
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
      proxy: {
        '/projectname-api':{//注意前缀和提供给基座人员的name是一致的，否则报405 not allowed
          target:"http://10.83.240.49:18000",
          changeOrigin:true,
          sucure:false,
          pathrewrite:{
            "^/projectname-api":"/"
          }
        }
      }
    }
  }
}

nginxの設定:

 server {
    listen 8888; # 监听端口
    server_name localhost; # 域名可以有多个，用空格隔开
    client_max_body_size 100m;
    proxy_send_timeout 300s;# 设置发送超时时间
    proxy_read_timeout 300s;

    location / {
      gzip on;
        gzip_min_length 1k;
        gzip_buffers    4 16k;
        gzip_http_version 1.1;
        gzip_comp_level 9;
        gzip_types      text/plain application/x-javascript  text/css application/xml text/javascript application/x-httpd-php application/javascript application/json
        gzip_disable "MSIE [1-6]\.";
        gzip_vary on;

        root /user/share/nginx/html;    
        index index.html index.htm; #目录内的默认打开文件,如果没有匹配到index.html,则搜索index.htm,依次类推
        try_files $uri $uri/ /index.html;
        add_header "Access-Control-Allow-Origin" *;
        add_header "Access-Control-Allow-Methods" *;
        add_header "Access-Control-Allow-Headers" *;

        if($request_method="OPTIONS"){
           return 204
        }
    }

    #ssl配置省略
    location /api {
      # rewrite ^.+api/?(.*)$ /$1 break;
      proxy_pass http://10.83.240.49:18000; #node api server 即需要代理的IP地址
      proxy_redirect off;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-Forwarded-For $proxy_add_x_forwarded_for;
    }
    #error_page  404              /404.html;    #对错误页面404.html 做了定向配置

    # redirect server error pages to the static page /50x.html
    #将服务器错误页面重定向到静态页面/50x.html
    #
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
      root html;
    }
  }

3. エラー 404 が報告された場合 

問題: Dock とサブアプリの構成が一致しない

 基本設定者に提供される情報

    name: 'projectname',
    url: 'http://10.80.244.32:30000',
    proxy: {
      weifuwu1: 'http://10.83.240.49:18000/weifuwu1',
      weifuwu2: 'http://10.83.240.49:18000/weifuwu2',
    }
  },

フロントエンド開発環境の設定: vue.config.js

module.exports = {
  lintOnsave: false,
  publicPath: './',
  devServer: {
    devServer: {
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
      proxy: {
        '/projectname-weifuwu1':{//注意前缀和提供给基座人员的name+微服务名称是一致的，
          target:"http://10.83.240.49:18000/weifuwu1",
          changeOrigin:true,
          sucure:false,
          pathrewrite:{
            "^projectname-weifuwu1":"/"
          }
        },
        '/projectname-weifuwu2':{
          target:"http://10.83.240.49:18000/weifuwu2",
          changeOrigin:true,
          sucure:false,
          pathrewrite:{
            "^projectname-weifuwu2":"/"
          }
        }
      },      
    }
  }
}

nginxの設定:

 server {
    listen 8888; # 监听端口
    server_name localhost; # 域名可以有多个，用空格隔开
    client_max_body_size 100m;
    proxy_send_timeout 300s;# 设置发送超时时间
    proxy_read_timeout 300s;

    location / {
      gzip on;
        gzip_min_length 1k;
        gzip_buffers    4 16k;
        gzip_http_version 1.1;
        gzip_comp_level 9;
        gzip_types      text/plain application/x-javascript  text/css application/xml text/javascript application/x-httpd-php application/javascript application/json
        gzip_disable "MSIE [1-6]\.";
        gzip_vary on;

        root /user/share/nginx/html;    
        index index.html index.htm; #目录内的默认打开文件,如果没有匹配到index.html,则搜索index.htm,依次类推
        try_files $uri $uri/ /index.html;
        add_header "Access-Control-Allow-Origin" *;
        add_header "Access-Control-Allow-Methods" *;
        add_header "Access-Control-Allow-Headers" *;

        if($request_method="OPTIONS"){
           return 204
        }
    }

    #ssl配置省略
    location ^~ /projectname-weifuwu1/ {
      # rewrite ^.+api/?(.*)$ /$1 break;
      proxy_pass http://10.83.240.49:18000/weifuwu1; #node api server 即需要代理的IP地址
      proxy_redirect off;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-Forwarded-For $proxy_add_x_forwarded_for;
    }

     location ^~ /projectname-weifuwu2/ {
      # rewrite ^.+api/?(.*)$ /$1 break;
      proxy_pass http://10.83.240.49:18000/weifuwu2; #node api server 即需要代理的IP地址
      proxy_redirect off;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-Forwarded-For $proxy_add_x_forwarded_for;
    }
    #error_page  404              /404.html;    #对错误页面404.html 做了定向配置

    # redirect server error pages to the static page /50x.html
    #将服务器错误页面重定向到静态页面/50x.html
    #
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
      root html;
    }
  }

4. サブアプリケーションは基本ユーザー情報を取得します 

1) vuexにstore=>index.tsを保存します

import { defineStore } from "pinia";

interface MainState {
  count: number;
}

declare global {
  interface Window {
    microApp: any;
    __MICRO_APP_NAME__: string;
    __MICRO_APP_ENVIRONMENT__: string;
    __MICRO_APP_BASE_ROUTE__: string;
  }
}

export const useMain = defineStore("mainStore", {
  state: (): MainState => {
    return {
      count: 1,
    };
  },
  getters: {
    user() {
      if (window.__MICRO_APP_ENVIRONMENT__) {
        return window.microApp.getData().user;
      }
      return {};
    },
    curUserId(){
      if (window.__MICRO_APP_ENVIRONMENT__) {
        return window.microApp.getData().user;
      }
      return 0
    }
  },
  actions: {},
  },
});

vuex Index.vue に保存されている基本ユーザー情報を取得します

import {useMain} from '../../store/index'
const store=useMain()


<template>
  <div>{
   
   {store.user}}</div>
</template>

2) main.ts または App.vue で取得します。

if (window.__MICRO_APP_ENVIRONMENT__) {
  username=window.microApp.getData().user
  console.log(username)
}