码头工人作为轻量级虚拟化技术,拥有持续集成,版本控制,可移植性,隔离性和安全性等优势。本文使用码头工人来部署一个vue的前端应用,并尽可能详尽的介绍了实现思路和具体步骤,以方便有类似需要的同学参考。
码头工人是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,该容器包含了应用程序的代码,运行环境,依赖库,配置文件等必需的资源,通过容器就可以实现方便快速并且与平台解耦的自动化部署方式,无论你部署时的环境如何,容器中的应用程序都会运行在同一种环境下。(更多详情请移步码头工人官网查看码头工人)
默认已经安装了码头工人,@vue/cli
相关版本:
-
<李> 18.09.2码头工人版本,构建6247962李
<李> vue cli——版本3.3.0李
<李> macOS莫哈韦版10.14.1李
运行环境为macOS,如果与阅读者操作系统之间存在差异,请自行调整
相关镜像:
-
<李> nginx:最新李
<李>节点:最新李
-
<李>用vue cli创建一个vue项目,修改一下创建出来的项目,在页面上写一个前端接口请求,构建一版线上资源,基于nginx码头工人镜像构建成一个前端工程镜像,然后基于这个前端工程镜像,启动一个容器vuenginxcontainer。
<李>启动一个基于节点镜像的容器nodewebserver,提供后端接口。
<李>修改vuenginxcontainer的nginx配置,使前端页面的接口请求转发到nodewebserver上。
<李>稍作优化和改进。
3.1 vue cli创建一个vue项目
运行命令
访问http://localhost: 8081
3.2改写
稍微改写一下页面,在应用程序。vue中传入HelloWorld组件中的味精改为你好码头工人;创造了生命周期中加入一个接口请求
这时候会在页面控制台看到一个报错信息:
/api/json接口404,当然此时这个接口还不存在,暂时写到这里,一会再调这个接口。
3.3构建vue项目
运行命令
此时工程根目录下多出一个<代码> dist
文件夹
如果将该dist目录整个传到服务器上,部署成静态资源站点就能直接访问到该项目。
接下来就来构建一个这样的静态资源站点。
nginx是一个高性能的HTTP和反向代理服务器,此处我们选用nginx镜像作为基础来构建我们的vue应用镜像。
4.1获取nginx镜像
-
<李> <代码>码头工人镜像(图片)一个特殊的文件系统.Docker镜像是一个特殊的文件系统,除了提供容器运行时所需的程序,库,资源,配置等文件外,还包含了一些为运行时准备的一些配置参数(如匿名卷,环境变量,用户等)。镜像不包含任何动态数据,其内容在构建之后也不会被改变。
<李>码头工人镜像相关操作有:搜索镜像<代码>码头工人搜索(库[标签:]]> 码头工人拉(库[标签:]]>
