gitlab实现VUE项目的dist打包文件全自动同步部署到远程nginx服务器上

由于前端项目实际开发中需要经常性的修改提交代码，为了能够简约人力，实现快速高效的开发测试流程，故选择gitlab内置的ci/cd流程工具实现自动化同步项目文件到远程的nginx服务器上，供测试人员测试。
准备一台linux服务器S：Ubuntu 18.04.5 LTS
本地开发主机L:Ubuntu 18.04.5 LTS

1.在服务器S上安装nginx

本文通过apt-get的方式安装nginx:
1、安装nginx
	sudo apt install nginx
2、安装好的位置：
	/usr/sbin/nginx：主程序
	/etc/nginx：存放配置文件
	/usr/share/nginx：存放静态文件
	/var/log/nginx：存放日志
3、启动并验证效果
	service nginx start #启动nginx
	service nginx reload #重新加载nginx配置文件
	nginx -s reopen # 重启 Nginx
	nginx -s stop # 停止 Nginx
	nginx -v

2.修改nginx配置文件

访问nginx服务器80端口默认返回放置于 /usr/share/nginx/html下的静态文件，此时如果挂载我们自己的项目静态文件，需要修改 /etc/nginx/nginx.conf文件，本文将项目的dist文件夹放在/usr/share/nginx/html目录下，在nginx.conf文件中添加相应的服务信息：

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
        worker_connections 768;
        # multi_accept on;
}

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # SSL Settings
        ##
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

        ##
        # Virtual Host Configs
        ##

		### start 在配置文件中添加改部分配置
        server{
                listen 9999;  #项目的运行端口
                server_name localhost;
                location / {
                        root /usr/share/nginx/html/dist;  #项目静态文件的所在目录，dist文件夹是从开发主机上同步过来的
                        index index.html index.htm;  # 设置主页
                        try_files $uri $uri/ /index.html; # 避免刷新时出现 404
                }
        }
        ### end

        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;

}


#mail {
#       # See sample authentication script at:
#       # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
#       # auth_http localhost/auth.php;
#       # pop3_capabilities "TOP" "USER";
#       # imap_capabilities "IMAP4rev1" "UIDPLUS";
#
#       server {
#               listen     localhost:110;
#               protocol   pop3;
#               proxy      on;
#       }
#
#       server {
#               listen     localhost:143;
#               protocol   imap;
#               proxy      on;
#       }
#

3.gitlab自动打包dist文件

通过配置.gitlab-ci.yml文件实现代码提价后自动打包，本文采用的简单例子：

stages: # 分段
  - install

cache: # 缓存
  paths:
    - node_modules
    - build

install-job:
  tags:
    - sss
  stage: install
  script:
    - npm install
    - npm run build:prod	#打包指令本文package.json文件scripts配置的是build:prod，执行该指令会打包生成dist目录
    - rsync -r --delete ./dist root@xxx.xxx.xxx.xxx:/usr/share/nginx/html #将本地开发主机上的dist文件同步到远程nginx服务器的对应目录下
  only:
    - master         

4.配置rsync的密钥

关于rsync指令的详细使用说明，请参考：https://baike.baidu.com/item/rsync/8086338?fr=aladdin

本文采用的同步shell指令：
rsync -r --delete ./dist root@xxx.xxx.xxx.xxx:/usr/share/nginx/html
使用的选项：
-r 表示同步文件夹
–delete 表示同步远程文件的时候，远端多则删除，少则添加

需要特别注意的是，rsync是基于ssh协议实现的文件同步方式，使用起来非常方便，但是它在远程拷贝文件之前提示还需要输入一个密码，要实现脚本自动拷贝，必须要优化掉这个步骤，否则无法通过自动化的方式执行文件同步。
并且，由于开发主机同步文件所使用的用户为gitlab的gitlab-runner用户，所以，在进行rsync配置时，需要先切换到gitlab-runner用户下：

su gitlab-runner

此时在开发主机上的gitlab-runner用户下 实现ssh无密码登录nginx服务端：

• 在本地机器上使用ssh-keygen产生公钥私钥对

ssh-keygen

注意：生成公钥私钥的时候，提示输入直接按回车忽略，不需要对生成的公钥密钥再指定加密，不然使用rsync指令的时候，还是会提示输入加密字符串

• 用ssh-copy-id将公钥复制到远程机器中

ssh-copy-id -i .ssh/id_rsa.pub  用户名字@192.168.x.xxx

• 登录到远程服务器不用输入密码

 ssh 用户名字@192.168.x.xxx

自此，即可实现gitlab提交代码后自动更新同步远程服务器