Jenkins+Github+Nginx實現前端專案自動部署

前言

最近在搭建一個自己的網站，網站框架搭好了要把專案放到伺服器執行，但是每次更新網站內容就要手動部署一次，實在很麻煩，於是就想搭建一套自動化部署的服務。看了一些案例最後選用現在比較主流的Jenkins + Github + Nginx的方案來搭建，於是跟著教程去做，順便把自己搭建的過程分享出去。以下操作預設大家已經申請自己的伺服器，並開放所需要的埠。我自己的伺服器是阿里雲CentOS。

注意：ubuntu使用（apt-get install 軟體名）來安裝軟體，redhat(即CentOS)伺服器使用（yum install 軟體名）命令安裝，使用的是xhell遠端控制工具。

自動化部署原理

簡單的說就是當我們寫好程式碼build完成後，把程式碼提交到github上，jenkins監測到程式碼變化就會自動構建專案，把程式碼拉取到伺服器，從而實現自動部署。

安裝Jenkins

一、安裝 Jenkins 前的環境準備（CentOS7）

1.新增yum倉庫源

wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo

若是報錯提示：bash:wget:command not found，說明沒有安裝它，執行安裝命令即可；

yum install -y wget

安裝完成之後，在執行以上命令。

Saving to: '/etc/yum.repos.d/jenkins.repo'為儲存目錄。

2.匯入倉庫源的key（祕鑰）

rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key

3.保證系統Java版本為8.0或8.0以上（JDK1.8以上）

yum -y install java

java -version  #檢視版本驗證是否安裝成功

4. 關閉firewalld防火牆

如果是阿里雲伺服器的話，一般都會關閉防火牆，此步可以省略。但需要開放自己的埠，再到阿里雲伺服器的後臺，配置安全組，入內網配置即可訪問。

systemctl stop firewalld // 關閉當前的防火牆服務

systemctl disable firewalld // 禁用防火牆開機啟動

getenforce 檢視是否禁用成功

二. Jenkins 安裝與初始化配置

1.Yum源安裝 Jenkins 最新版本

yum install jenkins -y

2. 更改 Jenkins 啟動使用者與埠

vi /etc/sysconfig/jenkins

需要把JENKINS_USER="jenkins"改為JENKINS_USER="root"，埠號8080若是沒有被佔用，預設即可。若是阿里雲伺服器，需要在安全組中新增8080埠。

3.啟動 Jenkins 並檢視是否啟動成功

systemctl start jenkins //啟動Jenkins

systemctl status jenkins //檢視Jenkins狀態

systemctl stop jenkins //停止Jenkins

若使用systemctl status jenkins檢視Jenkins狀態，綠色文字顯示和圖中的不一致，如active(exited)，

表示並沒有啟動成功，可以先停止systemctl stop jenkins，然後在重啟systemctl start jenkins即可。

補充：

使用systemctl 檢視Jenkins服務的狀態，返回的狀態有以下幾種：

1. loaded ##系統服務已經初始化完成，載入過配置

2. active（running） ##正有一個或多個程式正在系統中執行， vsftpd就是這種模式

3. atcive（exited） ##僅執行一次就正常結束的服務， 目前並沒有任何程式在系統中執行

4. atcive（waiting）##正在執行當中，不過還在等待其他的事件才能繼續處理

5. inactive #服務關閉

6. enbaled ##服務開機啟動

7. disabled ##服務開機不自啟

8. static ##服務開機啟動項不可被管理

9. failed ##系統配置錯誤

對於 active（exited）狀態的補充說明

在作業系統中，有某些服務只需要初始化一下就可以了；不需要在伺服器中啟動一個守護程序。這種服務初始化完成後就直接退出，其服務的狀態就是active（exited）。

4.瀏覽器開啟頁面

在瀏覽器中輸入 ip：port即可，如 http://192.168.1.188:8080,使得可以通過域名方式訪問。

注：8080埠需要提前開放。

通過該頁面中的路徑獲取管理員到初始密碼。

cat /var/lib/jenkins/secrets/initialAdminPassword

輸入得到到密碼，進入安裝外掛頁面

選擇安裝推薦到外掛，進入到安裝頁面

安裝完成進入建立使用者頁面

儲存並完成，安裝至此完成

安裝nginx

系統平臺：CentOS release 6.6(Final) 以上版本 64位。

在 CentOS 上，可直接用 yum 來安裝 Nginx： yum install -y nginx

安裝完成後，使用 nginx 命令啟動 Nginx： nginx

設定 Nginx 開機啟動： systemctl enable nginx.service

開啟 Nginx 的預設配置檔案 /etc/nginx/nginx.conf ，修改 Nginx 配置，將預設的 root /usr/share/nginx/html; 修改為: root /data/static;，如下：

# For more information on configuration, see:

#   * Official English Documentation: http://nginx.org/en/docs/

#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;

worker_processes auto;

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

pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.

include /usr/share/nginx/modules/*.conf;

events {

    worker_connections 1024;

}

http {

    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;

    tcp_nodelay         on;

    keepalive_timeout   65;

    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;

    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.

    # See http://nginx.org/en/docs/ngx_core_module.html#include

    # for more information.

    include /etc/nginx/conf.d/*.conf;

    server {

        listen       80 default_server;

        listen       [::]:80 default_server;

        server_name  _;

        root         /data/static;

           # Load configuration files for the default server block.

        include /etc/nginx/default.d/*.conf;

        location / {

        }

        error_page 404 /404.html;

            location = /40x.html {

        }

        error_page 500 502 503 504 /50x.html;

            location = /50x.html {

        }

    }

}