一篇文章教会你部署vue项目到docker
更新时间：2022年04月05日 11:34:29 作者：mad man
在前端开发中,部署项目是我们经常发生的事情,下面这篇文章主要给大家介绍了关于部署vue项目到docker的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
让我在5分钟你教不会你把项目部署到docker，前提是你得服务器装有docker，这里方便装宝塔，大佬当我没说。
大致分为3步：
第一是弄一个nginx的配置文件然后构建镜像的时候把它放进去取代原来的配置和写Dockerfile生成镜像的一些配置
第二是生成镜像
第三是生成启动容器，ok开始，顺便抛砖引玉
第一步
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镜像配置
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/
第二步，生成镜像
来到当前文件夹，输入命令 docker build -t yaohot .
注意图上打错字了，yoahou，以图片的命令为主
然后构建镜像完成
第三步，生成(启动)一个容器
命令：docker run -d -p 86:80 --name houtai yaohot
ok
总结
到此这篇关于部署vue项目到docker的文章就介绍到这了,更多相关部署vue项目到docker内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue装饰器中的vue-property-decorator 和 vux-class使用详解
这篇文章主要介绍了Vue装饰器中的vue-property-decorator 和 vux-class使用详解,通过示例代码给大家介绍的非常详细，对vue-property-decorator 和 vux-class的使用感兴趣的朋友一起看看吧2022-08-08
这篇文章主要介绍了WebPack配置vue多页面的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-05-05
本篇文章主要介绍了Vue 中批量下载文件并打包的示例代码，用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件，有兴趣的可以了解一下2017-11-11
Vue2 Element Schema Form 配置式生成表单的实现
本文主要介绍了Vue2 Element Schema Form 配置式生成表单的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
今天我们来学习一下watch监听器和它的好兄弟watchEffect监听器。这个相对来说比较简单，用的不是很多，当然了，根据自己的项目情况自行决定使用，希望对大家有所帮助2023-02-02
这篇文章主要为大家详细介绍了vue实现简单无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
本文主要介绍了vue 如何打开接口返回的HTML文件，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要为大家详细介绍了Vue.js组件tab实现选项卡切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
Vue2为何能通过this访问到data与methods的属性
这篇文章主要介绍了Vue2为何能通过this访问到data与methods的属性，文章围绕主题展开详细的内容戒杀，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
本文主要介绍了vue3的内置组件汇总,详细的介绍了Fragment,Teleport,Suspense三个组件的使用,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
最新评论