前端-后端分离，使用 Docker 实现一键部署 NodeJS + Vue3 项目

一、项目结构与技术栈

在开始之前，我们先来看看项目的结构和技术栈。

前端：

• Vue3 框架
• Vuex 状态管理
• Vue Router 路由管理
• Axios HTTP 请求库

后端：

• NodeJS 16.13.0
• Express 框架
• MongoDB 数据库
• Mongoose ORM

二、Dockerfile

为了能够使用 Docker 部署项目，我们需要创建一个 Dockerfile 文件。这个文件包含了构建镜像所需的指令。

对于前端项目，我们可以使用以下 Dockerfile：

FROM node:16-buster-slim

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . ./

CMD npm run build

对于后端项目，我们可以使用以下 Dockerfile：

FROM node:16-buster-slim

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . ./

CMD npm start

三、构建镜像

构建镜像的命令如下：

docker build -t your-image-name .

其中，your-image-name 是你想要给镜像起的名称。

四、运行容器

运行容器的命令如下：

docker run -d -p 80:80 your-image-name

其中，80 是你想要暴露的端口号，your-image-name 是你想要运行的镜像名称。

五、验证部署

在浏览器中输入 http://localhost:80，如果能够看到项目的前端界面，就说明部署成功了。

六、注意事项

在使用 Docker 部署项目时，需要注意以下几点：

• 确保你的项目结构与 Dockerfile 中的指令相匹配。
• 在构建镜像时，需要确保项目中的所有依赖都已安装。
• 在运行容器时，需要确保暴露的端口号与项目中的端口号一致。

七、结语

通过使用 Docker，我们可以轻松地将项目部署到任何环境中。这种方式不仅可以节省时间和精力，还可以提高项目的可移植性。如果你还没有使用 Docker 部署项目，我强烈建议你尝试一下。

希望这篇文章对你有帮助。如果你有任何问题，欢迎在评论区留言。