教你部署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 的 v-model用法实例
Nov 23 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
vue 实现上传组件
May 31 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 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定时计划任务的实现方法详解
2013/06/06 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
jquery禁用右键示例
2014/04/28 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
python求斐波那契数列示例分享
2014/02/14 Python
Cpy和Python的效率对比
2015/03/20 Python
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
Django中的文件的上传的几种方式
2018/07/23 Python
python构建基础的爬虫教学
2018/12/23 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
服务质量承诺书
2014/03/27 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
质量负责人岗位职责
2015/02/15 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
如何写通讯稿
2015/07/22 职场文书
九年级英语教学反思
2016/02/15 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js
使用Python获取字典键对应值的方法
2022/04/26 Python