当前位置: 首页 > news >正文

简单搭建qiankun的主应用和子应用并且用Docker进行服务器部署

在node18环境下,用react18创建qiankun主应用和两个子应用,react路由用V6版本,都在/main路由下访问子应用,用Dockerfile部署到腾讯云CentOS7.6服务器的8000端口进行访问,且在部署过程中进行nginx配置以进行合理的路由访问

要在 Node.js 18 环境下,用 React 18 创建一个基于 qiankun 的主应用和两个子应用,并使用 React Router v6 进行路由管理,所有子应用都在 /main 路由下访问,并使用 Docker 和 Nginx 部署到腾讯云 CentOS 7.6 服务器的 8000 端口,可以按照以下步骤进行:

1. 创建主应用和子应用

主应用

  1. 创建主应用:
npx create-react-app main-app --template typescript
cd main-app
  1. 安装 qiankun 和 react-router-dom:
npm install qiankun react-router-dom@6
  1. 配置主应用:
    在 index.tsx 中配置 qiankun:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { registerMicroApps, start } from 'qiankun';
import App from './App';registerMicroApps([{name: 'sub-app-1',entry: '//localhost:7100',container: '#subapp-viewport',activeRule: '/main/sub-app-1',},{name: 'sub-app-2',entry: '//localhost:7200',container: '#subapp-viewport',activeRule: '/main/sub-app-2',},
]);start();ReactDOM.render(<React.StrictMode><Router><Routes><Route path="/*" element={<App />} /></Routes></Router></React.StrictMode>,document.getElementById('root')
);
  1. 修改 App.tsx:
import React from 'react';
import { Link } from 'react-router-dom';const App = () => (<div><nav><ul><li><Link to="/main/sub-app-1">Sub App 1</Link></li><li><Link to="/main/sub-app-2">Sub App 2</Link></li></ul></nav><div id="subapp-viewport"></div></div>
);export default App;

子应用 1

  1. 创建子应用 1:
npx create-react-app sub-app-1 --template typescript
cd sub-app-1
  1. 安装 qiankun 和 react-router-dom:
npm install qiankun react-router-dom@6
  1. 配置子应用 1:
    在 index.tsx 中添加 qiankun 的生命周期函数:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import App from './App';if (window.__POWERED_BY_QIANKUN__) {// eslint-disable-next-line @typescript-eslint/ban-ts-comment// @ts-ignore__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}function render(props) {const { container } = props;ReactDOM.render(<React.StrictMode><Router basename={window.__POWERED_BY_QIANKUN__ ? '/main/sub-app-1' : '/'}><Routes><Route path="/*" element={<App />} /></Routes></Router></React.StrictMode>,container ? container.querySelector('#root') : document.getElementById('root'));
}if (!window.__POWERED_BY_QIANKUN__) {render({});
}export async function bootstrap() {console.log('sub-app-1 bootstraped');
}export async function mount(props) {console.log('sub-app-1 mounted');render(props);
}export async function unmount(props) {console.log('sub-app-1 unmounted');const { container } = props;ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.getElementById('root'));
}
  1. 配置 package.json:
{"name": "sub-app-1","version": "0.1.0","private": true,"homepage": "/main/sub-app-1","dependencies": {"react": "^18.0.0","react-dom": "^18.0.0","react-scripts": "5.0.0","qiankun": "^2.4.0","react-router-dom": "^6.0.0"},"scripts": {"start": "PORT=7100 react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"}
}

子应用 2

子应用 2 的步骤和 子应用 1 基本一致,项目名不一样和Router的 basename 不一样即可;端口为 7200,或者自行定义,和主应用和子应用1端口不一样即可

2. 创建 Dockerfile

为每个应用创建 Dockerfile,并使用 Nginx 作为静态文件服务器。

主应用 Dockerfile

在 main-app 目录下创建 Dockerfile:

