**Verdaccio 是一个轻量级的、可扩展的、私有的 npm registry 服务器，它允许开发人员在本地网络环境中创建和管理自己的 npm packages，从而加速应用程序的开发和部署。使用 Verdaccio，开发人员可以在不将其代码发布到公共 npm registry 上的情况下共享和重用自己的 npm packages。**

**本文将记录 Verdaccio 本地部署方法，以下操作均在Linux环境下进行。**



# 安装
## 1. 创建verdaccio容器
```bash
docker run -it -p 4873:4873  --name verdaccio centos bash
```
## 2. nvm安装
```bash
# 下面两个安装方式，任选其一就行
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash  
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

source ~/.bashrc  
nvm --version  # 可查看nvm版本，说明安装成功
```
## 3. 利用nvm安装node（8.9.1）
```bash
 nvm install v10.16.0  # 安装node的稳定版本（npm会同步当前版本的node）
```

## 4. 安装verdaccio、pm2
```bash
npm install -g verdaccio --registry=https://registry.npm.taobao.org/
npm install -g pm2  --registry=https://registry.npm.taobao.org/
```

## 5. 修改verdaccio-config配置（空格要严格区分，否则无法启动）
配置修改注意：配置项前面多个空格，都无法加载。需严格区分空格

config默认存放路径：/root/.config（需启动一次后才会出现verdacci文件夹）
```bash
verdaccio  # 首次启动自动创建verdacci文件夹，启动后关闭
cd /root/.config/verdaccio  
vi config.yaml   # 修改配置
```
config.yaml修改如下（部分配置需要提前运行命令）
```yaml
# ①.端口号配置
listen:       
 0.0.0.0:4873
# ②.上行链路修改为淘宝镜像源
uplinks:
  taobaojs:
    url:  https://registry.npm.taobao.org/
packages:
  '**':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: taobaojs
# ③.日志配置
# 运行：mkdir log 
# 在verdaccio目录下创建log，存放log日志（不提前创建，会报错）
# tip：到本次修改后，pm2 start verdaccio开启服务，查看服务是否正常启动
logs:
 - {type: rotating-file, format: json, path: /root/.config/verdaccio/log/log.json, level: http, options: {period: 1d, count:3} }
# ④.LDAP配置（禁止命令行注册，LDAP登录，编辑htpasswd创建用户）
# 参数讲解：
# htpasswd如果不加，效果是一样的，禁止注册
# htpasswd添加进去有个好处是，可以通过htpasswd文件创建用户
# LDAP插件安装：
# 运行：npm install -g verdaccio-ldap --registry=https://registry.npm.taobao.org/   全局安装ldap插件
# 查看是否可以成功启动，如果无法启动，尝试
# 运行：npm install verdaccio 
# 运行：npm install
# tip：邮箱全名无法登录，只能使用名字登录，
# 比如chenchongzuan@baishishuju.cn无法登录，使用chenchongzuan可以进行登录
 ldap:
    type: ldap
    client_options:
      url: "ldap://192.168.50.203:389"
      searchBase: "ou=Tech,ou=Users,dc=ankang,dc=com"
      searchFilter: "(uid={{username}})"
      reconnect: true
  htpasswd:
    file: ./htpasswd
    max_users: -1
# ⑤.包权限修改（任何用户均可发布私有包，只有root用户才可以撤销私有包，私有包存放在company路径下）
packages:
  'c-*':
    access: $all
    publish: $authenticated
    unpublish: root
    storage: company
  'company-*':
    access: $all
    publish: $authenticated
    unpublish: root
    storage: company
  '**':
    access: $all
    publish: $authenticated
    unpublish: root
    proxy: taobaojs

```

## 6. Dockerfile启动配置
创建脚本
```bash
vi start.sh
```
start.sh脚本内容如下：
```bash
#!/bin/bash
source ~/.bashrc #（或者尝试source /etc/profile）
pm2 start verdaccio
tail -f /dev/null      
```
修改后，继续执行以下命令
```bash
chmod u+x *.sh # 给予脚本启动权限
./start.sh # 运行./start.sh查看脚本是否可以正常启动
docker commit verdaccio docker/verdaccio # 将verdaccio容器打包成docker/verdaccio镜像
```
编写Dockerfile，Dockerfile内容如下：
```
FROM docker/verdaccio
WORKDIR /root/.config/verdaccio
ENTRYPOINT ["./start.sh"]
```
创建镜像
```bash
docker build -t docker.privete/verdaccio  /dockerFile/verdaccio/ # 以 /dockerFile/verdaccio/下的Dockfile为配置进而创建镜像，镜像名为docker.privete/verdaccio
```
创建容器
```bash
docker run -itd -p 4873:4873  --restart=always -v /opt/verdaccio-registry/storage:/root/.config/verdaccio/storage -v /opt/verdaccio-registry/log:/root/.config/verdaccio/log   --name front-end-registry  docker.privete/verdaccio

# 1.端口映射4873 -d（开启后台进程）
# 2. --restart=always  关闭时，会自动重启，比如进入容器时，exit退出，容器会自动重启，比如docker start -i 进入，退出后，也会自动重启。除非手动stop
# 3.
# 主机的/opt/verdaccio-registry/storage的文件夹映射到容器的/root/.config/verdaccio/storage（包）
# /opt/verdaccio-registry/log的文件夹映射到容器的/root/.config/verdaccio/log（日志）
# 当主机不存在文件夹时，会自动创建
# 4.容器名字为front-end-registry，以 docker.privete/verdaccio镜像为基础
```

