nuxt3和qiankun上线落地：应用部署篇

一个不会重复的id
647 阅读3分钟

前面两篇文章分别写了主应用和子应用项目生成。

# nuxt3和qiankun上线落地：nuxt3主应用配置篇

# nuxt3和qiankun上线落地：vue子应用篇

这一篇写应用上线部署，采用技术 docker 、 pm2 、nginx 等

对于普通pm2部署nuxt3项目不熟悉的可以看我之前文章 # 第一次用docker快速部署pm2和nuxt前端项目

子应用配置

子应用增加 Dockerfile

采用两段docker编译

  • 第一段是compile stage开头的，目的是install和build出项目生产文件

  • 第二段是 production stage，需要先接受API_SERVER作为参数表示后端接口地址，增加有nginx的cores跨域，后端api转发，单页应用到index.html页面，子应用路由前缀识别，开启10分钟缓存，gzip压缩等功能

# compile stage
FROM ccr.ccs.tencentyun.com/rootegg/node:pnpm-9.3.0 as build-stage

WORKDIR /appinstall

COPY package*.json pnpm-lock.yaml ./

RUN pnpm install --registry https://registry.npmmirror.com

COPY . .

RUN pnpm run build

# production stage
FROM ccr.ccs.tencentyun.com/rootegg/node:nginx-1.24.0 as production-stage
ARG API_SERVER
ENV LANG en_US.UTF-8
RUN echo -e " \n\
add_header Access-Control-Allow-Credentials true; \n\
add_header Access-Control-Allow-Origin *; \n\
add_header Access-Control-Allow-Headers 'x-requested-with,content-type,Cache-Control,Pragma,Date,x-timestamp'; \n\
add_header Access-Control-Allow-Methods 'POST,GET,OPTIONS,PUT,DELETE'; \n\
server {  \n\
    listen       80; \n\
    location   /api/ { \n\
        proxy_pass              ${API_SERVER}/api/; \n\
        proxy_set_header        X-Real-IP \$remote_addr; \n\
        proxy_set_header        X-Forwarded-For \$proxy_add_x_forwarded_for; \n\
    } \n\
    location / { \n\
        root   /var/www/html/; \n\
        index  index.html index.htm; \n\
        if (!-e \$request_filename) { \n\
            rewrite ^(.*)\$ /index.html?s=\$1 last; \n\
            break; \n\
        } \n\
    } \n\
    location   /cy-jeecg-ui/ { \n\
        alias   /var/www/html/; \n\
    } \n\
    keepalive_timeout  600; \n\
    fastcgi_connect_timeout 600; \n\
    fastcgi_send_timeout 600; \n\
    fastcgi_read_timeout 600; \n\
    proxy_connect_timeout 600; \n\
    proxy_send_timeout 600; \n\
    proxy_read_timeout 600; \n\
    send_timeout 600; \n\
    gzip on; \n\
    gzip_min_length 1k; \n\
    gzip_http_version 1.1; \n\
    gzip_comp_level 6; \n\
    gzip_types text/plain application/x-javascript text/css application/xml application/javascript; \n\
    gzip_vary on; \n\
    access_log  /var/log/nginx/access.log ; \n\
    client_max_body_size 100M; \n\
    client_body_buffer_size 100M; \n\
    } " > /etc/nginx/http.d/default.conf \
    &&  mkdir  -p  /var/www \
    &&  mkdir -p /var/www/html
COPY --from=build-stage /appinstall/dist /var/www/html/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

子应用执行命令

在README.md文件中，有两段命令

第一段是从git仓库下载子应用，切换到master分支


cd /root && rm -rf my-child-vue3-demo && git clone https://gitee.com/rootegg/my-child-vue3-demo.git && cd my-child-vue3-demo && git checkout -b master origin/master

第二段是清除旧docker容器，并build新镜像，后运行容器，这里传递了上面需要的API_SERVER参数表示后端接口地址，随便写了个192的内网地址


cd /root/my-child-vue3-demo && git pull && docker ps -a  | grep "my-child-vue3-demo" | awk '{print $1}' | xargs -r docker rm -f && docker build -t t.c/my-child-vue3-demo:v1 --build-arg API_SERVER=http://192.168.1.26:8080 . && docker run -d -p 5173:80 t.c/my-child-vue3-demo:v1

分别来看下效果

image.png

子应用部署完成，可以正常访问

