[指南] Vue.js 搭配 Docker 進行佈署

Docker 是個運用了虛擬化技術的套件,讓不同電腦上可以正常執行同樣的電腦程式。之所以有這項需求的產生,是由於每台電腦的作業系統、硬體配置、甚至是操作套件的版本都會有所差異。
dockerImage


虛擬機器和容器的不同

虛擬機器

虛擬機器是將應用程式所應用的作業系統環境整個打包起來,建立一個獨立的映像檔,這樣一來只要搬動這個檔案就可以運作。(例如:Mac 上的 Parallel Desktop)

容器

虛擬機器的缺點就是要安裝一個非常大檔案的作業系統(OS),而且也會耗費較多的記憶體。而 Docker 所建立的就是容器 (Container) 的概念,它不必先行完整安裝獨立的作業系統,花費的硬碟和記憶體空間也比較少。

映像檔、容器和倉庫

映像檔 Image

你可以把它當成一個模擬出來的執行環境,而彼此映像檔之間不會互相影響。當然,你不需要從頭造車。你可以從公開的倉庫(Repository)上取得像是 node.js 環境、mongoDB 服務…..等。不過就如名稱,映像檔是唯獨的。如果你有經歷過光碟片的時代,跟那個唯獨映像檔是一樣的概念。

容器 Container

用映像檔建立出來的實體(Instance)。彼此之間互相獨立,可以個別啟動、開始、停止、刪除。

倉庫 Repository

集中存放映像檔的地方


安裝 Docker 並建立 Demo 專案

1. 點選此連結,到 Docker 的官方網站進行下載
2. 安裝完畢後,先確定 docker 有常駐運行
3. 用 Vue Cli 新增一個 Demo 專案,先確定用 localhost:8080 開的起來

4. 在專案的根目錄新增一個 Dockerfile 的檔案
5. 在 Dockerfile 裡面輸入以下內容後儲存:

6. 邏輯上是先用 Docker 會依照 Dockerfile 的指令,將環境打包成一個映像檔(Image),然後你在根據這個生成的映像檔,來 run 出一個 Container
7. 輸入以下指令


參考資料

1. Docker 基礎教學與介紹 101
2. 全面易懂的Docker指令大全
3. Vue – 使用 Docker 佈署

按讚加入粉絲團

延伸閱讀