Jenkins+Github+Nginx實現前端項目自動部署

本文轉載自查看原文 2021-06-24 11:32 243 github/ nginx/ jenkins

前言

最近在搭建一個自己的網站，網站框架搭好了要把項目放到服務器運行，但是每次更新網站內容就要手動部署一次，實在很麻煩，於是就想搭建一套自動化部署的服務。看了一些案例最后選用現在比較主流的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 {
        }
    }  
}