教你部署vue项目到docker


Posted in Vue.js onApril 05, 2022

让我在5分钟你教不会你把项目部署到docker,前提是你得服务器装有docker,这里方便装宝塔,大佬当我没说。

教你部署vue项目到docker

大致分为3步:

第一是弄一个nginx的配置文件然后构建镜像的时候把它放进去取代原来的配置和写Dockerfile生成镜像的一些配置

第二是生成镜像

第三是生成启动容器,ok开始,顺便抛砖引玉

第一步

教你部署vue项目到docker

教你部署vue项目到docker

server {
listen 80;
server_name localhost; # docker服务宿主机的ip
 
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
 
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

写docker镜像配置

教你部署vue项目到docker

教你部署vue项目到docker

FROM nginx
MAINTAINER yaohuowang
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/

教你部署vue项目到docker

第二步,生成镜像 

来到当前文件夹,输入命令 docker build -t yaohot .

注意图上打错字了,yoahou,以图片的命令为主

教你部署vue项目到docker

 然后构建镜像完成

教你部署vue项目到docker

第三步,生成(启动)一个容器

命令:docker run -d -p 86:80 --name houtai yaohot

教你部署vue项目到docker

 ok

教你部署vue项目到docker

教你部署vue项目到docker

总结

到此这篇关于部署vue项目到docker的文章就介绍到这了,更多相关部署vue项目到docker内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 #Vue.js
vue中div禁止点击事件的实现
Apr 02 #Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 #Vue.js
Vue+TypeScript中处理computed方式
Apr 02 #Vue.js
Vue+Flask实现图片传输功能
Apr 01 #Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 #Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 #Vue.js
You might like
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
js+html实现周岁年龄计算器
2019/06/25 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
高中体育教学反思
2014/01/24 职场文书
个人简历自我评价
2014/02/02 职场文书
税务干部鉴定材料
2014/02/11 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
C++程序员求职信
2014/05/07 职场文书
关于安全演讲稿
2014/05/09 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL