教你部署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生命周期的深入理解
Dec 03 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 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
超级简单的php+mysql留言本源码
2009/11/11 PHP
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
Python函数中定义参数的四种方式
2014/11/30 Python
关于Django外键赋值问题详解
2017/08/13 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
python文件和文件夹复制函数
2020/02/07 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
HTML5进度条特效
2014/12/18 HTML / CSS
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
建筑工程管理专业自荐信范文
2013/12/28 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
健康家庭事迹材料
2014/05/02 职场文书
治超工作实施方案
2014/05/04 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python