教你部署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的hash值原理也是table切换实例代码
Dec 14 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
Vue操作Storage本地化存储
Apr 29 Vue.js
vue实现简易音乐播放器
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
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
php实现每日签到功能
2018/11/29 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
nodejs教程之入门
2014/11/21 NodeJs
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
webpack多页面开发实践
2017/12/18 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
JS实现li标签的删除
2019/04/12 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
python常规方法实现数组的全排列
2015/03/17 Python
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
python3跳出一个循环的实例操作
2020/08/18 Python
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
《在大海中永生》教学反思
2014/02/24 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
优秀员工演讲稿
2014/05/19 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书