資訊專欄INFORMATION COLUMN
摘要：最后以這個(gè)鏡像為基礎(chǔ)運(yùn)行一個(gè)容器。對(duì)于這部分的內(nèi)容，如有不懂的地方，可查看我之前有關(guān)于鏡像構(gòu)建的文章哦。，接下來(lái)會(huì)通過(guò)對(duì)前端項(xiàng)目部署進(jìn)行進(jìn)一步的實(shí)戰(zhàn)。
關(guān)于docker的優(yōu)勢(shì)就不多介紹了，之前的文章已經(jīng)說(shuō)得比較明白了，那么在學(xué)習(xí)了docker的一些知識(shí)后，現(xiàn)在該用它來(lái)做點(diǎn)事兒了，^_^，有點(diǎn)小興奮。接下來(lái)就來(lái)看看docker怎樣去部署一個(gè)VueJs的項(xiàng)目，我們從以下三點(diǎn)來(lái)進(jìn)行：
VueJs項(xiàng)目初始化以及打包
Nginx的配置
Docker鏡像文件
VueJs項(xiàng)目初始化這里通過(guò)vue-cli對(duì)一個(gè)vuejs項(xiàng)目進(jìn)行初始化，命令如下：
vue init webpack projectName
這里項(xiàng)目名稱列如是docker-web，對(duì)項(xiàng)目初始化組件HelloWord.vue組件進(jìn)行簡(jiǎn)單的修改
然后通過(guò)npm run build命令進(jìn)行項(xiàng)目的打包
這里首先需要從docker hub上面進(jìn)行nginx進(jìn)行的拉取，可通過(guò)docker pull nginx進(jìn)行獲取，獲取完后，可通過(guò)命令docker image ls 命令來(lái)查看本地已存在的鏡像列表
然后在項(xiàng)目(docker-web)的根目錄新增一個(gè)nginx.conf文件，配置如下：
首先在項(xiàng)目(docker-web)的根目錄新增一個(gè)Dockerfile文件，內(nèi)容如下：
然后需要通過(guò)Dockerfile這個(gè)文件來(lái)進(jìn)行鏡像的制作、運(yùn)行，可通過(guò)docker build -t 鏡像名稱來(lái)構(gòu)建制作一個(gè)鏡像，如：
再次查看該鏡像是否已經(jīng)構(gòu)建完成。
最后以這個(gè)鏡像為基礎(chǔ)運(yùn)行一個(gè)容器。
對(duì)于這部分的內(nèi)容，如有不懂的地方，可查看我之前有關(guān)于docker鏡像構(gòu)建的文章哦。
至此，所有準(zhǔn)備工作已完成，然后在瀏覽器地址欄輸入localhost:3000訪問(wèn)網(wǎng)頁(yè)，即可看到剛才在docker-web這個(gè)項(xiàng)目的HelloWord.vue組件中修改的內(nèi)容。
Over，接下來(lái)會(huì)通過(guò)docker對(duì)前端項(xiàng)目部署進(jìn)行進(jìn)一步的實(shí)戰(zhàn)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/27926.html
摘要：最后以這個(gè)鏡像為基礎(chǔ)運(yùn)行一個(gè)容器。對(duì)于這部分的內(nèi)容，如有不懂的地方，可查看我之前有關(guān)于鏡像構(gòu)建的文章哦。，接下來(lái)會(huì)通過(guò)對(duì)前端項(xiàng)目部署進(jìn)行進(jìn)一步的實(shí)戰(zhàn)。 關(guān)于docker的優(yōu)勢(shì)就不多介紹了，之前的文章已經(jīng)說(shuō)得比較明白了，那么在學(xué)習(xí)了docker的一些知識(shí)后，現(xiàn)在該用它來(lái)做點(diǎn)事兒了，^_^，有點(diǎn)小興奮。接下來(lái)就來(lái)看看docker怎樣去部署一個(gè)VueJs的項(xiàng)目，我們從以下三點(diǎn)來(lái)進(jìn)行： Vu...
摘要：還有一點(diǎn)比較重要的是，如何在快速迭代的軟件開發(fā)周期內(nèi)，去解放生產(chǎn)力。于是就會(huì)大量涌現(xiàn)很多優(yōu)秀的開源框架和擴(kuò)展庫(kù)，去解決現(xiàn)實(shí)生活中的實(shí)際問(wèn)題。而這一切都是在朝著提高開發(fā)效率，降低維護(hù)成本而前進(jìn)。結(jié)合書中的觀點(diǎn)去總結(jié)和思考。 關(guān)于 Vue.js showImg(https://segmentfault.com/img/bVbk73v?w=252&h=253); 簡(jiǎn)單小巧的核心（代碼壓縮后大...
摘要：還有一點(diǎn)比較重要的是，如何在快速迭代的軟件開發(fā)周期內(nèi)，去解放生產(chǎn)力。于是就會(huì)大量涌現(xiàn)很多優(yōu)秀的開源框架和擴(kuò)展庫(kù)，去解決現(xiàn)實(shí)生活中的實(shí)際問(wèn)題。而這一切都是在朝著提高開發(fā)效率，降低維護(hù)成本而前進(jìn)。結(jié)合書中的觀點(diǎn)去總結(jié)和思考。 關(guān)于 Vue.js showImg(https://segmentfault.com/img/bVbk73v?w=252&h=253); 簡(jiǎn)單小巧的核心（代碼壓縮后大...
摘要：接下來(lái)，我們來(lái)看一個(gè)更酷的工作流程，即通過(guò)引入來(lái)實(shí)現(xiàn)項(xiàng)目的持續(xù)集成。是一個(gè)持續(xù)集成發(fā)布平臺(tái)，支持對(duì)容器進(jìn)行測(cè)試。取消對(duì)的選中狀態(tài)。 showImg(https://segmentfault.com/img/bVk4cF); 借助Docker，我們可以更容易地進(jìn)行web應(yīng)用部署，而同時(shí)不必頭疼于項(xiàng)目依賴、環(huán)境變量以及各種配置問(wèn)題，Docker可以快捷、高效地處理好這一切。 而這也是本...
摘要：多一個(gè)技能多一條出路，祝你在自學(xué)道路上越走越好，掌握自己的核心技能，不只是優(yōu)秀，還要成為不可替代的人 NodeJs+Express+Mysql + Vuejs 項(xiàng)目實(shí)戰(zhàn) 最近準(zhǔn)備寫一系列文章，全面講述如何基于NodeJs + Express + Mysql + Vuejs 從零開發(fā)前后端完全分離項(xiàng)目； 文筆及技術(shù)可能在某些方面欠佳，請(qǐng)您指正，共同學(xué)習(xí)進(jìn)步 前端：Vuejs全家桶 后端：...
閱讀 780·2021-10-27 14:15
閱讀 1259·2021-10-15 09:42
閱讀 2798·2019-08-30 15:53
閱讀 1333·2019-08-23 17:02
閱讀 3022·2019-08-23 16:23
閱讀 3247·2019-08-23 15:57
閱讀 3536·2019-08-23 14:39
閱讀 572·2019-08-23 14:35
