自动化部署，从开发到上线，详解GitHub+Jenkins+Nginx方案

# 自动化部署流程图

# 流程详解

# 配置与环境

# 阿里云ECS云服务器

[root@iZlnxwu7g4upvsZ ~]# lsb_release -a
LSB Version:	:core-4.1-amd64:core-4.1-noarch
Distributor ID:	CentOS
Description:	CentOS Linux release 7.4.1708 (Core) 
Release:	7.4.1708
Codename:	Core

# 阿里云CDN

# 阿里云OSS存储 或 又拍云USS云存储

# 阿里云域名与域名解析

# 代码仓库采用 sliwei的GitHub

费用域名与云服务器每年不到200元,CDN与OSS视使用量而定

# 服务器插件

# Jenkins2.161 jenkins官网

监控GitHub代码提交，自动打包代码，放到服务器或者OSS云存储上

# Python 2.7.5

部分node插件需要python运行库

[root@iZlnxwu7g4upvsZ ~]# python -V
Python 2.7.5

# node.js/npm/pm2

node.js辅助运行web服务器与打包所依赖的插件

[root@iZlnxwu7g4upvsZ ~]# node -v
v10.16.0
[root@iZlnxwu7g4upvsZ ~]# npm -v
6.9.0
[root@iZlnxwu7g4upvsZ ~]# pm2 -v
3.5.1

# nginx 1.13.8

HTTP代理服务器

[root@iZlnxwu7g4upvsZ ~]# nginx -v
nginx version: nginx/1.13.8

# mysql 5.7.21

数据库

[root@iZlnxwu7g4upvsZ ~]# mysql -V
mysql  Ver 14.14 Distrib 5.7.21, for linux-glibc2.12 (x86_64) using  EditLine wrapper

# Let’s Encrypt

HTTPS免费证书(也可以用阿里或又拍云的免费证书，也是一样的)

https://dl.eff.org/certbot-auto

# 开发流程

我们将开发一个基于vue的测试项目，项目名为“auto-map”，访问域名为“https://auto-map.bstu.cn”，项目会涉及到整套流程的每个节点

# 配置CDN/OSS/域名解析/HTTPS

OSS新建一个Bucket（相当于一个空间，可以将存储空间配置成静态网站托管模式）

结合OSS配置一个对应的CDN加速服务

再将auto-map.bstu.cn二级域名解析到CDN的CNAME上

现在前往服务器，运行HTTPS证书插件，生成auto-map的证书（也可以使用阿里的免费证书或可以看我前面写的都2019年了，没HTTPS加持？Let’s Encrypt安排一下），生成成功后记得前往CDN配置HTTPS证书

现在我们访问https://auto-map.bstu.cn，那么我们就可以访问到OSS储存中Bucket为auto-map空间中的资源，如果在auto-map空间根目录下放一个index.html，那么就直接访问的是该页面。后续auto-map项目上传到GitHub上，Jenkins检测到后，自动打包生成dist（html,js,css）后，通过脚本自动上传到OSS的auto-map空间中，我们也就完成了自动部署。

# 创建一个名为“auto-map”的项目

# 配置Jenkins，我们监控master分支的提交，就打包到阿里的OSS

如何在Linux中使用Jenkins来自动打包项目，请看如何在Linux中使用Jenkins自动打包上传项目

新建一个任务，关键就是配置shell命令，我将打包以及上传到OSS写在sh脚本里面，Jenkins执行一下就行

auto-map-build.sh

auto-map-oss.sh(使用的是阿里官方推荐的ossutil工具)

# 克隆到本地，然后放入一个简单的vue项目

# 提交代码

实战中如何使用Git

# 查看Jenkins

Started by user lw
Building in workspace /var/lib/jenkins/workspace/auto-map
 > git rev-parse --is-inside-work-tree # timeout=10
Fetching changes from the remote Git repository
 > git config remote.origin.url https://github.com/sliwei/auto-map.git # timeout=10
Fetching upstream changes from https://github.com/sliwei/auto-map.git
 > git --version # timeout=10
