资讯专栏INFORMATION COLUMN

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

OldPanda / 897人阅读

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

关于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对前端项目部署进行进一步的实战。

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

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

相关文章

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

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

    王陆宽 评论0 收藏0
  • Vuejs 实战观书有感 C1

    摘要:还有一点比较重要的是,如何在快速迭代的软件开发周期内,去解放生产力。于是就会大量涌现很多优秀的开源框架和扩展库,去解决现实生活中的实际问题。而这一切都是在朝着提高开发效率,降低维护成本而前进。结合书中的观点去总结和思考。 关于 Vue.js showImg(https://segmentfault.com/img/bVbk73v?w=252&h=253); 简单小巧的核心(代码压缩后大...

    赵连江 评论0 收藏0
  • Vuejs 实战观书有感 C1

    摘要:还有一点比较重要的是,如何在快速迭代的软件开发周期内,去解放生产力。于是就会大量涌现很多优秀的开源框架和扩展库,去解决现实生活中的实际问题。而这一切都是在朝着提高开发效率,降低维护成本而前进。结合书中的观点去总结和思考。 关于 Vue.js showImg(https://segmentfault.com/img/bVbk73v?w=252&h=253); 简单小巧的核心(代码压缩后大...

    weapon 评论0 收藏0
  • Docker实战:更轻松、更愉快、更高效

    摘要:接下来,我们来看一个更酷的工作流程,即通过引入来实现项目的持续集成。是一个持续集成发布平台,支持对容器进行测试。取消对的选中状态。 showImg(https://segmentfault.com/img/bVk4cF); 借助Docker,我们可以更容易地进行web应用部署,而同时不必头疼于项目依赖、环境变量以及各种配置问题,Docker可以快捷、高效地处理好这一切。 而这也是本...

    hosition 评论0 收藏0
  • NodeJs+Express+Mysql + Vuejs 项目实战 - 大纲

    摘要:多一个技能多一条出路,祝你在自学道路上越走越好,掌握自己的核心技能,不只是优秀,还要成为不可替代的人 NodeJs+Express+Mysql + Vuejs 项目实战 最近准备写一系列文章,全面讲述如何基于NodeJs + Express + Mysql + Vuejs 从零开发前后端完全分离项目; 文笔及技术可能在某些方面欠佳,请您指正,共同学习进步 前端:Vuejs全家桶 后端:...

    noONE 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<