前端人的前端CI/CD

注意文件夹的执行权限，比如Jenkins就遇到了 /var 下的文件夹目录只读

安装宝塔

宝塔Linux面板是提升运维效率的服务器管理软件。
以root身份去执行以下操作

sudo su - root

可以快速搭建网站，WordPress等。

安装docker

遇到的问题
docker pull 太慢
https://www.runoob.com/docker/docker-mirror-acceleration.html
https://www.cnblogs.com/BillyYoung/p/11113914.html
–restart=always 保持服务器重启自动重启，如果容器已经启动
docker update --restart=always 容器名字

curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

安装 gitlab

遇到的问题：
服务器上git将近消耗一半内存资源。而且很奇怪的是竟然开启了32个进程。后经查资料，原来这跟gitlab的默认机制有关。在配置文件/etc/gitlab/gitlab.rb里，unicorn[‘worker_processes’] = 2
unicorn[‘worker_processes’] = 服务器核心数+1

docker pull gitlab/gitlab-ce
docker run -d  -p 9443:443 -p 85:85 -p 222:22  --name gitlab-yea2 --restart always -v /home/gitlab/config:/etc/gitlab -v /home/gitlab/logs:/var/log/gitlab -v /home/gitlab/data:/var/opt/gitlab gitlab/gitlab-ce

因为我们的服务器80端口已经被占用了，所以用其他端口做映射
按上面的方式，gitlab容器运行没问题，但在gitlab上创建项目的时候，生成项目的URL访问地址是按容器的hostname来生成的，也就是容器的id。作为gitlab服务器，我们需要一个固定的URL访问地址，于是需要配置gitlab.rb（宿主机路径：/home/gitlab/config/gitlab.rb）。

# gitlab.rb文件内容默认全是注释
$ vim /home/gitlab/config/gitlab.rb输入 :$ 到达底部# 配置http协议所使用的访问地址,不加端口号默认为80 --这里指的是容器内的，所以不需要改成映射端口
nginx['listen_port'] = 85
unicorn['port'] = 85    git clone 的时候需要用到
external_url 'http://47.111.115.113:85/'
nginx['listen_port'] = 85# 配置ssh协议所使用的访问地址和端口
gitlab_rails['gitlab_ssh_host'] = '47.111.115.113'
gitlab_rails['gitlab_shell_ssh_port'] = 222 # 此端口是run时22端口映射的222端口:wq #保存配置文件并退出docker restart gitlab

默认账号 root，密码第一次进入的时候会让你重置

人员添加

在左上角的管理中心进入就会有新注册用户的管理

安装Jenkins

遇到的问题
超时处理：

cd 的目录依据Jenkins命令映射关系而定
cd /var/lib/jenkins/updates/   这里如果找不到这个文件夹，就直接进去到Jenkins容器去设置/var/jenkins_home
sed -i 's/http:\/\/www.google.com/https:\/\/www.baidu.com/g' default.json
sed -i 's/http:\/\/updates.jenkins-ci.org\/download/https:\/\/mirrors.tuna.tsinghua.edu.cn\/jenkins/g' default.json
我的文件里出现过没有 jenkins-ci.org
用以下替换
修改default.json文件
①编辑源文件default.json 一般路径为： C:\Users\Admin.jenkins\updates
②将文件中的 https://www.google.com/ 替换为 https://www.baidu.com/
③所有的 https://updates.jenkins.io/download/plugins 替换为 https://mirrors.tuna.tsinghua.edu.cn/jenkins/plugins/

1：拉取镜像并启动

docker pull jenkins/jenkins:latestdocker run -d -p 8080:8080 -p 50000:50000 -v /var/jenkins_home:/var/jenkins_home -v /etc/localtime:/etc/localtime --name jenkins docker.io/jenkins/jenkins

2：拿到初始化密码：（更正：不进入也能拿到密码）
进入容器-u 0 是使用root权限

docker exec -u 0 -it jenkins /bin/bash

拿到密码，可能刚启动要多获取几遍

cat /var/jenkins_home/secrets/initialAdminPassword
38f8d5d6d6d64e92bea0d3605097f3b9

3：选择安装推荐的插件

4：输入初始密码：

xiaomengzhi
xiaomengzhi

5：在首页左侧点击系统管理，管理插件

安装 Publish Over SSH 、Git plugin（初始化安装了） 、NodeJS Plugin

6：连接测试

点开直接使用密码的方式连接

7：配置nodejs版本：全局工具配置下的 nodejs 配置

创建自动化部署任务

1:左侧。新建任务=>构建一个自由风格的软件项目
修改git

勾选上

增加构建步骤：删除包（可以改成备份，之后可以写还原）。安装包，打包，解压到服务器

rm -rf dist && npm install &&  npm run build && cd dist && tar -zcvf dist.tar.gz *

增加构建后操作

这里的remote和publish ssh的是链接在一起的

备份文件（如果是镜像，就备份镜像）

cd /root/nginx
rm -rf backup.tar.gz
tar -zcvf backup.tar.gz ./www
rm -rf ./www
mkdir www
tar -zxvf dist.tar.gz -C ./www
rm -rf dist.tar.gz

还原直接

tar -zxvf backup.tar.gz

遇到了一个坑

执行

rm -rf ./www
mkdir www

删除了里面的证书
解决方法：

打包的时候顺便把证书打包进去
不删除www，再定时清理代码，我选择不删除。因为这样客户就不会看到500

TODO 镜像打包（改用Dockfile）

docker 部署私有React npm

1：创建仓库

docker pull verdaccio/verdaccio
docker run -itd --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio

2：使用dumi创建npm包
找一个目录执行，生成站点模式的组件库

yarn create @umijs/dumi-lib --site
npm run build 生成dist目录
指定发布目录
"files": ["dist"],

3：注册
打开 http://xxx:4873/
复制登录命令增加账号： npm adduser --registry http://xxx:4873

4：使用自己的 npm scope
修改package.json的name字段
“name”: “@a/b”,

5：
npm config set registry https://registry.npm.taobao.org
npm config set @a:registry=http://xxx:4873

6：发布
npm publish --registry http://xxx:4873

7：没有发布成功的话看是否有登录
npm who ami -registry=http://xxx:4873
npm login –registry=http://xxx:4873 –scope=@a

8：其他用户：安装，这里可以选择yarn，因为npm安装极其的慢
npm i @a/b --registry http://xxx:4873
或者
已经
npm config set @a:registry=http://xxx:4873
直接
npm i
9：

docker 和 nginx

9:docker 部署文档

docker pull nginx
mkdir -p ~/nginx/www ~/nginx/logs ~/nginx/conf 创建三个文件夹
docker run -d -p 80:80 --restart=always --name runoob-nginx-test-web -v ~/nginx/www:/usr/share/nginx/html -v ~/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v ~/nginx/logs:/var/log/nginx nginx

配置下nginx 可以了


user  nginx;
worker_processes  1;error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;events {worker_connections  1024;
}http {include       /etc/nginx/mime.types;default_type  application/octet-stream;server {listen       80;server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;location / {root   /usr/share/nginx/html;index  index.html index.htm;try_files $uri $uri/ /index.html;#重定向到https，放在外面会影响到websocket rewrite ^(.*)$ https://xxx$1 permanent; }# 如果需要代理location /vs {proxy_pass http://yyy;}}server {listen  443 ssl http2; # 如果有ipv6的话直接加上这个就是HTTP2server_name xx1.com  xx2.com;ssl_certificate       /usr/share/nginx/html/xx1.com.pem;ssl_certificate_key  /usr/share/nginx/html/xx1.com.key;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;ssl_ciphers AESGCM:ALL:!DH:!EXPORT:!RC4:+HIGH:!MEDIUM:!LOW:!aNULL:!eNULL;ssl_prefer_server_ciphers on;ssl_session_timeout  5m;location / {root   /usr/share/nginx/html;index  index.html index.htm;try_files $uri $uri/ /index.html;}location /vs {proxy_pass http://xx:8098;}# websocketlocation /vs/api/v1/ws {proxy_pass http://xx/vs/api/v1/ws;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "Upgrade";}}# log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '# '$status $body_bytes_sent "$http_referer" '#  '"$http_user_agent" "$http_x_forwarded_for"';# access_log  /var/log/nginx/access.log  main;sendfile        on;#tcp_nopush     on;keepalive_timeout  65;#gzip  on;
# $gzip_ratio计算请求的压缩率，$body_bytes_sent请求体大小# log_format  main  '$remote_addr - $remote_user [$time_local] "$host" - "$request" '#                 '$gzip_ratio - $body_bytes_sent - $request_time';# access_log  logs/access.log  main;# 开启gzipgzip on;# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩gzip_min_length 1k;# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明gzip_comp_level 1;# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;# 是否在http header中添加Vary: Accept-Encoding，建议开启gzip_vary on;# 禁用IE 6 gzipgzip_disable "MSIE [1-6]\.";# 设置压缩所需要的缓冲区大小     gzip_buffers 32 4k;# 设置gzip压缩针对的HTTP协议版本gzip_http_version 1.0;include /etc/nginx/conf.d/*.conf;
}