教你部署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 19 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
关于Vue中的options选项
Mar 22 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
php设计模式  Command(命令模式)
2011/06/17 PHP
php实现的二分查找算法示例
2017/06/20 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
基于python神经卷积网络的人脸识别
2018/05/24 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
德国高性价比网上药店:medpex
2017/07/09 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
社区安全检查制度
2014/02/03 职场文书
欢迎领导标语
2014/06/27 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
道歉的话怎么说
2015/05/12 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS