教你部署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中利用three.js实现全景图的完整示例
Dec 07 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 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
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
使用python实现画AR模型时序图
2019/11/20 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
互动出版网:专业书籍
2017/03/21 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
深圳茁壮笔试题
2015/05/28 面试题
4s店机修工岗位职责
2013/12/20 职场文书
应届毕业生求职自荐书
2014/01/03 职场文书
二人合伙经营协议书
2014/09/13 职场文书
小学师德师风整改措施
2014/10/27 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
对PyTorch中inplace字段的全面理解
2021/05/22 Python
Python代码风格与编程习惯重要吗?
2021/06/03 Python