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项目
运行命令
访问 http://localhost:8081
3.2 改写
稍微改写一下页面,在app.vue中 传入helloworld 组件中的 msg 改为hello docker ; created 生命周期中加入一个接口请求
……
axios.get(/api/json, {
params: {}
}).then(
res =