background

In the process of front-end development, a series of ICONS are needed, and using Iconfont can greatly facilitate development and reduce HTTP requests. However, Alibaba’s Iconfont platform is for personal account login management, which is not conducive to the standardization and unified management of the company level. Therefore, many companies will not rely too much on third-party platforms. This requires us to build our own iconfont platform for the company. According to a period of investigation, qunar’s Iconfont platform Yicon and Github’s open source project Nicon are both deployable open source Iconfont platforms, which can be deployed on the Intranet to connect to the unified login system of the company. The construction of Yicon is relatively simple and can be referred to the official website. This article only provides my own experience for the construction of NICon.

First, environmental requirements

  1. Nicon project source code;
  2. Nodejs v8.17.0;
  3. NPM > = 6.13.4;
  4. 3.2 + mogodb;
  5. Redis 3.2 +;

Second, environment building

1) mongodb database

1. Install platform dependency packages:

sudo yum install libcurl openssl
Copy the code

2. Download mongodb:

Wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-ubuntu1604-4.4.2.tgz # download the tar ZXVF. - /usr/local/mongodb4 /usr/local/mongodb4 /usr/local/mongodb4Copy the code

3. Configure environment variables

~/.bashrc: Export PATH=<mongodb-install-directory>/bin:$PATH eg: export PATH=/usr/local/mongodb4/bin:$PATH Restart the configuration file to make it take effect: Source. bashrc how to use mongodbCopy the code

2) Establishment of Redis service

1. Download the redis

You can download the corresponding version according to the official version number; Wget HTTP: / / http://download.redis.io/releases/redis-6.0.9.tar.gzCopy the code

2. Copy redis to the specified directory

Cp redis - 3.0.0. Rar. Gz/usr/localCopy the code

3. Decompress the source package

The tar - ZXVF redis - 6.0.9. Tar. GzCopy the code

4. Go to the directory and compile

CD /usr/local/redis-6.0.9 make PREFIX=/usr/local/redis installCopy the code

5. Copy the configuration file

CD /usr/local/redis cp /usr/local/redis-6.0.9/redis.conf /usr/local/redis/binCopy the code

6. Start the Redus service

You are advised to configure the following environment variables: export PATH=<redis-install-directory>/bin:$PATH Front-end startup mode:./redis-server Back-end startup mode: To modify the redis.conf configuration file, daemonize yes Start redis-server./redis.conf in back-end modeCopy the code

7. Connect to redis

redis-cli  
Copy the code

8. Close the redis

Redis - cli shutdown pkill redis server boot from starting vim/etc/rc. Local / / add/usr/local/redis/bin/redis server. - /usr/local/redis/etc/redis-confCopy the code

3) Project launch

Git clone [email protected]:bolin -l/NPM install (or yarn installCopy the code

4) Modify the configuration

# bin/start.sh rename start_example.sh in bin to 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'; After configuring the mongodb database and redis service, the project configuration is nearly half completed. At this point, the project can be started to check the effect.Copy the code

5) Configure login

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

The default format is {login}_{upload}. By default, the project supports two login modes, default and github, and two resource uploading modes, default and qiniu. Therefore, productType supports default, default_qiniu, github_default, github_qiniu by default. If you need other login and upload methods, you can choose default and modify the code. When productType has these four values, the third-party service script does not need to be configured.

The third-party service configuration script generates a folder named productType value in the following folder structure, with two files: index.js and config.js. Except for the following folders, all folders generated after the user configuration are ignored.

├ ─ ─ service │ ├ ─ ─ the login │ │ ├ ─ ─ the default │ │ │ ├ ─ ─ config. Js │ │ │ └ ─ ─ index. The js │ │ ├ ─ ─ making │ │ │ ├ ─ ─ config. Js │ │ │ └ ─ ─ index. Js │ │ ├ ─ ─ github_qiniu │ │ │ ├ ─ ─ config. Js │ │ │ └ ─ ─ index. The js │ │ ├ ─ ─ index. The js │ └ ─ ─ the upload │ ├ ─ ─ the default │ │ ├ ─ ─ config. Js │ │ └ ─ ─ index. The js │ ├ ─ ─ github_qiniu │ │ ├ ─ ─ config. Js │ │ └ ─ ─ index. The js │ ├ ─ ─ index. The js │ └ ─ ─ qiniu │ ├ ─ ─ Config. Js │ └ ─ ─ index. JsCopy the code

Note: Tried to customize ldap login configuration, productType= ‘ldap’, created ldap directory under service and created index.js and config.js, found that the project started error, may still need to be configured somewhere in the code, so that the file under LDAP is called during login. If you need to customize the login mode, you can use default.

  • The registration information is written into the mongodb database. Using default login is relatively simple. You only need to configure the upload service to complete the project online.
  • Making three login using making three login, can refer to the article www.ruanyifeng.com/blog/2019/0…
  • Custom login LDAP login: Under development, details need to be added.

6) Upload service

The project supports qiniu uploading by default. You only need to configure related information. Usually, the project must be uploaded to its own server in Intranet deployment, and the upload service needs to be written manually.