5分鐘打造前端Jenkins自動化部署

1、前言

趁着雙十一入手了一個雲端服務器，爲了使本身寫的前端代碼更方便部署，便使用了 Jenkins 進行自動化部署。

本篇文章是對此次實踐的一個記錄，同時也但願經過這篇文章，能幫助更多的同窗快速部署本身的前端代碼，提升開發效率。

2、前期準備

• 首先確定須要一臺屬於本身的服務器，能夠是雲端的也能夠把舊的電腦看成服務器，我使用了騰訊雲，操做系統爲CentOS 7.5；
• 終端模擬軟件，能夠經過 ssh 訪問到本身的服務器，我在 Windows 中使用了 Xshell 4 社區版來進行 ssh 鏈接，若是使用 Mac 或者 Linux 能夠經過 Terminal 來進行操做，總之，只要能夠鏈接到本身的服務器就行；
• 註冊一個 Gitee 的帳號，由於 GitHub 訪問有些慢，因此我使用了 Gitee 做爲本身的代碼倉庫；
• 最後，來杯熱水，就開工吧。

3、部署過程

在正式實踐以前，咱們先來了解一下整個自動化部署的流程。

1. 首先咱們經過 Jenkins 從代碼倉庫拉取代碼；
2. 而後咱們對代碼進行編譯打包，以後將打包後的靜態文件推送到部署的服務器（本文中 Jenkins 和部署服務器使用同一服務器）；
3. 在部署的服務器中，咱們經過 Nginx 進行反向代理，使用戶能夠進行訪問。

瞭解了整個流程以後咱們就開始實踐吧~

4、服務器配置

4.1 設置用戶

首先咱們經過 ssh 鏈接服務器，一般第一次使用的帳號都爲 root 帳號，咱們最好再建立新的用戶並賦予新用戶 sudo 權限。

adduser user1 # 1.建立用戶user1
passwd user1 # 2.設置user1的密碼
chmode -v u+w /etc/sudoers # 3.增長sudoers文件的寫權限，默認爲只讀權限
vi /etc/sudoers # 4.修改sudoers文件，按i進入編輯模式，找到下面對應行，進行修改，修改完成後，按esc推出編輯模式，並輸入 :wq 保存退出
-----------------------------------------------------------------------------------
## Allow root to run any commands anywhere
root    ALL=(ALL)       ALL
user1    ALL=(ALL)       ALL （添加這一行）
-----------------------------------------------------------------------------------
chomd -v u-w /etc/sudoers # 5.刪除sudoers的讀寫權限
複製代碼

如今咱們就可使用用戶 user1 進行登陸了，而且 user1 擁有了 sudo 權限。

4.2 安裝 Java

經過如下命令進行 Java 的安裝，經過javac命令能夠驗證安裝是否成功。

yum -y install java-1.8.0-openjdk-devel
複製代碼

4.3 安裝 Jenkins

1. 若是以前使用 Jenkins 導入過 key，忽略此步驟，若是第一次安裝則輸入以下命令；

   sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
   sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
   複製代碼

2. 安裝 Jenkins；

   yum -y install jenkins
   複製代碼

3. 啓動 Jenkins，並設置爲開機啓動；

   systemctl start jenkins.service
   chkconfig jenkins on
   複製代碼

   經過訪問 IP地址:8080 來驗證啓動是否成功。
4. 進入Jenkins，查看初始密碼，複製以後進入；

   cat /var/lib/jenkins/secrets/initialAdminPassword
   複製代碼

5. 選擇默認的install suggested plugins安裝插件；
6. 建立 Jenkins 用戶。

4.4 配置 Jenkins 權限

如今若是在 Jenkins 中執行 Shell 腳本，Jenkins 並不具有相應權限，須要sudo vi /etc/sysconfig/jenkins，找到 JENKINS_USER 並將其修改成 root。

JENKINS_USER="root"
複製代碼

以後，修改 Jenkins 相關文件夾用戶權限。

chown -R root:root /var/lib/jenkins
chown -R root:root /var/cache/jenkins
chown -R root:root /var/log/jenkins
service jenkins restart
複製代碼

4.5 安裝 Git

由於須要從 git 倉庫拉取代碼，因此須要安裝 git。

sudo yum install git
複製代碼

4.6 安裝 node

由於須要對前端代碼進行構建，須要用到 npm，因此須要對 node 進行安裝，默認安裝的node版本會比較低，可使用 nvm 安裝高版本的 node，本文再也不贅述。

sudo yum install nodejs
複製代碼

4.7 生成部署用的 ssh 公鑰

由於從 Gitee 進行部署須要配置對應的部署公鑰，因此先生成對應公鑰。

ssh-keygen -t rsa -C "user1@123.com"
複製代碼

根據提示完成三次回車便可生成 ssh key， 經過 cat ~/.ssh/id_rsa.pub 便可查看服務器的公鑰。

5、Gitee配置

5.1 建立代碼倉庫

建立代碼倉庫，上傳本身的代碼。

5.2 爲倉庫配置部署公鑰

點擊倉庫的管理，在側邊欄選擇部署公鑰管理，點擊添加公鑰，複製4.7中的服務器公鑰，進行添加。

6、Jenkins配置

第一步：點擊左側邊欄New Item新建項目；

第二步：輸入項目名稱，點擊左下角 ok按鈕；

第三步：在 Source Code Management中，選擇 Git，輸入對應的倉庫地址，並在 Branches to build中填寫須要編譯的分支；

第四步：在 Build Environment中選中Provide Node & npm bin/ folder to PATH；

第五步：在 Build中選擇 Execute shell；

第六步： 編寫 shell 腳步，我爲了方便起見，只是安裝瞭如下npm包，而後進行編譯，最後將編譯出來的dist文件夾移動到了/work中；

第七步：點擊 build進行編譯，成功以後應該能夠在/work文件夾中看到咱們編譯出來的靜態文件了。

7、Nginx配置

7.1 安裝Nginx

sudo yum install nginx -y
複製代碼

7.2 經過 nginx命令啓動Nginx

此時，訪問 IP 地址會顯示 Nginx 的測試頁面。

7.3 配置nginx.conf文件

經過sudo vi /etc/nginx/nginx.conf進行編輯，爲方便起見，主要修改了server。

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
	   root /work/dist; # 編譯出的靜態文件的地址
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
複製代碼

7.4 重啓Nginx

修改完成以後，咱們還須要作如下兩步操做。

sudo nginx -t // 驗證書寫是否正確
nginx -s reload // 重啓Nginx
複製代碼

7.5 訪問咱們的公網IP，此時應該出現咱們的頁面了

8、總結

在之後每次咱們修改代碼提交以後，咱們均可以在 Jenkins 中進行自動部署了。

本次實踐，完~