手把手教你实现Docker部署vue项目-创新互联
1.写在前面:
创新互联服务项目包括尖山网站建设、尖山网站制作、尖山网页制作以及尖山网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,尖山网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到尖山省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!Docker 作为轻量级虚拟化技术,拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用Docker来部署一个vue的前端应用,并尽可能详尽的介绍了实现思路和具体步骤,以方便有类似需要的同学参考。
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,该容器包含了应用程序的代码、运行环境、依赖库、配置文件等必需的资源,通过容器就可以实现方便快速并且与平台解耦的自动化部署方式,无论你部署时的环境如何,容器中的应用程序都会运行在同一种环境下。(更多详情请移步docker官网查看docker)
默认已经安装了 docker,@vue/cli
相关版本:
- Docker version 18.09.2, build 6247962
- vue cli --version 3.3.0
- macOS Mojave Verison 10.14.1
运行环境为macOS,如果与阅读者操作系统之间存在差异,请自行调整
相关镜像:
- nginx:latest
- node:latest
2.具体实现:
- 用 vue cli 创建一个vue项目,修改一下创建出来的项目,在页面上写一个前端接口请求,构建一版线上资源 ,基于nginx docker镜像构建成一个前端工程镜像,然后基于这个前端工程镜像,启动一个容器 vuenginxcontainer。
- 启动一个基于 node 镜像的容器 nodewebserver,提供后端接口。
- 修改 vuenginxcontainer 的 nginx 配置,使前端页面的接口请求转发到 nodewebserver 上。
- 稍作优化和改进。
3 创建 vue 应用
3.1 vue cli 创建一个vue项目
运行命令
yarn serve / npm run serve
网页标题:手把手教你实现Docker部署vue项目-创新互联
链接分享:http://pwwzsj.com/article/ceioge.html