教你部署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 26 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
Vue——解决报错 Computed property "****" was assigned to but it has no setter.
Dec 19 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
vue el-table实现递归嵌套的示例代码
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一些常用的正则表达式字符的一些转换
2008/07/29 PHP
php连接mysql数据库代码
2009/03/10 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
PHP引用的调用方法分析
2016/04/25 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
Python中设置变量访问权限的方法
2015/04/27 Python
Python判断字符串与大小写转换
2015/06/08 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
python如何让类支持比较运算
2018/03/20 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
python关于变量名的基础知识点
2020/03/03 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
对python中return与yield的区别详解
2020/03/12 Python
python实现3D地图可视化
2020/03/25 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
转党组织关系介绍信
2014/01/08 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
会计演讲稿范文
2014/05/23 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
60句有关成长的名言
2019/09/04 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python