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

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

首先安装docker

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

正确删除方法:

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

docker配置

前端Umimax项目配置

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

我的前端目录结构

Dockerfile:

bash 复制代码
# 使用 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:

perl 复制代码
#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项目配置

后端目录结构

Dockerfile:

bash 复制代码
# 使用 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:

ini 复制代码
#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 将前后端项目整合起来:

整体目录结构

docker-compose.yml

yaml 复制代码
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 先创建目标文件夹,再进行文件复制。

例如:

bash 复制代码
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 的理解。希望这篇文章对您有所帮助,如果有任何错误或疑问,请指出,我们一起学习进步。

相关推荐
黄毛火烧雪下6 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox16 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞19 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行19 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_5937581020 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周23 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队41 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
Misnearch1 小时前
node.js版本管理
node.js
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring