vue + webpack 前端项目持续发布集成部署

场景

代码仓库 gitlab
构建服务 jenkins
服务器环境 linux + nginx
复制代码

前端技术栈

vue vue-cli vue-router es6 sass
复制代码

配置途中的坑

1. jenkins 和 gitlab 的链接处理 （经过配置ssh-key能够处理）
2. jenkins 中构建项目 npm run build 以后的 文件夹权限 （配置权限 chmod -R 777 dist）
3. ftp和ssh 推送方式的区别
复制代码

vue项目build后空白问题

1. history: mode 的路由配置
2. 构建后的路径问题
复制代码

配置中经常使用的linux命令

1. 压缩文件包 tar -czf dist.tar.gz *
2. 解压文件包 tar -xvf dist.tar.gz (指向到制定文件夹 -C /workpace)
3. 推送本地文件到远程服务器 sudo scp ~/mywork/dist.tar.gz root@10.0.0.1/www/dist
复制代码

nginx配置

server {
    listen 80;
    server_name 10.0.0.1;
    root /www/dist/;
    
    location / {
        proxy_read_timeout 600;
        try_files $uri $uri/ /index.html;
        index index.html
    }
    
    location ^~/crm {
        proxy_pass http://10.0.0.1:8080/crm;
        proxy_set_header Host $host:$server_port;
    }
}
复制代码

Execute shell

# 对比 package.json 是否有改动
    # 若是有改动，就删除 node_modules，从新再 cnpm install 一次
    cmp --silent package.json ../package.json || (cp package.json .. && cd .. && rm -fr node_modules && cnpm i)
    
    # 把 node_modules 映射到项目文件夹中，用以打包代码
    ln -s ../node_modules .
    
    # 执行打包
    npm run build / bundle
    
    # 把打包后的代码目录 dist 打成 .tar.gz 压缩包
    tar -czvf root.tar.gz dist
    
    # 把压缩包传上目标服务器
    scp WeChat_Official_Accounts_to_Dev_bundle.tar.gz efinance@10.x.xx.xxx:~
    
    # 连上目标服务器上，进行相应的 shell 操做
    ssh efinance@10.1.21.155 << 'ENDSSH'
    	# 回到用户目录
        cd
        
        # 新建目录 
        mkdir -p WeChat_Official_Accounts_to_Dev_bundle
        
        # 把传上来的压缩包解压到刚刚新建的目录
        tar -xzvf WeChat_Official_Accounts_to_Dev_bundle.tar.gz -C WeChat_Official_Accounts_to_Dev_bundle
        
        # 删掉压缩包
        rm WeChat_Official_Accounts_to_Dev_bundle.tar.gz
    
        # 删除上一版代码
        sudo rm -rf /usr/local/app/wechat_official_accounts
        
        # 剪切新一版代码到目标目录
        sudo mv ~/WeChat_Official_Accounts_to_Dev_bundle/dist /usr/local/app/wechat_official_accounts
        
        # 删除最初建的目录
        sudo rm -rf ~/WeChat_Official_Accounts_to_Dev_bundle
        
        # 给新一版代码所在的目录赋予 nginx 读取权限
        # 注意：这里的权限 nginx:nginx 仍是 755 看项目现有的
        sudo chown -R nginx:nginx /usr/local/app/wechat_official_accounts
    
    # 结束 ssh 链接
    ENDSSH
复制代码

常见问题

1. sudo: sorry, you must have a tty to run sudo 报错提示
    - vim /etc/sudoers 
    - 注释掉 Default requiretty ,默认 sudo 须要 tty 终端。
2. Host key verification failed 无权限
    - 登陆 192.168.7.164 jenkins 服务器
    - ctrl + r，搜索 jenkins 命令
    - 执行 sudo su -s /bin/bash jenkins 切换到 jenkins 这个 user 帐号
    - ctrl + r，搜索 ssh-cop 命令
    - 执行 ssh-copy id 帐户@ip
3. scp: /apps/dazhanghao/bundle_oas_test.tar.gz: No space left on device 磁盘空加满
    - df -h 查看磁盘空间使用
    - 找到对应的查看
4. 扩展 linux 服务器 app 程序启动方法
    - ctrl + r ，搜索 pm2
    - sudo pm2 start /home/admin/app/mssql/e+_cloud_test.js 启动 node 程序
复制代码