教你部署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实现下载文件流完整前后端代码
Nov 17 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 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
我的论坛源代码(五)
2006/10/09 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python如何实现文本转语音
2016/08/08 Python
python使用turtle库绘制树
2018/06/25 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
Python datetime包函数简单介绍
2019/08/28 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
python matplotlib拟合直线的实现
2019/11/19 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
专升本个人自我评价
2013/12/22 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
党员创先争优心得体会
2014/09/11 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
自主招生学校推荐信
2014/09/26 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
毕业典礼主持词
2015/06/29 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
解析python中的jsonpath 提取器
2022/01/18 Python