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

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

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

拉取并配置 Nginx 镜像

在终端中执行

1
docker search nginx

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

1
2
3
4
5
6
7
8
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 应用的项目目录,执行:

1
npm build

或是

1
yarn build

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

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

构建 Docker 镜像

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

首先,编制 Dockerfile 文件。

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

1
2
3
4
5
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 应用运行的结果了。

本文标题:在 Docker 上部署 Vue 开发的前端应用

文章作者:梅老师

发布时间:2020年06月24日 - 10:06

最后更新:2020年06月24日 - 11:06

原始链接:https://www.mls-tech.info/docker/docker-deploy-vue-app/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。