教你部署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+vue-router+element-plus初实践
Dec 02 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
Vue深入理解插槽slot的使用
Aug 05 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中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
php常用hash加密函数
2014/11/22 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
jquery 常用操作方法
2010/01/28 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
如何将json数据转换为python数据
2020/09/04 Python
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
药品质量检测应届生求职信
2013/11/14 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
如何通过一篇文章了解Python中的生成器
2022/04/02 Python
使用refresh_token实现无感刷新页面
2022/04/26 Javascript