--------------------完结--------------------

# 用户权限
packages 权限配置：
- access  没有该权限时，无法下载包和查看包，需登录才能看到包
- publish  没有该权限时，无法发布包
- unpublish 如果unpublish已注释掉，则publish定义将授予或拒绝访问权限。不填写或者值为undefined时，则任何用户，都无法删除

权限：
- root 管理员
- $all 所有人
- $authenticated 登录用户
- $anonymous  匿名用户
- undefined 不填写时，值也为undefined，任何情况下，都无法操作

Verdaccio 本地部署

**easymock是一款后台接口的mock生成平台**

**本文将记录 EasyMock 的本地部署方法，以下操作均在Linux环境下进行**



## 1. 创建容器
```bash
docker run -it --restart=always -p 7300:7300  --name easymock centos
```

## 2. nvm安装
```bash
# 下面两个安装方式，任选其一就行
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash 
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

source ~/.bashrc # 加载环境配置 
nvm --version  # 可查看nvm版本，说明安装成功
```

## 3. 利用nvm安装node（8.9.1）
```bash
nvm install 8.9.1 # 安装8.9.1版本的node（npm会同步当前版本的node）
nvm alias n8 8.9.1 # 将 8.9.1版本的别名设置为n8
nvm use n8   
```

## 4. 拉取easymock源码
```bash
yum install -y git  # 下载git
git clone https://github.com/easy-mock/easy-mock.git # 拉取源码
cd easy-mock && npm install # 安装项目环境依赖包
```

## 5. mongodb(>=3.4)安装
```bash
cd /opt
curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.10.tgz  # 下载压缩包
tar -zxvf mongodb-linux-x86_64-4.0.10.tgz # 解压
mv mongodb-linux-x86_64-4.0.10 /usr/local/mongodb  # 移动
cd / && mkdir data && cd data && mkdir db  # mongodb默认存放位置，需提前创建
```

## 6. redis（>=4.0）安装
```bash
curl -O http://download.redis.io/releases/redis-5.0.5.tar.gz  
tar xzf redis-5.0.5.tar.gz
cd redis-5.0.5
# make命令使用（安装依赖）
yum -y install gcc automake autoconf libtool make
yum install gcc gcc-c++
make   # 安装redis（需等待五六分钟）
mv redis-5.0.5  /usr/local/redis  # 移动
```

## 7. 全局命令
```bash
ln -s /usr/local/mongodb/bin/mongod /usr/bin/mongod
ln -s /usr/local/mongodb/bin/mongo  /usr/bin/mongo
ln -s /usr/local/redis/src/redis-server /usr/bin/redis-server
ln -s /usr/local/redis/src/redis-cli  /usr/bin/redis-cli
mongod  # 若能执行，说明配置成功
redis-server # 若能执行，说明配置成功
```

## 8. 启动数据库
```bash
cd /
vi start.sh
```
将下面内容写进 start.sh
```bash
nohup mongod &
nohup redis-server & 
```
接着运行如下命令，
```bash
chmod u+x *.sh  # 给予权限
./start.sh   # 脚本若能运行，说明启动成功
mongo      # 查看命令是否正常执行
redis-cli   # 查看命令是否正常执行
```

## 9. 部署easymock npm部署
```bash
 cd easy-mock/
 npm run dev # 服务是否可以开启（测试环境）
 npm run build # 打包正式环境
 npm start # 服务是否可以开启（正式环境）
```

## 10. pm2部署easymock
```bash
 npm install pm2 -g  # 安装pm2
 pm2 start app.js  # 服务是否可以正常启动（测试环境，页面初始化较慢，需等待三四分钟）
 pm2 delete 0 # 删除测试环境守护
 vi pm.yml    # 新建pm.yml
 ```
将以下内容写进pm.yml
```yaml
apps:
script: ./app.js
name: easymock
env:
       NODE_ENV: production
       HOST: localhost
env_dev:
     PORT: 3000
```
接着运行以下命令，
```bash
 pm2 start pm.yml   # 以yml方式启动（正式环境）
 pm2 delete 0   # 删除
 vi package.json  # 别名配置
```
修改package.json，在scripts下面添加一段命令
```
"publish": "pm2 start pm.yml"
```
接着运行以下命令，
```bash
 npm run publish   # 部署服务（正式环境）
 ```


