教你部署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中如何自定义右键菜单详解
Dec 08 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
如何优化vue打包文件过大
Apr 13 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的引用原因分析
2012/09/06 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
php微信开发之谷歌测距
2018/06/14 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
javascript 控制弹出窗口
2007/04/10 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
比利时香水网上商店:NOTINO
2018/03/28 全球购物
普通党员对照检查材料
2014/09/24 职场文书
单位租房协议范本
2014/12/03 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
《给予树》教学反思
2016/03/03 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
Nginx进程调度问题详解
2021/09/25 Servers
Python 正则模块详情
2021/11/02 Python
解决MySQL报“too many connections“错误
2022/04/19 MySQL