Jenkins實現前端代碼的自動化部署

1）@Jenkins所在的服務器上

前端代碼經過NodeJS進行構建，因此第一步確保NodeJS在Jenkins服務器上的安裝和正常運行。

經過https://nodejs.org/en/download/，根據Jenkins服務器所在的操做系統下載，安裝以後，打開cmd

node -v
npm install

2）@Jenkins上

a. 安裝NodeJS插件。

b. 系統配置->全局工具配置->NodeJS->配置以下，其中安裝目錄爲Jenkins所在服務器上NodeJS的安裝目錄。

c. 新建一個自由風格的Jenkins任務，設置好源碼管理。

構建環境：（重要！不然npm命令沒法被識別！）

構建，使用npm run build：

構建後操做，將構建生成的dist目錄拷貝到要部署的遠程服務器上：

注意 dist/** 表明dist目錄下的全部文件和文件夾，dist/* 只表明dist目錄下的文件。

3）@部署的目標服務器上

a. 安裝Nginx：http://www.javashuo.com/article/p-xqngepif-bo.html

b. Nginx的配置文件在/etc/nginx/nginx.conf，修改nginx.conf，在http中添加一個server：

http { 

    #.....

    server {
        listen       8888;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;


        location / {
                    add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";

                root   html/build/dist;
            index  index.html index.htm;
                }

                location /zk/ {
            # 把 /zk 路徑下的請求轉發給真正的後端服務器
                        rewrite  ^/zk/(.*)$ /$1 break;
            proxy_pass http://localhost:9999;
        }

        #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;
        }
    }
}

Nginx所在的目錄爲/etc/nginx, 前端靜態文件上傳目錄爲/etc/nginx/html/build，確保文件路徑有效，mkdir相關文件夾。

重啓Nginx服務(可能會有啓動異常，參考解決)：

sudo systemctl stop nginx
sudo systemctl start nginx

c: 確保服務端已啓動，並使用配置中的端口號（本例中9999），經過http://<ip>:8888(根據nginx.conf中的配置肯定端口) 訪問！