--------------------完结--------------------

easymock 本地部署

## 微信浏览器下字体大小变化（导致rem布局错乱）
https://www.cnblogs.com/cassiel/p/7794599.html

## 微信下 SPA 单页 路由跳转至支付页，无法支付问题
```js
export const payWeiXinCompatibleMixin = {
  beforeCreate () {
    if (this.$route.query.reload) return
    let { isIOS, isWechat } = this.$sdk
    if (isIOS && isWechat) {
      let href = location.href
      href += `${href.indexOf('?') === -1 ? '?' : '&'}reload=true`
      location.replace(href)
      location.reload()
    }
  }
}
```

微信浏览器兼容问题

### ios下底部input框被遮挡（第三方输入法还是有问题）

第一步：

父级元素CSS设置：
```css
z-index: 99;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
```
底部子元素CSS设置
```css
z-index: 9999;
position: absolute;
left: 0;
```

第二步：

页面加载时，动态计算top值，此时页面初始化时，底部元素就会被固定在底部
```js
mounted() {
    this.$nextTick(()=>{
        let pageHeight = document.documentElement.clientHeight
        this.top = pageHeight - this.$refs.footer.clientHeight
    })
}
```

第三步：

input获取焦点时，让底部元素在输入法之上
```js
handleFocus() {
    let initBodyHeight = document.body.clientHeight;
    let footerHeight = this.$refs.footer.clientHeight;
    setTimeout(() => {
        let u = navigator.userAgent, app = navigator.appVersion;
        let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        document.body.scrollTop = document.body.scrollHeight;
        if (isIOS && document.body.clientHeight !== initBodyHeight) {
            this.top = initBodyHeight - footerHeight
        }
    }, 300);
}
```



第四步：此情况出现在需要固定的底部元素为子页面时：

例：home元素需要使用fixed布局
```html
<div class="home">
    <router-link to="/publish" class="add"></router-link>
    <div class="content-container"> </div>
    <router-view></router-view>
</div>
```
此时需改变home的样式
```css
position:fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */
height: 100%;
```








IOS 下底部 input 框被遮挡

**一年到头，做下今年的总结，写下明年的期待。
2018年很多事情从无到有，有喜有悲。最开心的是找到了自己愿用一生去守护的人(#^.^#)（手动比心），最难过的是因为个人原因辞去了第一家的工作，毕业前就加入这家公司，有很多聊得来的小伙伴，一起熬夜看世界杯，一起加班，一起吃饭玩耍，希望公司和他们以后都能有更好的发展。还有其余一大堆的事情，就BalaBalaBala**



于2018年10月加入新公司-瀚越太古，期间完成的工作如下：
1. 使用Mpvue完成公司小程序的开发
2. Pc官网的优化
3. 运营后台模块
4. h5开发


部门的小伙伴也很给力，希望一起进步，一起学习。

2018年技术成长最快的一年，感谢这一年坚持不懈的自己。

写下今年的技术开拓，对自己的今年进行一个交待。

前端技术类:
- Vue深度学习，Vue、Lodash、Jquery源码解析阅读
- Es基础加固，函数式编程
- GraphQL，结合GraphQl+Element-UI重新封装组件，减少工作实际代码量以及GraphQl command制作，一键生成所有枚举
- 表单验证插件、Webpakc预加载插件制作
- Vue+Cordova混合开发原生应用，地图、摄像头、蓝牙功能整合
- Electron开发桌面应用，Nedb,IndexedDB学习使用
- 微信公众号开发，微信小程序开发
- 后台管理系统模板搭建，mock数据结合
- whistle、Proxy SwitchyOmega，代理抓包
- GIT深度掌握
- 前端性能优化，http深度学习
- AMD，CommonJs源码实现
- XSS、CSRF攻击
- Mpvue学习使用，Nuxt ssr 后端渲染

Node后端类：
- Express、Koa学习，源码解析阅读
- Mongodb，Mongoose
- Redis
- Koa中间件学习，Koa中间件制作，便于日常开发
- Nginx部署服务
- 服务器+域名部署绑定，xshell管理服务器
- Node爬虫
- CI/CD,TeamCity、JenKins持续集成，持续部署


2019年希望能有新的突破，做技术实质是在做交流，希望今年交流这块能有大方面提升，
列出2019年关于技术方面想做的事情：
- Docker深度掌握
- React + TS 学习
- React 源码解析阅读
- React Native 学习
- 前端自动化测试
- 制作2~3个插件，便于日常开发以及性能优化方面
- PWA
- Node深度学习

冲冲冲!!!