前言
在 Web 开发过程中，我们常常需要部署 Web 服务，并确保其稳定性和可靠性。Docker 是近年来兴起的一种容器化技术，使得 Web 服务的部署和管理变得更加简便和高效。本文将介绍如何使用 Docker 部署 Vue + Node.js 项目，并提供详细的步骤和示例代码。
准备工作
在开始之前，需要确保已经安装了 Docker 和 Docker Compose 工具。Docker 是一种开源的容器化平台，可以帮助我们创建、部署和运行容器化应用程序。Docker Compose 是一个用于定义和运行多个容器应用程序的工具，可以帮助我们管理容器之间的关系和依赖。
搭建 Vue + Node.js 项目
本文将基于 Vue CLI 和 Express.js 来搭建 Vue + Node.js 项目。Vue CLI 是一个官方支持的脚手架工具，可以帮助我们快速创建 Vue 项目。Express.js 是一个流行的 Node.js Web 框架，可以帮助我们构建服务器端应用程序。
创建 Vue 项目
首先，我们需要在命令行中执行以下命令，安装 Vue CLI 工具：
$ npm install -g @vue/cli
安装完成后，我们可以创建一个空的 Vue 项目，执行以下命令：
$ vue create vue-app
这个命令将会创建一个名为 vue-app 的 Vue 项目，并且在其中包含了一些默认的配置和依赖。我们可以通过进入 vue-app 目录，然后执行以下命令来运行项目：
$ cd vue-app $ npm run serve
运行成功后，我们可以在浏览器中打开 http://localhost:8080，看到 Vue 项目已经成功运行起来了。
添加 Node.js 服务器端
接下来，我们需要在项目中添加 Node.js 服务器端，用于处理数据和逻辑部分。我们可以使用 Express.js 框架来搭建服务器端应用程序。
首先，在命令行中执行以下命令，安装 Express.js：
$ npm install express --save
然后，在项目根目录下创建一个名为 server.js 的文件，编写服务器端代码，如下所示：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- --------------------- ----- ---- -- - ---------------- --------- --- ----- ---- - ---------------- -- ----- ---------------- -- -- - ------------------- ------- -- ---- ---------- ---
这个代码创建了一个基本的 Express.js 应用程序，其中定义了一个 /api/hello 路径，用于返回字符串 'Hello, World!'。默认情况下，服务器将在 3000 端口上启动。
集成 Vue 和 Node.js 服务器端
现在我们已经创建了一个 Vue 项目和一个 Node.js 服务器端，接下来我们需要将两者结合起来。具体来说，我们需要在 Vue 项目中调用 Node.js 服务器端的 API，并将结果渲染到页面上。
首先，在 Vue 项目的 src 目录下创建一个名为 api.js 的文件，用于定义调用 Node.js 服务器端 API 的逻辑。代码如下所示：
import axios from 'axios';
const serverUrl = process.env.VUE_APP_SERVER_URL || 'http://localhost:3000';
export function getHello() {
return axios.get(`${serverUrl}/api/hello`);
}这个代码使用了 Axios 库，用于向服务器端发送 HTTP 请求。在这个示例中，我们创建了一个名为 getHello() 的函数，用于调用 /api/hello API。
然后，在 Vue 项目的 components 目录下创建一个名为 HelloWorld.vue 的文件，如下所示：
-- -------------------- ---- -------
----------
-----
----- ------- ------
------
-----------
--------
------ - -------- - ---- --------
------ ------- -
----- -------------
------ -
------ -
-------- ---
--
--
--------- -
----------
-------------- -- -
------------ - --------------
--
------------ -- -
---------------------
---
--
--
---------这个代码定义了一个名为 HelloWorld 的 Vue 组件，使用了上面定义的 getHello() 函数。在组件挂载时，会调用 getHello()，并将返回值渲染到页面上。
最后，在 Vue 项目的 main.js 中引入 HelloWorld 组件，并将其渲染到页面上，代码如下所示：
-- -------------------- ---- ------- ------ --- ---- ------ ------ --- ---- ------------ ------ ---------- ---- ------------------------------ ------------------------ - ------ ---------------------------- ------------ --- ----- ------- - -- ------- ------------------
准备 Docker
我们已经将 Vue 和 Node.js 服务器端搭建好了，下一步需要对其进行容器化，使用 Docker 部署到服务器上。
首先，我们需要在项目的根目录下创建一个名为 Dockerfile 的文件，用于定义 Docker 镜像的构建规则：
-- -------------------- ---- ------- ---- -------------- ------- ---- ---- ------------- -- --- --- ------- ---- - - ------ ---- --- ------- --------
这个 Dockerfile 文件使用 node:14-alpine 作为基础镜像，将项目文件复制到 /app 目录下，并安装依赖。然后将容器的 3000 端口暴露出去，并在启动容器时执行 npm start 命令。
接下来，我们需要在项目的根目录下创建一个名为 docker-compose.yml 的文件，用于定义 Docker 容器的关系和配置：
-- -------------------- ---- -------
-------- ---
---------
----
------ -
------
- ---------
------------
------------------- ---------------
----
------ -
-------- ------- ------ ------
------------
----- ----这个 docker-compose.yml 文件定义了两个服务，一个是 web 服务，用于运行 Vue 项目，并将容器的 8080 端口映射到主机的 8080 端口；另一个是 api 服务，用于运行 Node.js 服务器端，并将容器的 3000 端口映射到主机的 3000 端口。其中，VUE_APP_SERVER_URL 环境变量用于在 Vue 项目中指定 Node.js 服务器端的地址。
最后，在命令行中执行以下命令，启动容器：
$ docker-compose up
这个命令将会根据上面定义的 docker-compose.yml 文件，启动两个容器，分别运行 Vue 项目和 Node.js 服务器端。打开浏览器，访问 http://localhost:8080，即可看到运行中的 Vue + Node.js 项目。
总结
本文介绍了如何使用 Docker 部署 Vue + Node.js 项目，包括搭建 Vue 项目、添加 Node.js 服务器端、集成 Vue 和 Node.js 服务器端、准备 Docker 等步骤，提供了详细的示例代码。通过容器化部署，我们可以方便地管理和运维应用程序，提高开发效率和稳定性。希望本文能帮助读者更好地理解 Docker 的使用，并在实践中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6495272248841e989426c1ae