NIcon部署指南 - Iconfont平臺

背景

前端開發過程當中，須要用到一系列的icon，使用iconfont可極大的方便開發，減小http請求，可是阿里的iconfont平臺是我的帳號登陸管理，不利於公司層面的規範和統一管理，所以，不少公司都不會過分依賴三方平臺，這就須要咱們爲公司搭建本身的iconfont平臺。根據一段時間的調研，去哪兒研發的iconfont平臺yicon和github的開源項目nicon都是可部署的開源iconfont平臺，可內網部署接公司統一登陸系統。yicon的搭建相對簡單可參考官網，此文只針對nicon的搭建給出本身的經驗。html

1、環境要求

nicon項目源碼；
nodejs v8.17.0(因爲模塊不兼容，node版本超過8以後就出現啓動失敗問題，須要總體升級)；
npm >= 6.13.4；
mogodb 3.2+；
redis 3.2+；

2、環境搭建

1）mongodb數據庫

1. 安裝平臺依賴包：前端

sudo yum install libcurl openssl
複製代碼

2.下載mongodb：node

wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-ubuntu1604-4.4.2.tgz # 下載
tar -zxvf mongodb-linux-x86_64-ubuntu1604-4.2.8.tgz # 解壓

mv mongodb-src-r4.2.8  /usr/local/mongodb4 # 將解壓包拷貝到指定目錄
複製代碼

3. 配置環境變量linux

~/.bashrc:
export PATH=<mongodb-install-directory>/bin:$PATH

eg：export PATH=/usr/local/mongodb4/bin:$PATH
新增後重啓配置文件，使之生效：source .bashrc

mongodb如何使用，可查看網上教程
複製代碼

2）redis服務搭建

1. 下載redisgit

# 可根據官方版本號下載對應版本；
wget http://download.redis.io/releases/redis-6.0.9.tar.gz 
複製代碼

2. 將redis拷貝到指定目錄下github

cp redis-3.0.0.rar.gz /usr/local
複製代碼

3. 解壓源碼包web

tar -zxvf redis-6.0.9.tar.gz 
複製代碼

4. 進入目錄並編譯redis

cd /usr/local/redis-6.0.9
make PREFIX=/usr/local/redis install
複製代碼

5. 拷貝配置文件mongodb

cd /usr/local/redis
cp /usr/local/redis-6.0.9/redis.conf  /usr/local/redis/bin
複製代碼

6. 啓動redus服務數據庫

建議配置下環境變量：
export PATH=<redis-install-directory>/bin:$PATH
前端模式啓動：
./redis-server

後端模式啓動：
修改redis.conf配置文件， daemonize yes 之後端模式啓動
redis-server ./redis.conf
複製代碼

7. 鏈接redis

redis-cli  
複製代碼

8. 關閉redis

redis-cli shutdown
pkill redis-server


開機自啓動
vim /etc/rc.local
//添加
/usr/local/redis/bin/redis-server /usr/local/redis/etc/redis-conf
複製代碼

3）項目啓動

# 克隆項目
git clone git@github.com:bolin-L/nicon.git

# 安裝依賴
cd nicon && npm install（or yarn install）

# 啓動
npm run publish
複製代碼

4）修改配置

# bin/start.sh 將bin下的start_example.sh重命名爲start.sh

#!/bin/bash# mongodb config
export MONGODB_NAME=iconRepo;
export MONGODB_HOST=127.0.0.1;
export MONGODB_PORT=27017;
export MONGODB_USERNAME='';
export MONGODB_PASSWORD='';

# redis
export REDIS_FAMILY=4;
export REDIS_HOST=10.0.10.37;
export REDIS_PORT=6379;
export REDIS_PASSWORD='test12345';
export REDIS_DB=0;

# config your website host
export productHost='10.113.129.163';

# if you want login by github and upload by qiniu, set productType
export productType='default';

# start command
node index.js

配置完mongodb數據庫和redis服務，項目配置完成了近半，此時項目已經能夠啓動查看效果；
複製代碼

5）配置登陸

# if you want login by github and upload by qiniu, set productType
export productType='default';
複製代碼

在4的配置中，有個productType的配置項，該項主要用於配置平臺的登陸和資源上傳，默認格式{login}_{upload}，項目默認支持兩種登陸default、github，支持兩種資源上傳方式default、qiniu，所以默認支持的productType可選值：default、default_qiniu、github_default、github_qiniu。如需其餘的登陸方式和上傳方式可選擇default並自行修改代碼實現。當productType的值爲這4個時，三方服務腳本是不須要配置的。

三方服務配置腳本就在如下的文件夾結構中生成名稱爲productType值的文件夾，有index.js、config.js兩個文件。除了如下的文件夾，用戶配置後生成的文件夾都會被ignore掉。

├── service
│   ├── login
│   │   ├── default
│   │   │   ├── config.js
│   │   │   └── index.js
│   │   ├── github
│   │   │   ├── config.js
│   │   │   └── index.js
│   │   ├── github_qiniu
│   │   │   ├── config.js
│   │   │   └── index.js
│   │   ├── index.js
│   └── upload
│       ├── default
│       │   ├── config.js
│       │   └── index.js
│       ├── github_qiniu
│       │   ├── config.js
│       │   └── index.js
│       ├── index.js
│       └── qiniu
│           ├── config.js
│           └── index.js
複製代碼

注：曾嘗試自定義配置ldap登陸，productType=‘ldap’，在service下創立ldap目錄並新建index.js和config.js，發現項目啓動會報錯，可能仍須要在代碼某處進行配置，讓登陸時調用ldap下的文件，暫未發掘如何自定義配置，若是須要自定義登陸方式，可選用default。

default登陸
使用項目自帶的註冊登陸，需先註冊，註冊信息將寫入mongodb數據庫，使用default方式登陸，相對簡單，只需再配置上傳服務，便可完成整個項目的上線。
github三方登陸
使用github三方登陸，可參考文章www.ruanyifeng.com/blog/2019/0…
自定義登陸
ldap登陸：開發中，詳細內容待補充。

6）上傳服務

項目默認支持qiniu上傳，只需配置下相關信息便可，一般內網部署勢必要上傳到本身的服務器，須要手動編寫上傳服務。