前端自動化部署方案探索(一)：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的歡迎界面了。

若是訪問失敗的話，能夠查看租用服務器的防火牆，查看8081端口是否開放

實戰

接下來，咱們用nginx鏡像爲基礎，修改該鏡像並建立一個容器來運行一個vue應用。

1、 首先咱們建立一個vue應用，先不進行修改，打包成名爲dist的文件夾，而後在服務器上建立一個工做目錄用於測試，將打包後的文件放到工做目錄中。

2、 接着咱們對nginx鏡像進行修改。在docker中有兩種修改鏡像的方式：

# 使用該命令進入容器
$ docker run -it --name mynginx nginx /bin/bash
# 而後在容器內進行修改，修改後提交該鏡像，-m爲說明信息，username爲你的用戶名
$ docker commit -m "update the nginx" [username]/nginx:v2
複製代碼

這種方式雖然簡單，可是不利於在團隊中使用，由於團隊中的人不知道你對該鏡像進行了什麼操做，因此咱們使用第二種方案來修改鏡像

2. 使用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;
    }
  }
複製代碼

3、 將文件都準備好後，咱們構建該鏡像而且建立、運行容器

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

4、 運行成功後，咱們在瀏覽器輸入"服務器ip地址:3000"，便可看到vue項目的歡迎界面。

總結

在Docker篇中，咱們知道了如何使用docker去部署一個應用。使用docker部署應用的好處在於，不論你是在windows仍是在mac上編寫docker，應用所處於的運行環境都是同樣的，在服務器上你不須要從新部署一遍環境，減小了咱們的工做量。

下一篇中，我會介紹如何經過git的webhook功能，實現提交代碼後，服務器自動執行剛纔咱們所作的步驟。

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