前端自动化部署及搭建git仓库

我的玩法是gitea+drone+Nginx+docker,在linux系统中搭建

安装docker

yum install docker -y

开机启动docker

systemctl start docker

安装 Docker Compose

sudo curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

对二进制文件应用可执行权限

sudo chmod +x /usr/local/bin/docker-compose

在/root 目录中创建docker-compose.yml文件内容如下

version: '3'

services:
  # 数据库容器名
  mariadb:
    container_name: mariadb
    image: mariadb
    restart: always
    ports:
      - 3306:3306
    volumes:
    # 根目录下一定要有/appStroe/对应的容器名
      - /appStroe/mariadb:/var/lib/mysql
      - /appStroe/mariadb/my.cnf:/etc/mysql/my.cnf
      - /etc/localtime:/etc/localtime
    environment:
      MYSQL_ROOT_PASSWORD: 123456
  gitea:
    container_name: gitea
    image: gitea/gitea
    restart: always
    ports:
      - 2110:2110
    volumes:
      - /appStroe/gitea:/data
      - /etc/localtime:/etc/localtime
      - /etc/timezone:/etc/timezone
    environment:
      - USER_UID=1000
      - USER_GID=1000
      # 根据你自己定义的二级域名
      - ROOT_URL=http://gitea.vue.com
      - DB_TYPE=mysql
      - DB_HOST=mariadb:3306
      - DB_NAME=gitea
      - DB_USER=gitea
      - DB_PASSWD=gitea
      - DISABLE_SSH=true
    links:
      - mariadb
  drone:
    container_name: drone
    image: drone/drone
    restart: always
    ports:
      - 8089:80
    volumes:
      - /appStroe/drone:/data
      - /var/run/docker.sock:/var/run/docker.sock
    environment:
      - DRONE_AGENTS_ENABLED=false
      - DRONE_GITEA_SERVER=https://gitea.vue.com
      - DRONE_GITEA_CLIENT_ID=daf71c78-7bf6-437a-a5c5-1b6c31015bcd
      - DRONE_GITEA_CLIENT_SECRET=4zXkpsq-hIPXwg_NCsL1mYpFy_wSkJ09a19beCLdKsY=
      - DRONE_SERVER_HOST=drone.iishoni.com
      - DRONE_SERVER_PROTO=https
      - DRONE_RPC_SECRET=d9856af41ffe31f5e8025be020e981be
      - DRONE_OPEN=true
      - DRONE_DEBUG=true
      - DRONE_LOGS_DEBUG=true
      - DRONE_LOGS_TRACE=true
      - DRONE_USER_CREATE=username:admin,admin:true
  drone-runner:
    container_name: drone-runner
    image: drone/drone-runner-docker
    restart: always
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    environment:
      - DRONE_RPC_PROTO=https
      - DRONE_RPC_HOST=drone.vue.com
      - DRONE_RPC_SECRET=d9856af41ffe31f5e8025be020e981be
      - DRONE_RUNNER_CAPACITY=5
      - DRONE_RUNNER_NAME=${HOSTNAME}

在根目录创建appStroe文件里面分别创建mariadb、gitea、drone文件

安装Nginx

Nginx安装步骤

创建二级域名

域名在哪个平台购买的就去那里创建

配置Nginx反向代理

找到Nginx安装目录配置文件中的Nginx.conf文件，只在80端口下监听域名，根据二级域名进行反向代理到另外一个服务中,如果是反向到相应的端口中。反向代理配置程序如下

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen 80;
        server_name  vue.cn;
        root /app/blog;
        location / {
            proxy_pass      http://127.0.0.1:81;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        } 
    }
    server {
        listen 80;
        server_name drone.vue.cn;
        location / {
            proxy_pass      http://127.0.0.1:8089;
        }
    }
    server {
        listen 80;
        server_name  mariadb.vue.cn;
        location / {
            proxy_pass  http://127.0.0.1:3306;
        }
    }
    server {
        listen 80;
        server_name  gitea.vue.cn;
        location / {
            proxy_pass  http://127.0.0.1:2110;
        }
    }
}

别忘了重启Nginx服务

安装数据库并启动

docker-compose up -d mariadb

安装gitea库并启动

docker-compose up -d gitea

安装drone并启动

docker-compose up -d drone

运行数据库应用创建gitea数据库分别执行以下三个命令

create database gitea default character set utf8 collate utf8_general_ci;
create user 'gitea'@'%' identified by 'gitea';

grant all privileges on gitea.* to 'gitea'@'%' identified by 'gitea';

flush privileges;

去浏览器访问gitea.vue.cn就访问到了你自己的git仓库 ，点击创建管理账号然后点击我的个人信息，在应用的最下面设置管理 OAuth2 应用程序

将客户端ID粘贴到服务器里/root/docker-compose.yml文件中的drone部分 粘贴完成将重新执行docker-compose up -d drone

访问drone.vue.cn网址点击登录将会进入这个授权界面点击授权

到了这里就已经搭建好gitea仓库、drone CI平台、Nginx

前端自动化部署

在gitea里创建一个项目仓库设置好仓库名直接确定，后面上传代码

自动部署配置

浏览器进入drone.vue.cn部署平台点击sync重新检索

如果展示你建的仓库名点击进去就会进入这个界面在点击最右边的配置tab 界面配置如下图

点击secret选项，点击new secret按钮，name输入框是定义变量名为ssh_host,value输入框为变量值是你服务器的公网IP地址，一定要将Allow Pull Requests勾选上

再点击new secret按钮name输入框是定义变量名为ssh_key,value输入框为变量值是你私钥

编写自动化部署命令

在项目根目录创建.drone.yml文件

kind: pipeline
type: docker
name: default
steps:
  # 使用缓存
  - name: restore-cache
    image: drillster/drone-volume-cache
    settings:
      restore: true
      mount:
        - ./node_modules
    volumes:
      - name: node_cache
        path: /cache

  # 打包
  - name: build
    image: node:10-alpine
    commands:
      - node -v
      - yarn -v
      - yarn config set registry https://registry.npm.taobao.org -g
      - yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g
      #- yarn 
      - yarn run build

  # 更新缓存
  - name: rebuild-cache
    image: drillster/drone-volume-cache
    settings:
      rebuild: true
      mount:
        - ./node_modules
    volumes:
      - name: node_cache
        path: /cache

  # 部署
  - name: deploy
    image: appleboy/drone-scp
    settings:
      host:
        from_secret: ssh_host
      port: 22
      username: root
      key:
        from_secret: ssh_key
      command_timeout: 3m
      # 设置要将打包户的文件部署到的文件地址
      target: /app/blog/${DRONE_BRANCH}
      source: dist/*
      rm: true
      strip_components: 1
    when:
      status:
        - success

volumes:
  - name: node_cache
    host:
      path: /data/node

最后重新提交一下代码到仓库里就可以实现自动化打包部署了