Docker實戰之簡單部署VueJs項目(7)

關於docker的優點就很少介紹了，以前的文章已經說得比較明白了，那麼在學習了docker的一些知識後，如今該用它來作點事兒了，^_^，有點小興奮。接下來就來看看docker怎樣去部署一個VueJs的項目，咱們從如下三點來進行：

• VueJs項目初始化以及打包
• Nginx的配置
• Docker鏡像文件

VueJs項目初始化

這裏經過vue-cli對一個vuejs項目進行初始化，命令以下：

vue init webpack projectName

這裏項目名稱列如是docker-web，對項目初始化組件HelloWord.vue組件進行簡單的修改

而後經過npm run build命令進行項目的打包

Nginx的配置

這裏首先須要從docker hub上面進行nginx進行的拉取，可經過docker pull nginx進行獲取，獲取完後，可經過命令docker image ls 命令來查看本地已存在的鏡像列表

而後在項目(docker-web)的根目錄新增一個nginx.conf文件，配置以下：

Docker鏡像文件

首先在項目(docker-web)的根目錄新增一個Dockerfile文件，內容以下：

而後須要經過Dockerfile這個文件來進行鏡像的製做、運行，可經過docker build -t 鏡像名稱來構建制做一個鏡像，如：

再次查看該鏡像是否已經構建完成。

最後以這個鏡像爲基礎運行一個容器。

對於這部分的內容，若有不懂的地方，可查看我以前有關於docker鏡像構建的文章哦。
至此，全部準備工做已完成，而後在瀏覽器地址欄輸入localhost:3000訪問網頁，便可看到剛纔在docker-web這個項目的HelloWord.vue組件中修改的內容。

Over，接下來會經過docker對前端項目部署進行進一步的實戰。