Docker部署前后端项目：经验分享与问题解决

首先安装docker

推荐 阅读文档，如果电脑是第一次装，应该是没什么问题的我装过两次docker,因为电脑c盘内存不足，我想把docker迁移到d盘，但是遇到了问题，百度上有些解答是把c盘docker的位置镜像到d盘，可能是我方法不对，没有成功，第二次下载docker，一直报错，应该是没有删除干净

正确删除方法：

控制面板应用删除，然后删除C:\Users\Administrator\AppData\Local\Docker这样就好了，再按照上方文档安装docker

docker配置

前端Umimax项目配置

首先，让我们看看如何配置前端项目的 Dockerfile 和 nginx.conf：

我的前端目录结构

image-20240307153313450

Dockerfile:

# 使用 Node.js 官方镜像作为基础
FROM node:latest as builder

# 设置工作目录
WORKDIR /hotel-admin

# 复制 package.json 和 pnpm-lock.yaml 到工作目录
COPY package.json pnpm-lock.yaml ./

# 安装依赖项
RUN npm install -g pnpm
RUN pnpm install

# 复制项目文件到工作目录
COPY . .

# 构建项目
RUN pnpm run build

# 设置 Nginx 镜像
FROM nginx:alpine

RUN mkdir -p /ruanjian/admin_front
# 将构建的项目复制到 Nginx 默认的 HTML 目录
COPY --from=builder /hotel-admin/dist /ruanjian/admin_front

# 复制 Nginx 配置文件
COPY nginx.conf /etc/nginx/conf.d/admin_front.conf

nginx.conf:

#admin
server {
  listen 8000;
  location / {
    root /ruanjian/admin_front;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
  location /api/ {
    rewrite ^/api/(.*)$ /$1 break;
    # 下面的地址为你的后端地址
    proxy_pass http://host.docker.internal:1101;
  }
}

后端Nest项目配置

后端目录结构

image-20240307153519024

Dockerfile:

# 使用 Node.js 官方镜像作为基础
FROM node:latest as builder

# 设置工作目录
WORKDIR /hotel-admin

# 复制 package.json 和 pnpm-lock.yaml 到工作目录
COPY package.json pnpm-lock.yaml ./

# 安装依赖项
RUN npm install -g pnpm
RUN pnpm install

# 复制项目文件到工作目录
COPY . .

# 构建项目
RUN pnpm run build

# 设置 Nginx 镜像
FROM nginx:alpine

RUN mkdir -p /ruanjian/admin_front
# 将构建的项目复制到 Nginx 默认的 HTML 目录
COPY --from=builder /hotel-admin/dist /ruanjian/admin_front

# 复制 Nginx 配置文件
COPY nginx.conf /etc/nginx/conf.d/admin_front.conf

nginx.conf:

#nest
server {
  listen 1101;
  location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Nginx-Proxy true;
    proxy_set_header Connection "";
    proxy_pass http://127.0.0.1:1101;
  }
}

docker-compose

最后，我们使用 Docker Compose 将前后端项目整合起来：

整体目录结构

image-20240307153706465

docker-compose.yml

version: '3.7'
services:
  frontend:
    build: ./hotel-admin
    ports:
      - "8000:8000"
    networks:
      - umiadmin
      
  backend:
    build: ./nest-typeorm
    ports:
      - "1101:1101"
    depends_on:
      - mysql
    networks:
      - umiadmin

  mysql:
    image: mysql
    ports:
      - 3306:3306
    environment:
      - HOST_IP=$(ip route | awk 'NR==1 {print $3}')
      - MYSQL_ROOT_PASSWORD=123456
      - MYSQL_DATABASE=umiadmin
    volumes:
      - /path/to/mysql/data:/var/lib/mysql
    networks:
      - umiadmin

  redis:
    image: redis
    ports:
      - 6379:6379
    volumes:
      - /path/to/redis/data:/data
    command: redis-server --appendonly yes
    networks:
      - umiadmin
networks:
  umiadmin:

遇到的问题

1.Nest 访问不到 MySQL

在配置mysql时，使用的host为127.0.0.1，无法连接到数据库，后面把host改为本地的ip地址时，是可以访问到的

2.Nginx 跨域问题

在前端的nginx.conf中proxy_pass http://127.0.0.1:1101;,请求接口 502，但是本地127.0.0.1:1101是可以请求的，所以应该是没有跨域成功，配置问题，chatgpt可得：在容器中，127.0.0.1 是指向容器本身的回环地址，而不是宿主机的回环地址。如果您希望容器中的应用程序能够访问宿主机上的服务，可以使用特殊的 DNS 名称 host.docker.internal（仅限于支持的平台）来引用宿主机的 IP 地址。所以我在后面使用了host.docker.internal来代替127.0.0.1,然后跨域成功！

3.文件夹复制时目标文件夹不存在

使用 mkdir -p 先创建目标文件夹，再进行文件复制。

例如：

RUN mkdir -p /ruanjian/admin_front
# 将构建的项目复制到 Nginx 默认的 HTML 目录
COPY --from=builder /hotel-admin/dist /ruanjian/admin_front

4.后端项目无法启动本来后端开始是使用cmd["pnpm","run","start"]

在使用docker-compose时，会出现pnpm not fount问题，不知道为啥？希望有大哥解答下，后面加上了

才运行成功，为什么在这里还要拿node镜像

感受

通过这次 Docker Compose 的部署经验，我学到了许多问题的解决方法，也加深了对 Docker 的理解。希望这篇文章对您有所帮助，如果有任何错误或疑问，请指出，我们一起学习进步。