從零開始用jenkins自動化部署Vue項目（包括域名配置，服務器部署等等）

        幾個月前筆者從個人項目搭建，購買服務器，備案，nginx配置到pm2進程管理，最後用jenkins完成了項目的自動化構建發佈。今天阿里雲發來消息要在網站首頁底部中間添加備案號，纔再一次用到了之前的成果。特以此文，記錄幾個月前折騰的整個過程。

       1：第一步你需要一個github賬號（jenkins需要配置項目遠程地址），這裏託管着我們的項目代碼。沒有的小夥伴可以去https://github.com這個官網上註冊一個。然後創建一個倉庫，下方是筆者自己個人的一些項目。下面以admin-template爲例。

        2：第二步你需要下載一個git用來從本地把項目推往遠程倉庫。 下面是git的官方下載地址https://git-scm.com/downloads。

下載完後自行進行本地部署。完了之後我們就可以在本地新建一個空文件夾，將遠程的倉庫利用git 克隆下來。這個時候開始在那個文件夾下創建文件，然後編寫項目代碼。代碼寫完後可以在你的項目目錄下右鍵點擊Git Bash Here進入git的命令行操作界面。將自己的項目推往遠程倉庫。

         下面是推送項目的截圖。不熟悉git的朋友可以自行學習一下，下文會對用到的幾個命令稍作解釋。

        git pull 用來更新你的本地代碼，這一步是將遠程倉庫的代碼與你本地的進行同步（日常工作中提交代碼前的更新代碼這一步是必須要做的，在多人協同工作中，大家都會往一條分支上提交代碼，如果代碼不進行同步的話，在你提交代碼的時候很容易出現衝突）。大家也看到了藍色的（master）這個就是當前你所在的分支，由於是個人項目筆者就直接在主分支上提交了。日常工作中往往會有多條分支例如（test：測試分支，dev：作爲master的備份,測試完成後功能分支先往dev合併代碼，最後項目發版的時候再把dev合併到master上，finger： 開發當中的功能分支等等）。

        git add 用來把你修改或新增過的代碼文件提交到暫存區，你可以指定提交文，也可以像筆者一樣用點號(.)提交所有修改或新增過的文件。

        git commit 用來將暫存區的當前內容與描述更改的用戶和日誌消息一起存儲在新的提交中。-m 後可以寫你的日誌消息。

        git push 最終會把你的提交推往遠程倉庫，這個時候沒有代碼衝突的話，你的遠程代碼就會更新了，在github上所屬分支是會有所體現的。如下圖所示，各個文件的提交記錄都有所提現。所以提交代碼的時候一定要寫日誌信息，這樣便於後續的代碼追蹤，必要時的回退。git還有很多命令，大家可以自行學習一下，這裏就講到爲止了。

 3：第三步我們開始去購買域名和服務器，然後申請備案。筆者用的是阿里雲的相關服務。我們先進入阿里雲官網，去購買域名。

 

 這裏筆者選擇了最便宜的一款域名後綴，反正不用於商用，主要是便宜。 有了域名之後你得再去買一個服務器，不然光有域名也沒啥用。說到服務器，這裏推薦輕量級應用服務器，或者是雲服務器。輕量級應用服務器比較便宜，當然配置也低，在讀學生是有優惠的。一般公司部署項目用的都是雲服務器ECS，這個各方性能都很強。

雲虛擬主機這個更便宜，如果你要用jenkins構建自動化項目就別選它，他沒有能力做這個。筆者當時也是被便宜蒙了腦子，買了它，現在用它存放靜態文件。爲什麼不行，我們看下面的工單，這是血與淚的教訓，雲虛擬主機不支持ssh，而這一點恰恰是jenkins部署需要的。

虛擬主機還有其他的問題比如虛擬主機都是沒有開啓ip直接訪問的。

 

筆者的親身經歷告訴大家兩個道理，第一就是買東西不能一味貪圖便宜，事前需要做好充分的調研，這樣可以少走冤枉路，少花冤枉錢。第二件事情就是有困難可以創建工單，向阿里雲的售後工程師求助。筆者之前也是做了很多的調研，但是有些東西也只有用到的時候纔會真正發現。本文就是本着少走冤枉路，少花冤枉錢的的理念和大家一起分享。

服務器購買到手之後先進行DNS解析，這是把你的域名和你服務器的IP地址關聯起來的一步。

 解析完之後你仍然不能用過域名訪問你的服務器內容，你還需要去進行備案，如下所示。

 

 

 備案的審覈的時間比較長，尤其是管局審覈，少則十幾天，多則一個月，具體花幾天就要看人品了。進入備案系統之後，會有詳細的操作流程，也會有工作人員聯繫你求證一些東西。成功進行了dns解析和備案後你將會看到下面的信息。

 這個時候你可以隨便往你的服務器上放項目代碼了，也可以通過域名直接訪問到服務器上的靜態資源文件，比如下面的。

