Docker 部署 vue 项目

Docker 部署 vue 项目

Docker 作为轻量级虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用Docker来部署一个vue的前端应用，并尽可能详尽的介绍了实现思路和具体步骤，以方便有类似需要的同学参考。

Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，该容器包含了应用程序的代码、运行环境、依赖库、配置文件等必需的资源，通过容器就可以实现方便快速并且与平台解耦的自动化部署方式，无论你部署时的环境如何，容器中的应用程序都会运行在同一种环境下。

1.具体实现：

1. 用 vue cli 创建一个vue项目，修改一下创建出来的项目，在页面上写一个前端接口请求，构建一版线上资源 ，基于nginx docker镜像构建成一个前端工程镜像，然后基于这个前端工程镜像，启动一个容器 vuenginxcontainer。
2. 启动一个基于 node 镜像的容器 nodewebserver，提供后端接口。
3. 修改 vuenginxcontainer 的 nginx 配置，使前端页面的接口请求转发到 nodewebserver 上。
4. 稍作优化和改进。

2创建 vue 应用

3.1 vue cli 创建一个vue项目

3.2 构建vue项目

运行命令

yarn build / npm run build

 此时工程根目录下多出一个dist文件夹

如果将该dist目录整个传到服务器上，部署成静态资源站点就能直接访问到该项目。

接下来就来构建一个这样的静态资源站点。

4 构建vue应用镜像

nginx 是一个高性能的HTTP和反向代理服务器，此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像。

4.1 获取 nginx 镜像

docker pull nginx

• docker镜像（Image）一个特殊的文件系统。Docker镜像是一个特殊的文件系统，除了提供容器运行时所需的程序、库、资源、配置等文件外，还包含了一些为运行时准备的一些配置参数（如匿名卷、环境变量、用户等）。 镜像不包含任何动态数据，其内容在构建之后也不会被改变。
• docker 镜像相关操作有: 搜索镜像docker search [REPOSITORY[:TAG]]、拉取镜像docker pull [REPOSITORY[:TAG]] 、查看镜像列表docker image ls、删除镜像：docker image rm [REPOSITORY[:TAG]] / docker rmi [REPOSITORY[:TAG]] 等等。
• docker 镜像名称由REPOSITORY和TAG组成 [REPOSITORY[:TAG]]，TAG默认为latest

4.2 创建 nginx config配置文件

在项目根目录下创建nginx文件夹，该文件夹下新建文件default.conf

 
server {
 
listen 80;
 
server_name localhost;
 
 
 
#charset koi8-r;
 
access_log /var/log/nginx/host.access.log main;
 
error_log /var/log/nginx/error.log error;
 
 
 
location / {
 
root /usr/share/nginx/html;
 
index index.html index.htm;
 
}
 
 
 
#error_page 404 /404.html;
 
 
 
# redirect server error pages to the static page /50x.html
 
#
 
error_page 500 502 503 504 /50x.html;
 
location = /50x.html {
 
root /usr/share/nginx/html;
 
}
 
}

　　

该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html, 所以我们可以一会把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下。

4.3 创建 Dockerfile 文件

FROM nginx
 
COPY dist/ /usr/share/nginx/html/
 
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

　　

• 自定义构建镜像的时候基于Dockerfile来构建。
• FROM nginx 命令的意思该镜像是基于 nginx:latest 镜像而构建的。
• COPY dist/ /usr/share/nginx/html/ 命令的意思是将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下。
• COPY nginx/default.conf /etc/nginx/conf.d/default.conf 命令的意思是将nginx目录下的default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换nginx镜像里的默认配置。

4.4 基于该Dockerfile构建vue应用镜像

运行命令（注意不要少了最后的 “.” ）

docker build -t vuenginxcontainer .

　　

-t 是给镜像命名 . 是基于当前目录的Dockerfile来构建镜像

 查看本地镜像，运行命令

 docker images

 到此时我们的 vue 应用镜像 vuenginxcontainer 已经成功创建。接下来，我们基于该镜像启动一个docker容器。

4.5 启动 vue app 容器

Docker 容器Container： 镜像运行时的实体。镜像（Image）和容器（Container）的关系，就像是面向对象程序设计中的类和实例一样，镜像是静态的定义，容器是镜像运行时的实体。容器可以被创建、启动、停止、删除、暂停等 。

基于 vuenginxcontainer 镜像启动容器，运行命令：

docker run 
 
-p 3000:80 
 
-d --name vueApp 
 
vuenginxcontainer

　　

• docker run 基于镜像启动一个容器
• -p 3000:80 端口映射，将宿主的3000端口映射到容器的80端口
• -d 后台方式运行
• --name 容器名 查看 docker 进程

 docker ps

 可以发现名为 vueApp的容器已经运行起来。此时访问 http://localhost:3000 应该就能访问到该vue应用:  目前为止，已经通过docker容器部署了一个静态资源服务，可以访问到静态资源文件。