using GIT_ASKPASS to set credentials github
 > git fetch --tags --progress https://github.com/sliwei/auto-map.git +refs/heads/*:refs/remotes/origin/*
 > git rev-parse refs/remotes/origin/master^{commit} # timeout=10
 > git rev-parse refs/remotes/origin/origin/master^{commit} # timeout=10
Checking out Revision 59f65fd4b909d949c03572b54e7d0dad6133a4af (refs/remotes/origin/master)
 > git config core.sparsecheckout # timeout=10
 > git checkout -f 59f65fd4b909d949c03572b54e7d0dad6133a4af
Commit message: "Merge pull request #1 from sliwei/dev"
 > git rev-list --no-walk 59f65fd4b909d949c03572b54e7d0dad6133a4af # timeout=10
[Set GitHub commit status (universal)] PENDING on repos [GHRepository@220c218f[description=自动部署,homepage=<null>,name=auto-map,fork=false,archived=false,size=146,milestones={},language=JavaScript,commits={},source=<null>,parent=<null>,responseHeaderFields={null=[HTTP/1.1 200 OK], Access-Control-Allow-Origin=[*], Access-Control-Expose-Headers=[ETag, Link, Location, Retry-After, X-GitHub-OTP, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset, X-OAuth-Scopes, X-Accepted-OAuth-Scopes, X-Poll-Interval, X-GitHub-Media-Type], Cache-Control=[private, max-age=60, s-maxage=60], Content-Encoding=[gzip], Content-Security-Policy=[default-src 'none'], Content-Type=[application/json; charset=utf-8], Date=[Mon, 09 Dec 2019 12:04:28 GMT], ETag=["50330a2e141989c0e0e1362de6c4b4b4"], Last-Modified=[Mon, 09 Dec 2019 11:44:28 GMT], OkHttp-Received-Millis=[1575893068865], OkHttp-Response-Source=[CONDITIONAL_CACHE 304], OkHttp-Selected-Protocol=[http/1.1], OkHttp-Sent-Millis=[1575893068488], Referrer-Policy=[origin-when-cross-origin, strict-origin-when-cross-origin], Server=[GitHub.com], Status=[304 Not Modified], Strict-Transport-Security=[max-age=31536000; includeSubdomains; preload], Transfer-Encoding=[chunked], Vary=[Accept, Authorization, Cookie, X-GitHub-OTP, Accept-Encoding], X-Accepted-OAuth-Scopes=[repo], X-Content-Type-Options=[nosniff], X-Frame-Options=[deny], X-GitHub-Media-Type=[github.v3; format=json], X-GitHub-Request-Id=[80C2:0F27:1DB921F:263AA52:5DEE384C], X-OAuth-Scopes=[admin:repo_hook, repo], X-RateLimit-Limit=[5000], X-RateLimit-Remaining=[4992], X-RateLimit-Reset=[1575896668], X-XSS-Protection=[1; mode=block]},url=https://api.github.com/repos/sliwei/auto-map,id=226808671]] (sha:59f65fd) with context:auto-map
Setting commit status on GitHub for https://github.com/sliwei/auto-map/commit/59f65fd4b909d949c03572b54e7d0dad6133a4af
[auto-map] $ /bin/sh -xe /tmp/jenkins2700407128884523807.sh
+ sh /data/sh/auto-map-build.sh
up to date in 20.107s
> auto-map@1.0.0 build /var/lib/jenkins/workspace/auto-map/git
> node build/build.js "prod" "prod"

prod 

- building for production...
clean-webpack-plugin: /var/lib/jenkins/workspace/auto-map/git/prod has been removed.
Happy[happyBabel]: Version: 5.0.1. Threads: 1 (shared pool)
Happy[happyBabel]: All set; signaling webpack to proceed.
⚠ ｢copy-webpack-plugin｣: unable to locate '/var/lib/jenkins/workspace/auto-map/git/static' at '/var/lib/jenkins/workspace/auto-map/git/static'
Hash: b5199c18401c647ae02a
Version: webpack 4.41.2
Time: 23263ms
Built at: 12/09/2019 8:05:15 PM
                            Asset       Size  Chunks                                Chunk Names
          css/styles.9ef2a723.css    249 KiB       0  [emitted] [immutable]  [big]  styles
fonts/element-icons.535877f5.woff   27.5 KiB          [emitted]                     
 fonts/element-icons.732389de.ttf   54.6 KiB          [emitted]                     
                       index.html   1.33 KiB          [emitted]                     
              js/Home.b03991c4.js  813 bytes       1  [emitted] [immutable]         Home
          js/HomePage.2c5834e3.js  810 bytes       2  [emitted] [immutable]         HomePage
          js/MainPage.f7e65d63.js  521 bytes       3  [emitted] [immutable]         MainPage
        js/element-ui.0f58f25e.js    643 KiB       4  [emitted] [immutable]  [big]  element-ui
              js/main.9e3bcf8b.js    161 KiB       5  [emitted] [immutable]         main
            js/styles.509166b9.js   61 bytes       0  [emitted] [immutable]         styles
               js/vue.29b65978.js    151 KiB       6  [emitted] [immutable]         vue
Entrypoint main [big] = js/element-ui.0f58f25e.js js/vue.29b65978.js css/styles.9ef2a723.css js/styles.509166b9.js js/main.9e3bcf8b.js

WARNING in unable to locate '/var/lib/jenkins/workspace/auto-map/git/static' at '/var/lib/jenkins/workspace/auto-map/git/static'
  Build complete.

+ sh /data/sh/auto-map-oss.sh /var/lib/jenkins/workspace/auto-map/git/prod auto-map
Total num: 14, size: 1,319,751. Dealed num: 11(upload 8 files, 3 directories), OK size: 940,598, Progress: 71.271%, Speed: 180.44KB/s
                                                                                                                                      
Succeed: Total num: 14, size: 1,319,751. OK num: 14(upload 11 files, 3 directories).
8.794390(s) elapsed
[Set GitHub commit status (universal)] PENDING on repos [GHRepository@4e60de4e[description=自动部署,homepage=<null>,name=auto-map,fork=false,archived=false,size=146,milestones={},language=JavaScript,commits={},source=<null>,parent=<null>,responseHeaderFields={null=[HTTP/1.1 200 OK], Access-Control-Allow-Origin=[*], Access-Control-Expose-Headers=[ETag, Link, Location, Retry-After, X-GitHub-OTP, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset, X-OAuth-Scopes, X-Accepted-OAuth-Scopes, X-Poll-Interval, X-GitHub-Media-Type], Cache-Control=[private, max-age=60, s-maxage=60], Content-Encoding=[gzip], Content-Security-Policy=[default-src 'none'], Content-Type=[application/json; charset=utf-8], Date=[Mon, 09 Dec 2019 12:04:28 GMT], ETag=["50330a2e141989c0e0e1362de6c4b4b4"], Last-Modified=[Mon, 09 Dec 2019 11:44:28 GMT], OkHttp-Received-Millis=[1575893068865], OkHttp-Response-Source=[CACHE 200], OkHttp-Selected-Protocol=[http/1.1], OkHttp-Sent-Millis=[1575893068488], Referrer-Policy=[origin-when-cross-origin, strict-origin-when-cross-origin], Server=[GitHub.com], Status=[304 Not Modified], Strict-Transport-Security=[max-age=31536000; includeSubdomains; preload], Transfer-Encoding=[chunked], Vary=[Accept, Authorization, Cookie, X-GitHub-OTP, Accept-Encoding], X-Accepted-OAuth-Scopes=[repo], X-Content-Type-Options=[nosniff], X-Frame-Options=[deny], X-GitHub-Media-Type=[github.v3; format=json], X-GitHub-Request-Id=[80C2:0F27:1DB921F:263AA52:5DEE384C], X-OAuth-Scopes=[admin:repo_hook, repo], X-RateLimit-Limit=[5000], X-RateLimit-Remaining=[4992], X-RateLimit-Reset=[1575896668], X-XSS-Protection=[1; mode=block]},url=https://api.github.com/repos/sliwei/auto-map,id=226808671]] (sha:59f65fd) with context:auto-map
Setting commit status on GitHub for https://github.com/sliwei/auto-map/commit/59f65fd4b909d949c03572b54e7d0dad6133a4af
Finished: SUCCESS

过程顺利，访问https://auto-map.bstu.cn查看效果