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

王陸寬發布于2019-06-28 17:25 / 2653人閱讀

摘要：最后以這個鏡像為基礎運行一個容器。對于這部分的內容，如有不懂的地方，可查看我之前有關于鏡像構建的文章哦。，接下來會通過對前端項目部署進行進一步的實戰。

關于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對前端項目部署進行進一步的實戰。

GPU云服務器云服務器 vuejs項目 docker入門實戰 docker技術實戰 docker實戰例子

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/27926.html

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

摘要：最后以這個鏡像為基礎運行一個容器。對于這部分的內容，如有不懂的地方，可查看我之前有關于鏡像構建的文章哦。，接下來會通過對前端項目部署進行進一步的實戰。關于docker的優勢就不多介紹了，之前的文章已經說得比較明白了，那么在學習了docker的一些知識后，現在該用它來做點事兒了，^_^，有點小興奮。接下來就來看看docker怎樣去部署一個VueJs的項目，我們從以下三點來進行： Vu...

OldPanda 2019-07-25 14:49 評論0 收藏0
Vuejs 實戰觀書有感 C1

摘要：還有一點比較重要的是，如何在快速迭代的軟件開發周期內，去解放生產力。于是就會大量涌現很多優秀的開源框架和擴展庫，去解決現實生活中的實際問題。而這一切都是在朝著提高開發效率，降低維護成本而前進。結合書中的觀點去總結和思考。關于 Vue.js showImg(https://segmentfault.com/img/bVbk73v?w=252&h=253); 簡單小巧的核心（代碼壓縮后大...

趙連江 2019-07-01 11:05 評論0 收藏0
Vuejs 實戰觀書有感 C1

摘要：還有一點比較重要的是，如何在快速迭代的軟件開發周期內，去解放生產力。于是就會大量涌現很多優秀的開源框架和擴展庫，去解決現實生活中的實際問題。而這一切都是在朝著提高開發效率，降低維護成本而前進。結合書中的觀點去總結和思考。關于 Vue.js showImg(https://segmentfault.com/img/bVbk73v?w=252&h=253); 簡單小巧的核心（代碼壓縮后大...

weapon 2019-08-23 14:06 評論0 收藏0
Docker實戰：更輕松、更愉快、更高效

摘要：接下來，我們來看一個更酷的工作流程，即通過引入來實現項目的持續集成。是一個持續集成發布平臺，支持對容器進行測試。取消對的選中狀態。 showImg(https://segmentfault.com/img/bVk4cF); 借助Docker，我們可以更容易地進行web應用部署，而同時不必頭疼于項目依賴、環境變量以及各種配置問題，Docker可以快捷、高效地處理好這一切。而這也是本...

hosition 2019-06-28 14:53 評論0 收藏0
NodeJs+Express+Mysql + Vuejs 項目實戰 - 大綱

摘要：多一個技能多一條出路，祝你在自學道路上越走越好，掌握自己的核心技能，不只是優秀，還要成為不可替代的人 NodeJs+Express+Mysql + Vuejs 項目實戰最近準備寫一系列文章，全面講述如何基于NodeJs + Express + Mysql + Vuejs 從零開發前后端完全分離項目；文筆及技術可能在某些方面欠佳，請您指正，共同學習進步前端：Vuejs全家桶后端：...

noONE 2019-08-23 14:55 評論0 收藏0