image.png

主应用配置

主应用增加 Dockerfile

用两段docker编译

  • 第一段是compile stage开头的，目的是install和build出项目生产文件
  • 第二段是 production stage，需要先接受API_SERVER作为参数表示后端接口地址，增加pm2启动nuxt项目，增加有nginx的cores跨域，后端api转发，nuxt服务端渲染转发，qiankun微前端子应用页面转发，单页应用到index.html页面，子应用路由前缀识别，开启10分钟缓存，gzip压缩等功能
# compile stage
FROM ccr.ccs.tencentyun.com/rootegg/node:pnpm-9.3.0 as build-stage

WORKDIR /appinstall

COPY package*.json pnpm-lock.yaml ./

RUN pnpm install --registry https://registry.npmmirror.com

COPY . .

RUN pnpm run build

# production stage
FROM ccr.ccs.tencentyun.com/rootegg/node:21.7.3-pm2-nginx-alpine as production-stage

ARG API_SERVER
ARG HOST_IP

WORKDIR /app

COPY --from=build-stage /appinstall/.output/ .

RUN echo -e "module.exports = { \n\
  apps: [{ \n\
    name: 'app', \n\
    exec_mode: 'cluster', \n\
    instances: 'max', \n\
    script: './server/index.mjs' \n\
  }] \n\
}" > ./ecosystem.config.js

RUN echo -e "\n\
server {  \n\
    listen       80; \n\
    proxy_http_version  1.1; \n\
    # nuxt服务端渲染
    location / { \n\
        proxy_pass  http://127.0.0.1:3000/; \n\
    } \n\
    # java后端接口
    location   /api/ { \n\
        proxy_pass              ${API_SERVER}/api/; \n\
        proxy_set_header        X-Real-IP \$remote_addr; \n\
        proxy_set_header        X-Forwarded-For \$proxy_add_x_forwarded_for; \n\
    } \n\   
    # 微前端文件 用qkpage做路由前缀时
    location ~* ^/cy-jeecg-ui/ { \n\
       proxy_pass              http://${HOST_IP}:5173; \n\
    } \n\
    keepalive_timeout  600; \n\
    fastcgi_connect_timeout 600; \n\
    fastcgi_send_timeout 600; \n\
    fastcgi_read_timeout 600; \n\
    proxy_connect_timeout 600; \n\
    proxy_send_timeout 600; \n\
    proxy_read_timeout 600; \n\
    send_timeout 600; \n\
    gzip on; \n\
    gzip_min_length 1k; \n\
    gzip_http_version 1.1; \n\
    gzip_comp_level 6; \n\
    gzip_types text/plain application/x-javascript text/css application/xml application/javascript; \n\
    gzip_vary on; \n\
    access_log  /var/log/nginx/access.log ; \n\
    client_max_body_size 100M; \n\
    client_body_buffer_size 100M; \n\
} " > /etc/nginx/http.d/default.conf

主应用执行命令

在README.md文件中，有两段命令

第一段是从git仓库下载子应用，切换到master分支


cd /root && rm -rf my-nuxt-main-demo && git clone https://gitee.com/rootegg/my-nuxt-main-demo.git && cd my-nuxt-main-demo && git checkout -b master origin/master

第二段是清除旧docker容器，并build新镜像，后运行容器，这里传递了上面需要的API_SERVER参数表示后端接口地址，随便写了个192的内网地址，注意：我们这里假设主应用和子应用都是部署在一台服务器上的，所以传递了HOST_IP进去表示子应用的地址表示获取本机docker0的网关ip


cd /root/my-nuxt-main-demo && git pull && docker ps -a  | grep "my-nuxt-main-demo" | awk '{print $1}' | xargs -r docker rm -f && git pull && docker build -t t.c/my-nuxt-main-demo:v1 --build-arg API_SERVER=http://192.168.1.26:8080 --build-arg HOST_IP=$(ip addr | grep docker.* | grep inet | awk '{print $2}' | sed 's/\// /' | awk '{print $1}') . && docker run -d -p 31236:80 t.c/my-nuxt-main-demo:v1

分别看下效果

image.png

主应用部署完成，可以正常访问，qiankun接入的子应用页面也正常

image.png

至此，主应用项目生成，子应用项目生成，完整上线过程都落地。这是从实际项目中简化版本的项目过程，已经具有意义！

avatar
文章
阅读
粉丝