# Build stage
FROM node:18 AS build# Set the working directory
WORKDIR /app# Copy the package.json and package-lock.json files
COPY package*.json ./# Install dependencies
RUN npm install# Copy the rest of the application code
COPY . .# Build the application
RUN npm run build# Production stage
FROM nginx:alpine# Copy the built files from the build stage
COPY --from=build /app/build /usr/share/nginx/html# Copy the Nginx configuration file
COPY nginx.conf /etc/nginx/nginx.conf# Expose port 80
EXPOSE 80# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

子应用 1 Dockerfile

在 sub-app-1 目录下创建 Dockerfile:

# Build stage
FROM node:18 AS build# Set the working directory
WORKDIR /app# Copy the package.json and package-lock.json files
COPY package*.json ./# Install dependencies
RUN npm install# Copy the rest of the application code
COPY . .# Build the application
RUN npm run build# Production stage
FROM nginx:alpine# Copy the built files from the build stage
COPY --from=build /app/build /usr/share/nginx/html# Copy the Nginx configuration file
COPY nginx.conf /etc/nginx/nginx.conf# Expose port 80
EXPOSE 80# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

子应用 2 Dockerfile

在 sub-app-2 目录下创建 Dockerfile:

# Build stage
FROM node:18 AS build# Set the working directory
WORKDIR /app# Copy the package.json and package-lock.json files
COPY package*.json ./# Install dependencies
RUN npm install# Copy the rest of the application code
COPY . .# Build the application
RUN npm run build# Production stage
FROM nginx:alpine# Copy the built files from the build stage
COPY --from=build /app/build /usr/share/nginx/html# Copy the Nginx configuration file
COPY nginx.conf /etc/nginx/nginx.conf# Expose port 80
EXPOSE 80# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

3. 创建 Nginx 配置文件

为每个应用创建一个 Nginx 配置文件 nginx.conf。

主应用 Nginx 配置文件

在 main-app 目录下创建 nginx.conf:

