Docker实战之简单部署VueJs项目(7)

OldPanda 发布于2019-07-25 14:49 / 1069人阅读

摘要：最后以这个镜像为基础运行一个容器。对于这部分的内容，如有不懂的地方，可查看我之前有关于镜像构建的文章哦。，接下来会通过对前端项目部署进行进一步的实战。

关于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实战例子

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40496.html

Docker实战之简单部署VueJs项目(7)

摘要：最后以这个镜像为基础运行一个容器。对于这部分的内容，如有不懂的地方，可查看我之前有关于镜像构建的文章哦。，接下来会通过对前端项目部署进行进一步的实战。关于docker的优势就不多介绍了，之前的文章已经说得比较明白了，那么在学习了docker的一些知识后，现在该用它来做点事儿了，^_^，有点小兴奋。接下来就来看看docker怎样去部署一个VueJs的项目，我们从以下三点来进行： Vu...

王陆宽 2019-06-28 17:25 评论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