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

2021-09-24 07:55:59 字數 3522 閱讀 5358

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

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

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

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

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

複製**

$ curl -fssl  | sudo apt-key add -

$ sudo add-apt-repository "deb [arch=amd64] $(lsb_release -cs) stable"

複製**

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

$ sudo docker run hello-world

複製**

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

了解docker的操作

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

$ 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應用。

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

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

# 使用該命令進入容器

$ docker run -it --name mynginx nginx /bin/bash

# 然後在容器內進行修改,修改後提交該映象,-m為說明資訊,username為你的使用者名稱

$ docker commit -m "update the nginx" [username]/nginx:v2

複製**

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

使用dockerfile來執行一串的命令對映象進行修改。首先我們建立乙個dockerfile並編寫

# from關鍵字:取決於基於什麼映象構建

from nginx

# 將打包好的檔案複製到容器中的該路徑下

copy dist/ /usr/share/nginx/html/

# 將修改的檔案替換掉容器中的nginx配置

copy default.conf /etc/nginx/conf.d/default.conf

複製**

default.conf內容如下

server 

#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

}複製**

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

# 要在dockerfile所在路徑下執行該命令,並且注意後面有個"."

$ docker build -t="[username]/mynginx" .

# 構建成功後,我們使用該映象來執行容器

$ docker run -it -d -p 3000:80 [username]/mynginx

複製**

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

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

前端自動化部署方案 實踐(配合shell)

以下例項專案為vue專案,其他專案當然也雷同咯 在專案中建乙個這個麼指令碼檔案 不說了,上 bin sh handle 1 env 2 遠端部署機 webhook 如果用遠端機器部署的話就要用到以下方法 prehandle 清空dist目錄 emptyremotedist 傳送檔案到正式服 tran...

mysql自動化部署方案 什麼是自動化部署?

自動化部署將可交付產品,快速且安全地交付使用者使用的一套系統和工具。系統會自動構建 測試並準備 變更,以便將其發布到指定環境的過程,包括開發環境 預發布環境 生產環境等。自動化部署工具介紹 簡要介紹 該工具是資料庫自動化部署調優工具,支援mysql 8.0.17 8.0.18和postgresql ...

Jenkins SVN 前端自動化部署

jenkins是什麼?昨天之前我也不知道。習慣上班之前刷刷新聞或技術相關知識 了解到jenkins。其實就是乙個自動打包自動部署的乙個工具,不過感覺挺好玩的。我比較菜好了一天多的時間才弄好。如果你也想用那就用吧反正一聽自動化就感覺挺高大上的 jenkins svn win vue專案 和別的軟體一樣...