Docker-compose优雅地部署前后端分离的项目

2023-12-31 04:37:28

我们都知道，docker可以实现一个非常简便的部署环境。现在假设我们有一个前后端分离的项目，前端基于Vue开发并利用Webpack打包为dist文件夹，而我们的后端是一个Node.js服务，它可以提供API接口，并且前端和后端是分离的。所以，很显然我们需要前端项目和后端项目，分别用一个container来分别承载。

为了达到这样的效果，我们需要以下几个步骤：

首先，我们需要构建前端项目。我们可以使用命令npm run build来完成，这样会在项目根目录下生成一个名为dist的文件夹。
其次，我们需要构建后端项目。我们可以使用命令npm run build:prod来完成，这会在项目根目录下生成一个名为build的文件夹。

然后，我们需要创建两个dockerfile，一个用于构建前端镜像，另一个用于构建后端镜像。

前端dockerfile内容如下：

FROM node:16

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

CMD ["npm", "run", "serve"]

后端dockerfile内容如下：

FROM node:16

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

CMD ["npm", "start"]

接着，我们需要创建一个docker-compose.yml文件，用于定义和管理我们的docker服务。

version: '3.7'

services:

  frontend:
    build: ./frontend
    ports:
      - "8080:8080"
  backend:
    build: ./backend
    ports:
      - "3000:3000"