作者：京东科技 高飞
本文旨在通过部署微前端项目的实践过程中沉淀出一套部署方案，针对项目分别部署在不同的服务器上的场景，就一些重点步骤、碰到的问题做了一些总结。
因为线上部署主应用时需要用到子应用的线上可访问地址，因此部署顺序应该是先部署子应用，保证子应用能够线上可访问后，再将子应用的线上可访问地址配置到主应用，最后再将主应用部署到线上环境。
线上环境部署统一用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 都换成真实注册的域名即可，其他配置都可以复用！
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="
假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目？ 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做，或者如果你需要避免为前N个元素构建中间数组，你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit
我正在尝试创建一个带有项目符号字符的Ruby1.9.3字符串。str="•"+"helloworld"但是，当我输入它时，我收到有关非ASCII字符的语法错误。我该怎么做？ 最佳答案 你可以把Unicode字符放在那里。str="\u2022"+"helloworld" 关于ruby-如何在Ruby字符串中插入项目符号字符？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/1195
我的Rails站点使用了一个确实不是很好的gem。每次我需要做一些新的事情时，我最终不得不花费与向实际Rails项目添加代码一样多的时间来为gem添加功能。但我不介意，我将我的Gemfile设置为指向我的gem的GitHub分支(我尝试提交PR，但维护者似乎已经下台)。问题是我真的没有找到一种合理的方法来测试我添加到gem的新东西。在railsc中测试它会特别好，但我能想到的唯一方法是a)更改~/.rvm/gems/.../foo。rb，这看起来不对或者b)升级版本，推送到Github，然后运行bundleup，这除了耗时之外显然是一场灾难，因为我不确定我所做的promise是否正
我有一个应用程序正在从Ruby迁移到JRuby(由于需要通过Java提供更好的Web服务安全支持)。我使用的gem之一是daemons创建后台作业。问题在于它使用fork+exec来创建后台进程，但这对JRuby来说是禁忌。那么-是否有用于创建后台作业的替代gem/wrapper？我目前的想法是只从shell脚本调用rake并让rake任务永远运行......提前致谢，克里斯。更新我们目前正在使用几个与Java线程相关的包装器，即https://github.com/jmettraux/rufus-scheduler和https://github.com/philostler/acts
我一直在尝试使用nanoc用于生成静态网站。我需要组织一个复杂的排列页面，我想让我的内容保持干燥。包含或合并的概念在nanoc系统中如何运作？我已阅读文档，但似乎找不到我想要的内容。例如:我如何获取两个部分内容项并将它们合并到一个新的内容项中。在staticmatic您可以在您的页面中执行以下操作。=partial('partials/shared/navigation')类似的约定在nanoc中如何运作？ 最佳答案 这里是nanoc的作者。在nanoc中，部分是布局。因此，您可以拥有layouts/partials/shared/
我安装了ruby、yeoman，当我运行我的项目时，出现了这个错误:Warning:Running"compass:dist"(compass)taskWarning:YouneedtohaveRubyandCompassinstalledthistasktowork.Moreinfo:https://github.com/gruUse--forcetocontinue.Use--forcetocontinue.我有进入可变session目标的路径，但它不起作用。谁能帮帮我？ 最佳答案 我必须运行这个:geminstallcom