@bornkiller
2018-01-03T18:49:44.000000Z
字数 3457
阅读 2310
前端实践
开发迭代项目逐步壮大,项目间共享代码就变得尤为重要。常用的框架/类库完全没必要在每个种子项目内管理,企业内部产出的公共模块也需要有合理的共享机制,避免重复开发投入。曾经使用 bower
来管理下载内部公共模块,但稳定性,易用性都有所缺失。时过境迁,使用 NPM
管理前端代码已经是业界趋势。企业内部使用 NPM
私服,方便公司内部共享公共模块,提升内网包安装速度。本文记录一下搭建过程,帮助大家规避可能的问题。
cnpmjs.org
- 阿里开源的企业级 NPM
解决方案Mariadb
Nginx
基本流程参照官方wiki,https://github.com/cnpm/cnpmjs.org/wiki/Deploy 即可完成,不再赘述,下文只谈及搭建过程中遇到的坑与解决方案。
官方源同步过程中,如果描述信息包含 emoji
等特殊字符,会导致无法入库,造成同步失败。开发环境下,无法通过私服安装成功,例如 styled-components
。解决方案非常明确,修改 Mariadb
字符集配置,创建库表时,显式声明字符集。
修改配置文件:
[client]
default-character-set = utf8mb4
[mysql]
default-character-set = utf8mb4
[mysqld]
character-set-client-handshake = FALSE
character-set-server = utf8mb4
collation-server = utf8mb4_unicode_ci
创建数据库:
# 显式声明库字符集
create database cnpmjs CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
# 显式声明表字符集
CREATE TABLE IF NOT EXISTS `user` (
.......
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='user base info';
cnpmjs.org
提供初始化 SQL
脚本 docs/db.sql
,需要多处调整编码声明,详细内容参照 https://gist.github.com/bornkiller/739b60a5eef8d52f52e70b7228297a12
。
数据库配置完毕,然后需要调整 cnpmjs.org
数据库连接编码,关键部分如下:
{
dialect: 'mariadb',
dialectOptions: {
charset: 'utf8mb4',
collate: 'utf8mb4_unicode_ci'
}
}
到此为止,特殊字符能够正常入库,同步得以正常进行。
私服重启过程中,可能遇到数据库无法连接的状况,此处完全使用简单方案,通过套接字路径连接,关键部分如下:
{
dialect: 'mariadb',
dialectOptions: {
socketPath: '/var/lib/mysql/mysql.sock' // 指定套接字文件路径
}
}
默认配置下,私服仅可本机访问,无法对外提供服务。当然可以通过调整 cnpmjs.org
配置来实现,最好使用 Nginx
反向代理,方便后续做发布权限管理,推荐配置如下:
server
{
listen 80;
server_name *.*.*;
location /
{
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_connect_timeout 60;
proxy_send_timeout 60;
proxy_read_timeout 60;
proxy_pass http://127.0.0.1:7001;
}
}
系统防火墙会拦截掉部分网络请求,导致无法对外提供服务,只需要调整防火墙规则即可:
firewall-cmd --get-active-zones;
firewall-cmd --zone=public --add-port=80/tcp --permanent;
firewall-cmd --reload;
私服搭建完毕,需要配置安装源到私服,执行如下命令:
# 修改NPM配置
npm config set registry "http://registry.location.com";
如果使用 yarn
,执行相同操作:
yarn config set registry "http://registry.location.com";
安装 package
过程中,可能会下载第三方资源,由于国内网络不稳定,需要使用国内镜像提升下载速度,部分支持环境变量,部分支持 .npmrc
配置内容。
修改 .npmrc
配置内容如下:
# 使用npm
npm config set disturl "https://npm.taobao.org/dist";
npm config set phantomjs_cdnurl "http://npm.taobao.org/mirrors/phantomjs";
npm config set chromedriver_cdnurl "http://npm.taobao.org/mirrors/chromedriver";
npm config set operadriver_cdnurl "http://npm.taobao.org/mirrors/operadriver";
# 使用yarn
yarn config set disturl "https://npm.taobao.org/dist";
yarn config set phantomjs_cdnurl "http://npm.taobao.org/mirrors/phantomjs";
yarn config set chromedriver_cdnurl "http://npm.taobao.org/mirrors/chromedriver";
yarn config set operadriver_cdnurl "http://npm.taobao.org/mirrors/operadriver";
配置环境变量如下:
# ~/.bash_profile
export ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/;
export SQLITE3_BINARY_SITE=http://npm.taobao.org/mirrors/sqlite3;
export SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass;
export PYTHON_MIRROR=http://npm.taobao.org/mirrors/python;
export PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org;
至此,NPM
私服配置完毕,安装过程耗时基本可以接受。
cnpmjs.org
自身权限管控非常薄弱,因此当前发布权限全部回收,仅限管理员能够发布。发布前,详细检查 package.json
,README.md
等文件,保障新老开发都能够轻松使用。
为与官方源做出区别,内部发布全部采用 scope package
方式,默认启用 @universal/***
,发布企业级公共模块。部分项目规模较大,可以考虑采纳分割为多个子模块的方式,以项目名作为 scope name
,方便持续迭代。
私服基本搭建完毕,时间匆忙,当前存在以下问题:
break change
发布无法通知到依赖模块及其维护人员,导致多版本混乱;code review
,持续集成,发布环节比较割裂;上述问题,将在后续迭代中进行处理。
本文记录搭建私服的所遇所闻,用以帮助大家规避可能遇到问题。搭建私服只是企业内部代码共享的第一步,所谓路漫漫其修远兮,优化整体结构,推动开发丰富完善私服库,将是长远的任务,谨与大家共勉。