教你部署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 21 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
vue如何清除浏览器历史栈
May 25 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获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
PHP链表操作简单示例
2016/10/15 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
JS在IE下缺少标识符的错误
2014/07/23 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
关于Python 3中print函数的换行详解
2017/08/08 Python
Python线性方程组求解运算示例
2018/01/17 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
基于Python List的赋值方法
2018/06/23 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
计算机专业学生求职信分享
2013/12/15 职场文书
寄语十八大感言
2014/02/07 职场文书
《观舞记》教学反思
2014/04/16 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
导游词400字
2015/02/13 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
python playwright之元素定位示例详解
2022/07/23 Python
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技