前端自動化部署方案探索(一)：Docker篇

Lymon發表於2019-05-26
前端Docker

背景

在部署專案的過程中，以前一直都是在本地部署，然後通過xftp上傳打包好的檔案到伺服器上，這個過程太過於繁瑣。而現在就職的公司採用的是自動化部署的方案，在功能開發完後，將功能分支合併到master分支上，伺服器就會自動構建程式碼。所以才有了學習自動化部署的想法。

本文中的一些概念、步驟，可能解釋的不是很清楚或者有錯誤，有任何問題、想法的還懇請矯正 :) 對於一些概念和命令等，在文件上查詢更好，所以在這裡就沒有對命令進行詳細的解釋。

正文

前端專案往往會根據環境的不同而出現各種各樣的問題，並且在配置環境的過程中，大多情況下都很麻煩，所以使用Docker作為專案執行的環境。

概念

Docker初用只需要瞭解映象、容器這兩個概念就足夠了。

  • 映象： 映象是在執行時使用的檔案系統和引數構成的。我們可以將其看作一個具有所需要的環境的微型的系統。
  • 容器： 容器可以看作是映象執行的一個例項。可以簡單地將映象和容器的關係看作是類和例項的關係。

安裝

筆者是在ubuntu16.04的環境下安裝的，根據docker文件安裝步驟如下

$ sudo apt-get update
$ sudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
$ sudo apt-key fingerprint 0EBFCD88
$ sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
$ sudo apt-get update
$ sudo apt-get install docker-ce docker-ce-cli containerd.io
複製程式碼

在curl和新增倉庫的步驟時，可以將其改成阿里雲源，否則安裝和下載映象時會很慢

$ curl -fsSL http://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
$ sudo add-apt-repository "deb [arch=amd64] http://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable"
複製程式碼

安裝成功後可以執行以下命令來判斷是否安裝成功

$ sudo docker run hello-world
複製程式碼

若出現hello from docker等文字則安裝成功。

瞭解Docker的操作

這裡以實際例子來構建一個docker容器並且在伺服器上跑起來

我們使用nginx的映象作為例子，首先先下載nginx映象

$ docker pull nginx
複製程式碼

下載成功後我們可以檢視系統中已存在的映象的資訊

$ docker image ls
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
nginx               latest              53f3fd8007f7        2 weeks ago         109MB
複製程式碼

這時候我們就有了一個nginx的映象，我們使用該映象來建立並執行一個容器，然後在瀏覽器檢視該效果。

$ docker run -d -p 8081:80 --name mynginx nginx
複製程式碼

其中,-d是指讓容器在後臺執行，-p是進行埠對映，將伺服器的8081埠對映到容器內部的80埠，建立成功後會輸出一串字串表示建立成功，我們可以通過docker ps命令檢視容器是否正在執行

$ docker ps
CONTAINER ID        IMAGE        ...               PORTS                  NAMES
6dd4380ba708        nginx        ...      0.0.0.0:8081->80/tcp            mynginx
複製程式碼

看到該容器資訊後，我們訪問伺服器的8081埠，就可以看到nginx的歡迎介面了。

前端自動化部署方案探索(一)：Docker篇
如果訪問失敗的話，可以檢視租用伺服器的防火牆，檢視8081埠是否開放

實戰

接下來，我們用nginx映象為基礎，修改該映象並建立一個容器來執行一個vue應用。

一、 首先我們建立一個vue應用，先不進行修改，打包成名為dist的資料夾，然後在伺服器上建立一個工作目錄用於測試，將打包後的檔案放到工作目錄中。

二、 接著我們對nginx映象進行修改。在docker中有兩種修改映象的方式：

# 使用該命令進入容器
$ docker run -it --name mynginx nginx /bin/bash
# 然後在容器內進行修改，修改後提交該映象，-m為說明資訊，username為你的使用者名稱
$ docker commit -m "update the nginx" [username]/nginx:v2
複製程式碼

這種方式雖然簡單，但是不利於在團隊中使用，因為團隊中的人不知道你對該映象進行了什麼操作，所以我們使用第二種方案來修改映象

  1. 使用Dockerfile來執行一串的命令對映象進行修改。首先我們建立一個Dockerfile並編寫
# FROM關鍵字：取決於基於什麼映象構建
FROM nginx

# 將打包好的檔案複製到容器中的該路徑下
COPY dist/ /usr/share/nginx/html/

# 將修改的檔案替換掉容器中的nginx配置
COPY default.conf /etc/nginx/conf.d/default.conf
複製程式碼

default.conf內容如下

  server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #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   /usr/share/nginx/html;
    }
  }
複製程式碼

三、 將檔案都準備好後，我們構建該映象並且建立、執行容器

# 要在Dockerfile所在路徑下執行該命令，並且注意後面有個"."
$ docker build -t="[username]/mynginx" .
# 構建成功後，我們使用該映象來執行容器
$ docker run -it -d -p 3000:80 [username]/mynginx 
複製程式碼

四、 執行成功後，我們在瀏覽器輸入"伺服器ip地址:3000"，即可看到vue專案的歡迎介面。

總結

在Docker篇中，我們知道了如何使用docker去部署一個應用。使用docker部署應用的好處在於，不論你是在windows還是在mac上編寫docker，應用所處於的執行環境都是一樣的，在伺服器上你不需要重新部署一遍環境，減少了我們的工作量。

下一篇中，我會介紹如何通過git的webhook功能，實現提交程式碼後，伺服器自動執行剛才我們所做的步驟。

最後，如果本文有什麼錯誤之處，懇請指正。

相關文章