Docker 是一种容器化技术，可以轻松地在不同的环境中运行应用程序。Docker Compose 是 Docker 的一个工具，它可以用来描述和运行多个 Docker 容器的应用程序。在这篇文章中，我们将学习如何使用 Docker Compose 部署 Vue.js 应用程序。
系统要求
在开始之前，我们需要确保以下系统要求：
- Docker 安装在本地计算机上。
- Docker Compose 安装在本地计算机上。
- 在本地计算机上安装有 Vue.js 应用程序代码库。
步骤一：创建 Dockerfile
Dockerfile 是用来描述如何构建 Docker 镜像的脚本文件。在这个步骤中，我们将创建一个 Dockerfile 文件，它将用来构建我们的 Vue.js 应用程序镜像。
在项目根目录下创建一个名为 Dockerfile 的文件，添加以下内容：
-- -------------------- ---- ------- - ---- ---- -------------- - ------ ------- ---- - -------- ---- ------------- -- ---- ---- -- ---- --- ----- - ---- --- --- ------- - ------ --- --- --- ----- - ---- ------ ---- - ------ --- - ------ ------ ------- -
以上 Dockerfile 文件的具体含义如下：
FROM指定使用 Node.js 14 版本的官方 Docker 镜像为基础镜像。WORKDIR指定工作目录。COPY指令将应用程序代码库中的 package.json、.env 和 src 目录拷贝到镜像中。RUN指令安装应用程序所有的依赖，然后执行 npm run build 命令构建应用程序。EXPOSE告诉 Docker 容器需要监听的端口。CMD指定启动容器后需要执行的命令。
步骤二：创建 Docker Compose 配置文件
在这个步骤中，我们将创建一个 Docker Compose 配置文件 docker-compose.yml，用于描述我们的 Vue.js 应用程序如何使用 Docker 运行。
在项目根目录下创建一个名为 docker-compose.yml 的文件，添加以下内容：
version: '3'
services:
web:
build: .
ports:
- "8080:8080"以上配置文件的具体含义如下：
version指定使用的 Docker Compose 文件版本为 3。services定义一个名为 web 的服务。build指定使用当前目录下的 Dockerfile 构建一个 Docker 镜像。ports定义容器内部的端口和主机上的端口映射关系。
步骤三：启动 Docker Compose
在这个步骤中，我们将启动 Docker Compose，运行我们的 Vue.js 应用程序。
在终端进入项目根目录，运行以下命令启动 Docker Compose：
docker-compose up -d
-d参数可以让 Docker Compose 在后台运行，不会阻塞命令行终端。
步骤四：访问应用程序
在容器启动和 Vue.js 应用程序构建完成后，我们可以通过在浏览器中输入 http://localhost:8080 访问我们的应用程序。
总结
恭喜！通过本篇文章的学习，你已经学会了使用 Docker Compose 部署 Vue.js 应用程序。使用 Docker Compose 快速部署应用程序，可以极大地提高团队协作和应用程序的可移植性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646acce1968c7c53b0a48107