教你部署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 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue 实现上传组件
May 31 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
详解Vue3使用axios的配置教程
Apr 29 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作为Shell脚本语言使用
2006/10/09 PHP
php a simple smtp class
2007/11/26 PHP
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
PHP中的事务使用实例
2015/05/26 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
js 学习笔记(三)
2009/12/29 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
django初始化数据库的实例
2018/05/27 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
浅析Django中关于session的使用
2019/12/30 Python
什么是python的自省
2020/06/21 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
在C#中如何实现多态
2014/07/02 面试题
董事长职责范文
2013/11/08 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
科学育儿宣传标语
2014/10/08 职场文书
储备店长岗位职责
2015/04/14 职场文书
婚姻出轨保证书
2015/05/08 职场文书
单位工资证明范本
2015/06/12 职场文书
工作简报格式范文
2015/07/21 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书