在 Docker 上部署 Vue 开发的前端应用

本文简单的描述在 Docker 中部署 Vue 开发的前端应用的过程。

在本例中，我们选择使用 Nginx 作为静态 Web 服务器，将 Vue 应用作为静态内容发布到 Nginx 中。

拉取并配置 Nginx 镜像

在终端中执行

1	docker search nginx

可以看到有很多与 nginx 相关的镜像

NAME                               DESCRIPTION                                     STARS               OFFICIAL            AUTOMATED
nginx                              Official build of Nginx.                        13374               [OK]
jwilder/nginx-proxy                Automated Nginx reverse proxy for docker con…   1828                                    [OK]
richarvey/nginx-php-fpm            Container running Nginx + PHP-FPM capable of…   778                                     [OK]
linuxserver/nginx                  An Nginx container, brought to you by LinuxS…   117
bitnami/nginx                      Bitnami nginx Docker Image                      85                                      [OK]
tiangolo/nginx-rtmp                Docker image with Nginx using the nginx-rtmp…   78                                      [OK]
.....

我们选择官方的进行进行拉取，执行:

1	docker pull nginx

拉取完成后，可以通过 docker images 查看， nginx 大概 132M 大小。

拉取完成后，可以执行以下命令启动 nginx：

1	docker run --name nginx -d -p 80:80 nginx

执行完成后，可以使用浏览器浏览 localhost, 可以 nginx 的默认页面被显示。

接下来，我们登入 docker 容器中去查看一下 nginx 镜像的一些默认配置。执行以下命令:

1	docker exec -it nginx /bin/bash

执行完成后，当前终端立即进入到 nginx 容器环境中，在 /etc/nginx 中可以找到 nginx 的对应配置文件，打开 /etc/nginx/conf.d/default.conf 文件，可以看到当前默认的 root 目录为 /uar/share/nginx/html。

你可以改变这个配置，甚至是添加新的虚拟主机(Web)。

在本练习中我们使用默认配置，不做修改。

打包 Vue 应用

进入 Vue 应用的项目目录，执行:

npm build

或是

1	yarn build

vue-cli 开始帮助我们构建最终的前端应用分发包。如果前端应用需要访问后端的API服务，请主要在 build 之前修改应用中相关的配置信息

执行完成后，应用分发的相关资源全部被打包放置在 dist 目录中。

构建 Docker 镜像

经过以上步骤后，我们就准备来构建前端应用的 Docker 镜像了。

首先，编制 Dockerfile 文件。

在 vue 的项目目录中新建名为: Dockerfile 的文件，内容如下:

FROM nginx

MAINTAINER <开发者信息>

COPY dist/ /usr/share/nginx/html/

文件很简单，就是从 nginx 镜像开始构建，然后将 dist 目录中的内容拷贝到新镜像的 /usr/share/nginx/html/ 目录中。

保存后，执行以下命令镜像构建:

1	docker build -t vue-web-app:1.0.0 .

不要忘记命令最后的 “.” 号(代表当前目录)

构建完以后，通过 docker images 就可以看到我们新建的镜像。

要启动镜像，可以执行:

1	docker run --name vue-app -d -p 8090:80 vue-web-app:1.0.0

然后就可以通过浏览器访问:

1	http://localhost:80990/

看到 vue 应用运行的结果了。