react-app-qiankun

The following commands are batch execution of the main app and sub app.

main app will run at localhost:1212; sub app win run at localhost:2323

nginx config： /config/nginx.conf

Install dependencies

npm run app:install

Run

npm run app:run

Build

npm run app:build

Run by docker compose

docker compose up -d

Build docker images

docker build -t react-app-qiankun .

Run by docker images

docker pull caas4/react-app-qiankun:latest

参数 REACT_APP_SUB_REACT 为子应用服务器地址；端口与 nginx 子应用端口一致，用 2233
linux 下可以使用 --net=host 共享网络，不用端口映射， mac 没有 --net=host 模式

# mac
docker run -d -p 1122:1122 -p 2233:2233 -e REACT_APP_SUB_REACT=http://x.x.x.x:2233 --restart=always caas4/react-app-qiankun:latest

# linux
docker run -d  --net=host  -e REACT_APP_SUB_REACT=http://x.x.x.x:2233 --restart=always caas4/react-app-qiankun:latest

ps:

父应用和子应用部署在相同服务器，不同端口下；由于代码中子应用 entry 使用的是 //localhost:2233 方式，导致生产环境打包部署后，父应用在 x.x.x.x:1122 下; 父应用中获取子应用的请求仍然走 http://localhost:2233，获取不到子应用, 并不是期望的 http://x.x.x.x:2233；

解决办法是：docker run 时必须外部传递环境变量指定子应用地址即可。

实际生产中微应用 entry 推荐使用路径方式，再由 nginx location 到自个目录下；参考qiankun 如何部署

registerMicroApps([
  {
    name: 'app-vue-hash',
    entry: '/child/vue-hash/', // http://localhost:8080/child/vue-hash/
    container: '#container',
    activeRule: '/app-vue-hash',
  },
  {
    name: 'app-vue-history',
    entry: '/child/vue-history/', // http://localhost:8080/child/vue-history/
    container: '#container',
    activeRule: '/app-vue-history',
  },
  // angular 和 react 同上
],

server {
  listen       8080;
  server_name  localhost;

  location / {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  location /child/vue-history {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /child/vue-history/index.html;
  }
  # angular 和 react 的history 配置同上
}