Qiankun+Nuxt微应用静态化部署

为什么这么做

qiankun 是基于 single-spa 做了二次封装的微前端框架，我们项目当前的服务端渲染是完全没法用了。
在服务端没法用的前提下，其实nuxt启动的node服务，就只是启动了一个服务而已并没有任何服务端渲染。
而如果只是启动个服务、做一下代理的话nginx轻量化的多。
部署效率上，当前灵洞在gitlab上执行一次CI自动化部署耗时15-19分钟，太慢了。

主要时间被浪费在了npm run build 和（docker build的时候node_modules里面这5-6万个文件）。
而如果使用静态化的部署方式 npm run build 会快很多，docker build的时候也不需要node_modules。
速度就快很多了耗时1-2分钟。

因为我们做的是微前端，原来部署一个项目，现在要部署10个左右的项目，所以提高部署效率很有必要。

服务器资源消耗少很多，部署到生产环境，node服务300-600M，nginx服务 140M左右。
avatar

(。・ω・。)

配置文件

nuxt.config.js

1
2
3

export default {
  mode: 'spa',
}

Dockerfile

FROM xxx.com:xxxx/common/nginx:latest
ADD front.tar.gz /etc/nginx/html/
ADD nginx.conf /etc/nginx/
EXPOSE 10001

nginx.conf

worker_processes  auto;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       10001;
        server_name  localhost;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        location / {
            root   html;
            index  index.html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        location ~/system-api/ {
           proxy_pass   需要代理的地址;
        }
    }
}

配置CI

.gitlab-ci.yml

variables:
  CI_PROJECT_DIR: 仓库地址
  SERVICE_TAG: 1.0.0
  GIT_STRATEGY: clone

stages:
  - pull
  - build
  - deploy
  - push

pull-code-job:
  stage: pull
  only:
    - master
  tags:
    - run213
  script:
    - cd $CI_PROJECT_DIR && git pull

build-main-job:
  stage: build
  needs:
    - pull-code-job
  only:
    - master
  tags:
    - run213
  script:
    - cd $CI_PROJECT_DIR && npm install && npm run build && tar -zcvf front.tar.gz -C dist .

deploy-main-job:
  stage: deploy
  needs:
    - build-main-job
  only:
    - master
  tags:
    - run213
  script:
    - cd $CI_PROJECT_DIR && sh deploy_docker.sh

push-main-job:
  stage: push
  when: manual
  variables:
    PRO_NAME: h-wei
    SERVICE_NAME: h-public-report
    TAG: 1.0.0
  needs:
    - deploy-main-job
  only:
    - master
  tags:
    - run213
  script:
    - >
      if [ "$TAG" == "$SERVICE_TAG" ]; then
         docker push xxx.com:11443/$PRO_NAME/$SERVICE_NAME:$SERVICE_TAG
      else
         docker tag xxx.com:11443/$PRO_NAME/$SERVICE_NAME:$SERVICE_TAG xxx.com:11443/$PRO_NAME/$SERVICE_NAME:$TAG
         docker push xxx.com:11443/$PRO_NAME/$SERVICE_NAME:$TAG
         docker rmi xxx.com:11443/$PRO_NAME/$SERVICE_NAME:$TAG
      fi

sh deploy_docker.sh

pro_name=h-wei
service_name=h-public-system
version=1.0.0

if [ -n "$1" ]; then
 pro_name=$1
fi
if [ -n "$2" ]; then
 service_name=$2
fi
if [ -n "$3" ]; then
 version=$3
fi

# shellcheck disable=SC2164
CURRENT_DIR=$(cd "$(dirname "$0")"; pwd)

echo "进入目录：${CURRENT_DIR}"
# shellcheck disable=SC2164
cd "${CURRENT_DIR}"

echo "#########################检测旧的镜像文件以及正在运行的容器#########################"
# shellcheck disable=SC2006
CID_LIST=`docker ps -a --format "{{.ID}}\t{{.Image}}" | grep xxx.com:11443/${pro_name}/${service_name}:${version} | awk '{print $1}'`
for CID in ${CID_LIST}
do
echo "关闭容器:${CID}"
docker stop "${CID}"
echo "删除容器:${CID}"
docker rm "${CID}"
done

# shellcheck disable=SC2006
IMAGES_LIST=`docker images --format "{{.Repository}}:{{.Tag}}" | grep xxx.com:11443/${pro_name}/${service_name}:${version}`

if [ -n "${IMAGES_LIST}" ]; then
  # shellcheck disable=SC2162
  echo "${IMAGES_LIST}" | while read IMAGE_LINE
  do
    if [ -n "${IMAGE_LINE}" ]; then
        echo "删除旧的镜像文件:${IMAGE_LINE}"
        docker rmi "${IMAGE_LINE}"
    fi
  done
fi

# shellcheck disable=SC2034
cd "${CURRENT_DIR}" && docker build -f "${CURRENT_DIR}"/Dockerfile -t xxx.com:11443/${pro_name}/${service_name}:${version} .

docker run -d --name=${service_name} --net=host xxx.com:11443/${pro_name}/${service_name}:${version}