這是筆者那個雲虛擬服務器上的靜態資源文件。 

4： 第四步我們講如何把文件放到服務器上，因爲項目代碼我們可以走jenkins自動化構建（過程複雜，使用次數多，所以我們要自動化），但是一些靜態文件的上傳用手動方式會更加合適（過程簡單，使用次數少）。我們需要下載一款可以向遠程服務器推送文件的軟件，下面筆者選擇了FileZilla 

安裝完FileZilla之後，我們打開它。操作面板如下：

填完主機名，用戶名，和密碼端口之後你就可以點擊快速鏈接，成功之後會如下圖所示：

右邊遠程站點部分就是服務器上的文件。這個時候你可以去左邊的本地站點選擇文件，然後直接拖拽到右邊就行了。比如我隨便拖了一個文件，上傳成功後會有信息展示，你也會看到遠程站點多了一個文件。

這是筆者的雲虛擬服務器，htdocs文件下的所有靜態文件都可以通過域名訪問，這是服務器自己就設置好的，我們不需要操心。

下面是剛剛拖過去的文件訪問情況：

 這裏爲止我們就講完了如何往服務器上推送文件。除了雲虛擬服務器我們可以利用htdocs文件夾這一特性，其他的輕量應用服務器和雲服務器ECS都需要我們自己去配置nginx來指定訪問的目錄映射。這個我們後面會講。

5： 第五步我們需要一個客戶端去鏈接我們的輕量應用服務器，以便我們可以方便的進入控制檯去操作服務器。如下圖你可以選擇遠程鏈接，這個時候會出現一個linux的操作面板。直接在網站中使用遠程連接失敗概率很大，這個時候你可以選擇創建工單，向售後工程師求救。或者用客戶端進入。

下面我們下載putty客戶端，就是下面那個小東西：

成功部署完後我們雙擊putty進入他的操作面板：

 

寫完相關信息，記得save一下保留當前配置，後面再進入的話只有load加載配置就行了，配置完後我們可以用open進入下一步：

 

按照提示輸入完用戶名和密碼，我們就可以在這個linux面板 操作服務器了，比如新建文件，下載軟件啊等等。這裏需要有一點linux知識，不熟悉的朋友可以先去自行補充一下。

6:第六步下載jenkins。用putty連接好我們的遠程服務器後，我們進入linux操作面板。這裏我們可以自行選擇如何安裝jenkins，這裏筆者是用了wget http://mirrors.jenkins.io/war/latest/jenkins.war這個指令去下載jenkins.war。下面是筆者新建了一個test目錄展示一下下載過程的截圖：

下文是筆者之前下完的jenkins.war，這裏筆者將所有下載的資源都放入了/usr/local/src中，這個是個人習慣而已。

 jenkins下載完之後，還需要下載jdk，因爲我們需要jdk去運行我們jenkins。這個大家自行去下載部署，看上面的截圖筆者用的jdk是jdk-11.0.4版本。jdk下載完後就可以運行我們的jenkins了，下面是運行jenkins的命令：

                                  /usr/java/jdk-11.0.4/bin/java -jar /usr/local/src/jenkins.war --httpPort=8888

前面是你的jdk解壓完之後的java所在路徑 /usr/local/src/jenkins.war是你的jenkins.war 所在路徑, httpPort是你的jenkins啓動後的訪問端口。這裏筆者爲了方便就把這個命令寫成了一個腳本，後來發現還是不太方便，就把啓動jenkins的指令設置成了全局命令，這樣你無論在哪個文件夾下就都能快速的啓動jenkins了。下面是筆者特地建了一個script目錄用來存放腳本。

 

下面教大家怎麼把命令設置成全局指令。

如上圖所示執行命令 vim ~/.bashrc ，編輯這個文件，添加·alias,保存退出，然後source 更新這個文件。比如你要運行jenkins，只要輸入jenk回車就行了，這就相當於在執行/usr/java/jdk-11.0.4/bin/java -jar /usr/local/src/jenkins.war --httpPort=8888這個命令了。這裏筆者還寫了一些操作nginx的全局指令，主要還是爲了方便。注意改完文件之後一定要再用source更新一下，不然是不會生效的，命令如下source ~/.bashrc。

        這個時候我們用命令啓動jenkins，成功之後還需要去服務器那裏開通一下端口，不然是無法訪問的，因爲被防火牆攔截掉了。

如圖所示，筆者直接把8000~8999的端口都開通了，我們的jenkins佔用的端口是8888剛好在這個範圍內。這個時候我們就可以在jenkins啓動成功之後，通過服務器的IP+8888端口訪問了。

 