server {listen 80;server_name localhost;location / {root /usr/share/nginx/html;index index.html index.htm;try_files $uri $uri/ /index.html;}location /main/sub-app-1/ {proxy_pass http://localhost:7100/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}location /main/sub-app-2/ {proxy_pass http://localhost:7200/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}

子应用 1 和子应用 2 Nginx 配置文件

在 sub-app-1 和 sub-app-2 目录下分别创建 nginx.conf:

server {listen 80;server_name localhost;location / {root /usr/share/nginx/html;index index.html index.htm;try_files $uri $uri/ /index.html;}
}

4. 构建和运行 Docker 容器

在每个应用的目录下,运行以下命令构建 Docker 镜像:

docker build -t main-app .
docker build -t sub-app-1 .
docker build -t sub-app-2 .

然后运行 Docker 容器:

docker run -d -p 8000:80 main-app
docker run -d -p 7100:80 sub-app-1
docker run -d -p 7200:80 sub-app-2

5. 部署到腾讯云 CentOS 7.6 服务器

  1. 连接到腾讯云服务器:
    使用 SSH 连接到你的腾讯云 CentOS 7.6 服务器。
ssh your-username@your-server-ip
  1. 安装 Docker:
    如果你的服务器上还没有安装 Docker,可以使用以下命令安装:
sudo yum update -y
sudo yum install -y docker
sudo systemctl start docker
sudo systemctl enable docker
  1. 将 Docker 镜像推送到 Docker Hub:
    在本地机器上,将构建的 Docker 镜像推送到 Docker Hub:
docker tag main-app your-dockerhub-username/main-app
docker tag sub-app-1 your-dockerhub-username/sub-app-1
docker tag sub-app-2 your-dockerhub-username/sub-app-2docker push your-dockerhub-username/main-app
docker push your-dockerhub-username/sub-app-1
docker push your-dockerhub-username/sub-app-2
  1. 在服务器上拉取并运行 Docker 镜像:
    在服务器上,拉取并运行 Docker 镜像:
docker pull your-dockerhub-username/main-app
docker pull your-dockerhub-username/sub-app-1
docker pull your-dockerhub-username/sub-app-2docker run -d -p 8000:80 your-dockerhub-username/main-app
docker run -d -p 7100:80 your-dockerhub-username/sub-app-1
docker run -d -p 7200:80 your-dockerhub-username/sub-app-2

通过这些步骤,你可以在 Node.js 18 环境下,用 React 18 创建一个基于 qiankun 的主应用和两个子应用,并使用 Nginx 作为静态文件服务器,部署到腾讯云 CentOS 7.6 服务器的 8000 端口进行访问。这样可以确保各个应用的隔离性和独立性,同时通过 /main 路由访问子应用。

相关文章:

简单搭建qiankun的主应用和子应用并且用Docker进行服务器部署

在node18环境下&#xff0c;用react18创建qiankun主应用和两个子应用&#xff0c;react路由用V6版本&#xff0c;都在/main路由下访问子应用&#xff0c;用Dockerfile部署到腾讯云CentOS7.6服务器的8000端口进行访问&#xff0c;且在部署过程中进行nginx配置以进行合理的路由访…...

Python知识分享第十六天

“”" 故事7: 小明把煎饼果子技术传给徒弟的同时, 不想把独创配方传给他, 我们就要加私有. 问: 既然不想让子类用, 为什么要加私有? 答: 私有的目的不是不让子类用, 而是不让子类直接用, 而必须通过特定的 途径或者方式才能使用. 大白话: ATM机为啥要设计那么繁琐, 直接…...

管家婆财贸ERP BR045.大类存货库存数量明细表

最低适用版本&#xff1a; C系列 23.8 插件简要功能说明&#xff1a; 库存数量明细表支持按存货展示数据更多细节描述见下方详细文档 插件操作视频&#xff1a; 进销存类定制插件--大类存货库存数量明细表 插件详细功能文档&#xff1a; 应用中心增加菜单【大类存货库存数…...

Pytorch-GPU版本离线安装

最近在复现一项深度学习的工作&#xff0c;发现自己的pytorch是装的cpu版的(好像当时是直接加清华源&#xff0c;默认是cpu版本&#xff09;。从官网在线下载速度太慢&#xff0c;还时不时断开连接&#xff0c;我们可以配置conda的清华源去这个问题&#xff0c;但是考虑到是在用…...

k8s 1.28 二进制安装与部署

第一步 &#xff1a;配置Linux服务器 #借助梯子工具 192.168.196.100 1C8G kube-apiserver、kube-controller-manager、kube-scheduler、etcd、kubectl、haproxy、keepalived 192.168.196.101 1C8G kube-apiserver、kube-controller-manager、kube-scheduler、etcd、kubectl、…...

【C语言】扫雷游戏(一)

我们先设计一个简单的9*9棋盘并有10个雷的扫雷游戏。 1&#xff0c;可以用数组存放&#xff0c;如果有雷就用1表示&#xff0c;没雷就用0表示。 2&#xff0c;排查(2,5)这个坐标时&#xff0c;我们访问周围的⼀圈8个位置黄色统计周围雷的个数是1。排查(8,6)这个坐标时&#xf…...

二分法篇——于上下边界的扭转压缩间,窥见正解辉映之光(1)

前言 二分法&#xff0c;这一看似简单却又充满哲理的算法&#xff0c;犹如一道精巧的数学之门&#xff0c;带领我们在问题的迷雾中找到清晰的道路。它的名字虽简单&#xff0c;却深藏着智慧的光辉。在科学的浩瀚星空中&#xff0c;二分法如一颗璀璨的星辰&#xff0c;指引着我们…...

# 01_Python基础到实战一飞冲天(三)--python面向对象(一)--简单类

01_Python基础到实战一飞冲天&#xff08;三&#xff09;–python面向对象&#xff08;一&#xff09;–简单类 一、面向对象-01-基本概念 1、面向对象(OOP) 面向对象编程 —— Object Oriented Programming 简写 OOP。 2、面向对象(OOP) 学习目标 了解 面向对象 基本概念…...

sentinel使用手册

1.引入依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-sentinel</artifactId></dependency>2.yaml spring:cloud:sentinel:transport:dashboard: localhost:8090 #sentinel控制台地址…...

搜索二维矩阵 II(java)

题目描述 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 代码思路&#xff1a; 用暴力算法&#xff1a; class Solution {public boolean searchMatrix(…...

Python语法基础(四)

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 高阶函数之map 高阶函数就是说&#xff0c;A函数作为B函数的参数&#xff0c;B函数就是高阶函数 map&#xff1a;映射 map(func,iterable) 这个是map的基本语法&#xff0c;…...

03_Django视图

三、Django模板 模板Templates 在Django框架中&#xff0c;模板是可以帮助开发者快速生成呈现给用户页面的工具 模板的设计方式实现了我们MVT中VT的解耦(M:Model&#xff0c;V:View&#xff0c;T:Template)&#xff0c;VT有着N:M的关系&#xff0c;一个V可以调用任意T&#xf…...

如何从 Hugging Face 数据集中随机采样数据并保存为新的 Arrow 文件

如何从 Hugging Face 数据集中随机采样数据并保存为新的 Arrow 文件 在使用 Hugging Face 的数据集进行模型训练时&#xff0c;有时我们并不需要整个数据集&#xff0c;尤其是当数据集非常大时。为了节省存储空间和提高训练效率&#xff0c;我们可以从数据集中随机采样一部分数…...

11 设计模式之代理模式(送资料案例)

一、什么是代理模式&#xff1f; 在现实生活中&#xff0c;我们常常遇到这样的场景&#xff1a;由于某些原因&#xff0c;我们可能无法亲自完成某个任务&#xff0c;便会委托他人代为执行。在设计模式中&#xff0c;代理模式 就是用来解决这种“委托”问题的&#xff0…...

MongoDB聚合操作

1.聚合操作 聚合操作处理数据记录并返回计算结果。聚合操作组值来自多个文档&#xff0c;可以对分组数据执行各种操作以返回单个结果。聚合操作包含三类&#xff1a;单一作用聚合、聚合管道、MapReduce。 单一作用聚合&#xff1a;提供了对常见聚合过程的简单访问&#xff0c…...

第二十三周周报:High-fidelity Person-centric Subject-to-Image Synthesis

目录 摘要 Abstract TDM SDM SNF 测试时的人物细节捕捉 主要贡献 总结 摘要 本周阅读了一篇2024年CVPR的关于高保真度、以人物为中心的图像合成方法的论文&#xff1a;High-fidelity Person-centric Subject-to-Image Synthesis。该论文提出了一种名为Face-diffuser的…...

Cesium 与 Leaflet:地理信息可视化技术比较

在现代地理信息系统(GIS)和空间数据可视化领域,Cesium 和 Leaflet 是两种非常常见的地理可视化库,它们各自适用于不同的应用场景。Cesium 专注于三维地球视图和复杂空间分析,而 Leaflet 则注重轻量级的二维地图展示。本文将对这两种技术进行详细的对比,帮助开发者根据具体…...

Linux 服务器使用指南:诞生与演进以及版本(一)

一、引言 在当今信息技术的浪潮中&#xff0c;Linux 操作系统无疑是一个关键的支柱&#x1f60e;。无论是在服务器管理、软件开发还是大数据处理领域&#xff0c;Linux 都以其卓越的适应性和优势脱颖而出&#x1f44d;。然而&#xff0c;对于许多新手而言&#xff0c;Linux 系统…...

龙蜥 Linux 安装 JDK

龙蜥 Linux 安装 JDK 下载安装解压到目标路径设置环境变量直接在启动脚本中临时设置 参考资料 下载 这个就不赘述了&#xff0c;参考资料中的另外两篇安装帖&#xff0c;都有。 如果不能上网&#xff0c;也可以去内网其他之前装过JDK的服务器&#xff0c;直接复制过来。 tar …...

Python小白语法基础20(模块与包)

0) 参考文章 python的模块(module)、包(package)及pip_python package-CSDN博客Python之函数、模块、包库_python函数、模块和包-CSDN博客Python函数模块自定义封装及模块嵌套导入&#xff08;手把手教程&#xff09;_python如何封装一个模块-CSDN博客 1) 模块与包说明 软件…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...