手把手教你实现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