- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
作者:京东科技 高飞 。
本文旨在通过部署微前端项目的实践过程中沉淀出一套部署方案,针对 项目分别部署在不同的服务器上的场景 ,就一些重点步骤、碰到的问题做了一些总结.
因为线上部署主应用时需要用到子应用的线上可访问地址,因此部署顺序应该是先部署子应用,保证子应用能够线上可访问后,再将子应用的线上可访问地址配置到主应用,最后再将主应用部署到线上环境.
线上环境部署统一用master分支的代码 。
主应用csd-tech-main-app基于ant-design-pro,需要在config目录中配置微前端项目的访问地址.
在config目录下配置config.test.ts用于测试环境的打包配置,生产环境打包配置放在在config.prod.ts中。由于本次部署是在本地机器测试部署,因此子应用访问地址都用localhost,如果部署到测试环境,或者生产环境,可以换成对应的访问地址.
// config/config.test.ts 用于本地或者测试环境构建测试
export default defineConfig({
define: {
DATALINK_MICRO_APP_HOST: '//localhost:8888', // 本地环境调度系统访问地址
DATAX_MICRO_APP_HOST: '//localhost:9528', // 本地环境数据迁移系统访问地址
LABEL_SYSTEM_MICRO_APP_HOST: '//localhost:8080', // 本地环境标签系统访问地址
KINESISLINK_MICRO_APP_HOST: '//localhost:6001', // 本地环境监控系统访问地址
},
})
// config/config.prod.ts 用于生产环境构建测试
export default defineConfig({
define: {
DATALINK_MICRO_APP_HOST: 'xxxx', // 生产环境调度系统访问地址
DATAX_MICRO_APP_HOST: 'xxxx', // 生产环境数据迁移系统访问地址
LABEL_SYSTEM_MICRO_APP_HOST: 'xxxx', // 生产环境标签系统访问地址
KINESISLINK_MICRO_APP_HOST: 'xxxx', // 生产环境监控系统访问地址
},
});
然后,我们需要在微应用注册信息中,将我们加载微应用的地址换成我们配置的地址,代码实现如下:
// src/app.tsx
const microAppsOptions = [
{
name: 'datalink',
entry: DATALINK_MICRO_APP_HOST,
container: '#subapp-container',
loader,
activeRule: '/datalink',
className: 'data-link-child-app',
},
{
name: 'datax',
entry: DATAX_MICRO_APP_HOST,
container: '#subapp-container',
loader,
activeRule: '/datax',
className: 'datax-child-app',
},
{
name: 'label-system',
entry: LABEL_SYSTEM_MICRO_APP_HOST,
container: '#subapp-container',
loader,
activeRule: '/label-system',
className: 'label-child-app',
},
];
最后,我们在package.json中,通过不同的命令区分不同环境,代码实现如下:
"scripts": {
// ....其他配置
// 生产环境打包命令
"build": "cross-env REACT_APP_ENV=prod UMI_ENV=prod umi build",
// 测试环境打包命令
"build:test": "cross-env REACT_APP_ENV=test UMI_ENV=test umi build",
// 生产环境打包命令
"build:prod": "cross-env REACT_APP_ENV=prod UMI_ENV=prod umi build",
// ...其他配置
}
在配置完成后,我们在命令行运行如下命令,将主应用构建打包:
rm -f -r node_modules // 如果部署到真实环境,删除旧的依赖包
yarn install // 或者 npm install
// 本地测试部署,用测试环境命令打包, 如果是生产环境打包,直接用yarn build 或者 npm run build
yarn build:test // 或者 npm run build:test
在构建打包完成后,我们将构建好的dist目录移动到nginx配置根目录下的html目录下,并重命名为csd-tech-main-app,目录结构如下(见下图) 。
到这里,我们的主应用就构建打包好了,接下来我们介绍各个微应用构建打包过程.
进入项目目录,直接使用打包命令构建打包即可,在命令行运行:
rm -f -r node_modules // 如果部署到真实环境,删除旧的依赖包
yarn install // 或者 npm install
yarn build // 或者 npm run build
在构建打包完成后,我们将构建好的dist目录移动到nginx配置目录下的html目录下,并重命名为datalink,目录结构如下(见下图) 。
进入项目目录,直接使用打包命令构建打包即可,在命令行运行:
rm -f -r node_modules // 如果部署到真实环境,删除旧的依赖包
yarn install // 或者 npm install
yarn build // 或者 npm run build
在构建打包完成后,我们将构建好的dist目录移动到nginx配置目录下的html目录下,并重命名名为datax,目录结构如下(见下图) 。
进入项目目录,直接使用打包命令构建打包即可,在命令行运行:
rm -f -r node_modules // 如果部署到真实环境,删除旧的依赖包
yarn install // 或者 npm install
yarn build // 或者 npm run build
在构建打包完成后,我们将构建好的dist目录移动到nginx配置目录下的html目录下,并重命名名为label-system,目录结构如下(见下图) 。
在将我们的主应用和微应用全部打包完成后,我们将介绍如何使用Nginx完成微前端架构的部署.
Nginx部署方案是可以作为生产方案使用的.
配置时有三点注意事项:
•搭建nginx服务之前,保证所用到的端口是空闲 。
•子应用和主应用的nginx配置基本上是一致的,唯一不同的是子应用需要配置允许跨域访问。这是因为我们的微前端架构需要通过ajax请求子应用资源,所以需要配置跨域,通过同源策略的限制.
•子应用和主应用所用到接口地址都需要在nginx配置代理 。
本地测试nginx服务配置如下:
worker_processes 1; # Nginx 进程数,一般设置为和 CPU 核数一样
events {
worker_connections 1024; # 每个进程允许最大并发数
}
error_log /usr/local/etc/nginx/logs/error.log; # 错误日志路径
error_log /usr/local/etc/nginx/logs/error.log notice; # 错误日志路径
error_log /usr/local/etc/nginx/logs/error.log info; # 错误日志路径
http {
include mime.types; # 文件扩展名与类型映射表
default_type application/octet-stream; # 默认文件类型
server {
set $root "/usr/local/etc/nginx/html"; # 设置静态文件目录的绝对路径,该变量根据个人的项目配置有所不同
listen 8000; # 配置监听的端口
server_name localhost; # 配置的域名,目前是本地测试,所以直接使用 localhost
location / {
root $root/csd-tech-main-app; # 网站根目录,这里选用主应用构建后的文件目录
index index.html; # 默认首页文件
try_files $uri $uri/index.html /index.html; # 兼容 history 路由模式,找不到的文件直接重定向到 index.html
expires -1; # 首页一般没有强制缓存
add_header Cache-Control no-cache;
}
location ~*\.(js|css|png|jpg|jpeg|gif|ico)$ {
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';
root $root/csd-tech-main-app;
expires 30d;
}
location /api {
proxy_pass http://xxxxxx;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
}
location /dolphinscheduler {
proxy_pass http://xxxxxxxx;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
}
location /labelapi {
proxy_pass http://xxxxxx;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
rewrite ^/labelapi/(.*)$ /api/$1 break;
}
location /webhdfs {
proxy_pass http://xxxxxxx;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
}
}
server {
set $root "/usr/local/etc/nginx/html"; # 设置静态文件目录的绝对路径,该变量根据个人的项目配置有所不同
listen 8888; # 配置监听的端口
server_name localhost; # 配置的域名,目前是本地测试,所以直接使用 localhost
location / {
root $root/data-link; # 网站根目录
index index.html; # 默认首页文件
try_files $uri $uri/index.html /index.html; # 兼容 history 路由模式,找不到的文件直接重定向到 index.html
expires -1; # 首页一般没有强制缓存
add_header Cache-Control no-cache;
add_header "Access-Control-Allow-Origin" $http_origin; # 全局变量获得当前请求origin,带cookie的请求不支持*
add_header "Access-Control-Allow-Methods" "*"; # 允许请求方法
add_header "Access-Control-Allow-Headers" "*"; # 允许请求的 header
}
location ~*\.(js|css|png|jpg|jpeg|gif|ico)$ {
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';
root $root/data-link;
expires 30d;
}
location /dolphinscheduler {
proxy_pass http://xxxxxxxx;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
}
location /webhdfs {
proxy_pass http://xxxxxxxxx;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
}
}
server {
set $root "/usr/local/etc/nginx/html"; # 设置静态文件目录的绝对路径,该变量根据个人的项目配置有所不同
listen 9528; # 配置监听的端口
server_name localhost; # 配置的域名,目前是本地测试,所以直接使用 localhost
location / {
root $root/datax; # 网站根目录
index index.html; # 默认首页文件
try_files $uri $uri/index.html /index.html @rewrites; # 兼容 history 路由模式,找不到的文件直接重定向到 index.html
expires -1; # 首页一般没有强制缓存
add_header Cache-Control no-cache;
add_header "Access-Control-Allow-Origin" $http_origin; # 全局变量获得当前请求origin,带cookie的请求不支持*
add_header "Access-Control-Allow-Methods" "*"; # 允许请求方法
add_header "Access-Control-Allow-Headers" "*"; # 允许请求的 header
}
location ~*\.(js|css|png|jpg|jpeg|gif|ico)$ {
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';
root $root/datax;
expires 30d;
}
location /api {
proxy_pass http://xxxxxxxx;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
}
}
server {
set $root "/usr/local/etc/nginx/html"; # 设置静态文件目录的绝对路径,该变量根据个人的项目配置有所不同
listen 8080; # 配置监听的端口
server_name localhost; # 配置的域名,目前是本地测试,所以直接使用 localhost
location / {
root $root/label-system; # 网站根目录
index index.html; # 默认首页文件
try_files $uri $uri/index.html /index.html; # 兼容 history 路由模式,找不到的文件直接重定向到 index.html
expires -1; # 首页一般没有强制缓存
add_header Cache-Control no-cache;
add_header "Access-Control-Allow-Origin" $http_origin; # 全局变量获得当前请求origin,带cookie的请求不支持*
add_header "Access-Control-Allow-Methods" "*"; # 允许请求方法
add_header "Access-Control-Allow-Headers" "*"; # 允许请求的 header
}
location ~*\.(js|css|png|jpg|jpeg|gif|ico)$ {
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';
root $root/label-system;
expires 30d;
}
location /labelapi {
proxy_pass http://xxxxxxxx;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
rewrite ^/labelapi/(.*)$ /api/$1 break;
}
}
server {
set $root "/usr/local/etc/nginx/html"; # 设置静态文件目录的绝对路径,该变量根据个人的项目配置有所不同
listen 6001; # 配置监听的端口
server_name localhost; # 配置的域名,目前是本地测试,所以直接使用 localhost
location / {
root $root/kinesislink; # 网站根目录
index index.html; # 默认首页文件
try_files $uri $uri/index.html /index.html; # 兼容 history 路由模式,找不到的文件直接重定向到 index.html
expires -1; # 首页一般没有强制缓存
add_header Cache-Control no-cache;
add_header "Access-Control-Allow-Origin" $http_origin; # 全局变量获得当前请求origin,带cookie的请求不支持*
add_header "Access-Control-Allow-Methods" "*"; # 允许请求方法
add_header "Access-Control-Allow-Headers" "*"; # 允许请求的 header
}
location ~*\.(js|css|png|jpg|jpeg|gif|ico)$ {
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';
root $root/kinesislink;
expires 30d;
}
location /ksapi {
proxy_pass http://xxxxxxxx;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
rewrite ^/ksapi/(.*)$ /api/$1 break;
}
location /2.0 {
proxy_pass http://xxxxxxxx;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
}
location /3.0 {
proxy_pass http://xxxxxxxxx;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
}
location /dolphinscheduler {
proxy_pass http://xxxxxxxxxx;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
}
}
}
在配置完成后,我们需要重启一下nginx服务.
输入nginx启动命令启动nginx 。
在浏览器中访问主应用测试地址localhost:8000,登录后如下图:
在浏览器中访问datalink子应用测试地址localhost:8888,登录后如下图:
在浏览器中访问datax子应用测试地址localhost:9528, 登录后如下图:
在浏览器中访问标签系统子应用测试地址localhost:8080, 登录后如下图:
至此,nginx服务部署大功告成! 。
如果需要把服务部署到真实服务器,只需要把所有的 localhost 都换成真实注册的域名即可,其他配置都可以复用! 。
最后此篇关于微前端项目部署方案的文章就讲到这里了,如果你想了解更多关于微前端项目部署方案的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我在 *.sql 文件中得到了我的数据库转储(表、函数、触发器等)。此时我正在通过 jenkins 部署它们,通过传递执行 shell 命令: sudo -u postgres psql -d my_
我正在使用网络部署 API 来部署网络包(.zip 文件,由 MSDeploy.exe 创建)以编程方式将包发布到服务器(在发布包之前我们需要做一些其他事情这就是为什么我们不使用 MSDeploy.e
我们正在使用 Web Deploy 3 的(几乎完全未记录的)“公共(public) API”来创建我们网站的 .zip 包,然后将其同步到服务器: DeploymentBaseOptions des
将 clojure 应用程序制作成可执行文件的最简单方法是什么,例如 http://rawr.rubyforge.org/ ruby 吗? (exe 和 app 文件也是) 最佳答案 使用 leini
是否可以下载 Android 源代码并针对任何设备进行编译? 我想做的是尝试 GSM 代码部分并编译操作系统并将其部署到我的摩托罗拉手机上。 谢谢! 最佳答案 是的,但这很难,因为大多数手机不共享驱动
我正在考虑用 c/c++ 编写需要在大多数个人计算机上运行的 nbody 样式模拟。本质上是一个 O(n^2) 粒子模拟器。 因为这需要相当用户友好,所以我希望有 1 个不需要用户安装任何东西的 Wi
需要了解 kubernetes 部署中 kube_deployment_status_replicas 和 kube_deployment_spec_replicas 指标的区别 最佳答案 简而言之,
我正在尝试使用分类器部署 Maven Artifact 。由于我需要源代码和 JAR(我从 GWT 使用它),我想获得 artifact-version-classifier.jar 和 artifa
我设置部署以将我的项目代码与存储我的网站的 FTP 服务器上的项目同步。 但是,每次尝试同步时,我总是必须登录。 我什至检查了记住,但它不起作用! 我正在使用最新的 PhpStorm 2017.1.4
我在 Visual Studio 2008 中开发了一个 ASP.NET 网站。现在我想在其他机器上部署它。我怎样才能做到这一点??就像我们为 Windows 应用程序制作安装包一样,我们可以为 AS
将 QT 框架添加到我的 .app 包中 我正在关注 Qt 站点上关于部署的文档。 我创建了一个名为 HTTPClient.app 的应用程序 我在 Contents 下创建了 Framework 文
这个问题不太可能对任何 future 的访客有帮助;它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况相关,通常不适用于互联网的全局受众。如需帮助使这个问题更广泛适用,visit the h
我正在研究改变我目前创建营销网站的策略。目前,我完全用 PHP 从头开始构建网站,使用一个简单的包含系统。所有代码(以及内容)都存储在文件(而不是数据库)中,允许我使用 Subversion 进行
我有一个长期运行的服务(在 while 1 循环中)并通过 GCloud pub/sub 处理有效负载,之后它将结果写入数据库。 该服务不需要监听任何端口。 Kind=Deployment 的声明性
似乎部署已停滞不前。我该如何进一步诊断? kubectl rollout status deployment/wordpress Waiting for rollout to finish: 2 ou
我正在Dart中使用前端的Angular和后端的Shelf构建一个客户端/服务器应用程序。当我执行pub build时,它会按预期生成Dart文件的javascript,但不会替换HTML文件中的Da
我在 Azure 部署中心的下拉列表中看不到我的所有 Github 组织存储库。 Azure 很久以前就已经被授权了,下拉列表正确地显示了所有的存储库,直到上周我在 DevOps 中玩游戏时,不得不再
我认为标题几乎说明了一切...对于 Deployd 来说是全新的,所以任何关于如何最好地实现这一点的指示都值得赞赏。 最佳答案 要获取用户创建的集合中的对象(我假设您使用的是 javascript 库
我有一个试图用于CD服务器的部署脚本,但是在编写bash脚本以完成一些所需的步骤(例如运行npm和迁移命令)时遇到了问题。 我将如何从该脚本进入容器bash,运行下面的命令,然后退出以完成对更改的提取
我想在使用 kubectl 时将参数传递给 Kubernetes 部署命令应用部署文件。 示例:在我的部署 .yaml 中,我有如下参数,我想在使用 kubectl apply - f .yaml 运
我是一名优秀的程序员,十分优秀!