Vue项目打包成docker镜像部署
Vue项目打包成docker镜像部署
一、介绍
我们部署Vue项目,可以build之后,直接放到nginx下面即可,今天给大家介绍创建docker镜像,使用docker镜像启动容器运行部署Vue项目的方式,可以尝试尝试,原理和使用nginx部署一样,不过是使用的docker容器而已,内部还是使用的是nginx作为基础镜像。
二、docker安装
docker安装就不介绍了,不懂的伙伴可以去看我的docker安装文章。之前也写过关于docker介绍、安装的文章,不了解如何安装使用的可以看以往的文章。
三、编写DockerFile
docker安装完成之后,在我们需要部署的项目目录中新建文件dockerFile。文件内容如下:
FROM nginx:latest
LABEL Author xpy
COPY build /usr/share/nginx/html
第一行:设置基础镜像,基础镜像使用nginx
第二行:作者信息
第三行:将build文件夹下面的内容拷贝到/usr/share/nginx/html目录下面(nginx的默认项目路径),其中build文件夹有可能是dist文件夹,如果没有,重新npm run build一下就出来了,也就是我们Vue项目打包之后我们正常使用nginx是拷贝过去的文件夹。
四、创建镜像
docker build -t xxx .
注意:后面的.不能省略,镜像创建成功之后使用docker images即可看到自己创建的镜像
五、启动镜像
docker run -d --name xxx -p 8888:80 xxx
启动命令说明:
-d:容器后台启动
—name : 容器名称
-p 8888:80 :将nginx容器的80端口映射到主机的8888端口,我们访问时直接访问主机ip+映射到主机的端口,这里是8888,如果有路径,后面还要带上路径。
xxx : 我们刚刚创建的自己的镜像的名称
六、总结
以上步骤即可帮助我们使用docker容器部署Vue项目,原理其实和我们使用nginx部署Vue是一样的,我们打包自己的镜像使用的基础镜像也是nginx,感兴趣的小伙伴可以自己动手尝试尝试。
原文链接:https://monkey.blog.xpyvip.top/archives/vue-xiang-mu-da-bao-cheng-docker-jing-xiang-bu-shu
相关文章
- 金融服务领域的大数据:即时分析
- 影响大数据、机器学习和人工智能未来发展的8个因素
- 从0开始构建一个属于你自己的PHP框架
- 如何将Hadoop集成到工作流程中?这6个优秀实践必看
- SEO公司使用大数据优化其模型的5种方法
- 关于Web Workers你需要了解的七件事
- 深入理解HTTPS原理、过程与实践
- 增强分析:数据和分析的未来
- PHP协程实现过程详解
- AI专家:大数据知识图谱——实战经验总结
- 关于PHP的错误机制总结
- 利用数据分析量化协同过滤算法的两大常见难题
- 怎么做大数据工作流调度系统?大厂架构师一语点破!
- 2019大数据处理必备的十大工具,从Linux到架构师必修
- OpenCV中的KMeans算法介绍与应用
- 教大家如果搭建一套phpstorm+wamp+xdebug调试PHP的环境
- CentOS下三种PHP拓展安装方法
- Go语言HTTP Server源码分析
- Go语言HTTP Server源码分析
- 2017年4月编程语言排行榜:Hack首次进入前五十