Docker實(shí)戰(zhàn)之簡單部署VueJs項(xiàng)目(7)

OldPanda 發(fā)布于2019-07-25 14:49 / 1103人閱讀

摘要：最后以這個(gè)鏡像為基礎(chǔ)運(yùn)行一個(gè)容器。對于這部分的內(nèi)容，如有不懂的地方，可查看我之前有關(guān)于鏡像構(gòu)建的文章哦。，接下來會(huì)通過對前端項(xiàng)目部署進(jìn)行進(jìn)一步的實(shí)戰(zhàn)。

關(guān)于docker的優(yōu)勢就不多介紹了，之前的文章已經(jīng)說得比較明白了，那么在學(xué)習(xí)了docker的一些知識后，現(xiàn)在該用它來做點(diǎn)事兒了，^_^，有點(diǎn)小興奮。接下來就來看看docker怎樣去部署一個(gè)VueJs的項(xiàng)目，我們從以下三點(diǎn)來進(jìn)行：

VueJs項(xiàng)目初始化以及打包

Nginx的配置

Docker鏡像文件

VueJs項(xiàng)目初始化

這里通過vue-cli對一個(gè)vuejs項(xiàng)目進(jìn)行初始化，命令如下：

vue init webpack projectName

這里項(xiàng)目名稱列如是docker-web，對項(xiàng)目初始化組件HelloWord.vue組件進(jìn)行簡單的修改

然后通過npm run build命令進(jìn)行項(xiàng)目的打包

Nginx的配置

這里首先需要從docker hub上面進(jìn)行nginx進(jìn)行的拉取，可通過docker pull nginx進(jìn)行獲取，獲取完后，可通過命令docker image ls 命令來查看本地已存在的鏡像列表

然后在項(xiàng)目(docker-web)的根目錄新增一個(gè)nginx.conf文件，配置如下：

Docker鏡像文件

首先在項(xiàng)目(docker-web)的根目錄新增一個(gè)Dockerfile文件，內(nèi)容如下：

然后需要通過Dockerfile這個(gè)文件來進(jìn)行鏡像的制作、運(yùn)行，可通過docker build -t 鏡像名稱來構(gòu)建制作一個(gè)鏡像，如：

再次查看該鏡像是否已經(jīng)構(gòu)建完成。

最后以這個(gè)鏡像為基礎(chǔ)運(yùn)行一個(gè)容器。

對于這部分的內(nèi)容，如有不懂的地方，可查看我之前有關(guān)于docker鏡像構(gòu)建的文章哦。
至此，所有準(zhǔn)備工作已完成，然后在瀏覽器地址欄輸入localhost:3000訪問網(wǎng)頁，即可看到剛才在docker-web這個(gè)項(xiàng)目的HelloWord.vue組件中修改的內(nèi)容。

Over，接下來會(huì)通過docker對前端項(xiàng)目部署進(jìn)行進(jìn)一步的實(shí)戰(zhàn)。