2024年前端最新《Docker》Docker完整部署Web应用（Vue+Node+MongoDB，2024年最新爱奇艺算法社招面经

以下是使用Docker部署Vue前端、Node.js后端以及MongoDB数据库的示例。

首先，确保您已安装Docker。

1. 创建Dockerfile为Vue前端应用构建镜像：

# 基于Node镜像来构建Vue项目
FROM node:lts-alpine as build-stage
 
# 设置工作目录
WORKDIR /app
 
# 复制 package.json 和 package-lock.json (如果有)
COPY package*.json ./
 
# 安装项目依赖
RUN npm install
 
# 复制项目文件和目录到工作目录
COPY . .
 
# 构建Vue项目
RUN npm run build
 
# 生产环境镜像
FROM nginx:stable-alpine as production-stage
 
# 从构建阶段复制构建结果到Nginx目录
COPY --from=build-stage /app/dist /usr/share/nginx/html
 
# 暴露80端口
EXPOSE 80
 
# 启动Nginx，并且Nginx将持续运行
CMD ["nginx", "-g", "daemon off;"]

2. 创建Dockerfile为Node.js后端应用构建镜像：

# 基于Node.js的官方镜像
FROM node:16
 
# 设置工作目录
WORKDIR /app
 
# 复制 package.json 和 package-lock.json (如果有)
COPY package*.json ./
 
# 安装项目依赖
RUN npm install
 
# 复制项目文件和目录到工作目录
COPY . .
 
# 暴露3000端口
EXPOSE 3000
 
# 运行Node.js应用
CMD ["node", "server.js"]

3. 创建Dockerfile为MongoDB数据库构建镜像：

# 基于MongoDB官方镜像
FROM mongo:latest
 
# 暴露27017端口
EXPOSE 27017
 
# 运行MongoDB，使用默认配置
CMD ["mongod"]

4. 创建docker-compose.yml文件来编排服务：

version: '3.8'
 
services:
  vue-app:
    build:
      context: ./path-to-vue-app
      dockerfile: Dockerfile
    ports:
      - "80:80"
 
  node-app:
    build:
      context: ./path-to-node-app
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      MONGO_URL: mongodb://mongodb:27017/your-db
    depends_on:
      - mongodb
 
  mongodb:
    build:
      context: ./path-to-mongodb
      dockerfile: Dockerfile
    ports:
      - "27017:27017"

5. 在包含这些文件的目录中运行以下命令来启动服务：

docker-compose up -d

这将启动Vue前端、Node.js后端以及MongoDB数据库的容器，并且它们将通过Docker网络互相通信。

注意：请确保替换示例中的路径、端口和环境变量为您自己的配置。