如圖所示就是成功訪問到了我們的jenkins了。第一次安裝jenkins的時候還需要去設置一下管理員，頁面上會有相應的提示的。初始的密碼在安裝過程中會打印出來也可以去/root/.jenkins/secrets/initialAdminPassword這個文件下找 。

7：第七步我們開始配置jenkins。

我們選擇自由風格的軟件項目。 這裏要配置的東西有點多，筆者會逐一講解。

如上圖進入配置頁面，選擇參數化構建，添加選項時選擇 Git Parameter。如果沒有Git Parameter這個選項，需要我們自己去jenkins的插件管理裏面去下載相關的插件（位置在系統管理-->插件管理）。

 

 沒有憑證的朋友請點擊添加去添加一個。

接下來我們開始寫構建腳本如下圖所示：

這裏簡單說明一下腳本內容。echo Branch: $BRANCH 是輸出所選的分支，會打印到控制檯上。可以不寫。筆者的前端項目放在了/workspace/web文件夾下，master，dev,test 對應着github上的分支，web下有這三個目錄，需要提前創建。下面以$BRANCH爲'origin/master'爲例講解。

 這裏的腳本內容是根據你前端項目來編寫的，這裏筆者是用Vue腳手架搭的項目，所以項目需要進行打包。node_modules文件夾很大，爲了提高打包速度，我們不會去刪除它。項目打包完成之後，我們需要的文件都在dist文件夾下，所以這時我們把dist中的內容拷貝並複製到/workspace/dist/master（當前構建的是master分支）下，拷貝之前記得先刪除該文件夾下的文件，因爲文件覆蓋有時候會無效，刪除是最保險的。這一步完成後我們的jenki部署就完成了，記得點擊保存和應用。然後我們可以去構建我們的項目了，如下圖所示：

 

 

 

 

 項目構建成功之後是藍色，構建失敗是紅色。

8： 第八步我們來配置nginx，讓我們訪問域名的時候可以訪問到我們指定的網頁文件。前面我們經過jenkins構建後的文件存放在

/workspace/dist/master 目錄下我們的nginx配置的目的就是當訪問網站域名的時候，可以訪問到/workspace/dist/master/index.html文件。首先我們先下載nginx。下載完成後我們去修改nginx的配置文件。

下面是筆者nginx的配置文件：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


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

    #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  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip  on;
    #server {
    #    listen      8711;
    #    server_name  shellcode.site1;
    #	rewrite ^/(.*) http://182.92.6.5:8888 permanent;
    # }
    server {
	listen      80;
	listen      443 default ssl;
        server_name  shellcode.site;
        #ssl on;
	ssl_certificate cert/2689225_shellcode.site.pem;
	ssl_certificate_key cert/2689225_shellcode.site.key;
	ssl_session_timeout 5m;
	ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
	ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
	ssl_prefer_server_ciphers on;   
	
        #charset koi8-r;

        #access_log  logs/host.access.log  main;        
	
        location / {
          root   /workspace/dist/master/;
          index  index.html index.htm;
        }

	location /jenkins/ {
          rewrite ^/(.*) http://182.92.6.5:8888 permanent;
        }

	location /api/ {
	  proxy_pass https://182.92.6.5:8008;
	}
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
    
    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

 配置完之後。我們就可以啓動nginx了。之前我們把nginx的操作命令都封裝成了全局命令忘記的朋友可以往上看‘把命令設置成全局指令。’這一步。我們用ng啓動nginx，完成之後我們可以成功訪問到我們的網站頁面了。如下圖：

到此位置我們的自動化構建就完成了。但是美中不足的就是，我們退出linux控制面板的時候 jenkins就停掉了，我們無法在通過IP+8888端口訪問jenkins了。解決方法就是讓jenkins 運行在後臺，這個時候我們就需要pm2去做進程管理了。

9：第九步我們來用pm2做進程管理，讓jenkins和nginx可以運行在後臺。先下載pm2,下載成功之後我們用pm2 的指令去啓動jenkins和nginx。

這個時候我們即使退出linux控制面板jenkins仍然會在後臺運行了。大功告成。

        做個小小的總結，經歷過這一次項目的自動化構建，裏面最頭大的地方就是各種配置，所以寫下此文以後自己忘記了也可以過來看看。項目做好自動化，以後發版只要代碼上傳完，點擊一下構建就完成了，這是工作中很重要的一環。我想沒有人喜歡重複的工作，所以纔出現了自動化構建。前期的配置的確很多，但是一旦完成就很香了。你說你有那精力去手動部署，自動化構建他能不香嗎？本文雖然提到了所有自動化構建的過程，但還是有一些無關緊要的細節還是省略了。如果各位有什麼疑問，可以在下方留言。

        最後說一句，大家請注意後面開發網站時一定要加備案號，並且提供跳轉鏈接到工信部，不然可是要罰款的。