前后端分类项目如何打包部署到docker运行(Golang+vue3)

项目功能简介

• 前端vue运行一个from表单提交三个字段给到后端，后端将提交的字段拼接存储到data.json文件中

  实现的需求

• 后端Golang，端口10801，尾缀/api/receive，请求method为post
• 前端Vue3+vite打包，端口10802
• nginx转发，端口10800
• 前后端都部署到云服务器docker中，需要编写Dockerfile。
• 前后端不暴露端口，通过只暴露nginx到公网处理请求，compose如下：

  version: '3'
  services:
  ji:
    image: ji
    container_name: ji
    networks:
      - fine-tune
    volumes:
      - ./dist:/usr/share/nginx/html  # Vue 打包后的静态文件目录
    restart: always
    depends_on:
      - jo
  jo:
    image: jo
    container_name: jo
    networks:
      - fine-tune
    volumes:
      - ./data:/app/sources
    restart: always
  nginx:
    image: nginx
    container_name: nginx
    ports:
      - "80:80"  # 暴露Nginx到80端口
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf  # Nginx配置文件
    networks:
      - fine-tune
  networks:
  fine-tune:
    driver: bridge

• 前端Dockerfile

  # Step 1: Build the Vite app
  FROM node:18 AS build
  WORKDIR /app
  # Copy package.json and package-lock.json to install dependencies
  COPY package*.json ./
  # Install dependencies
  RUN npm install
  # Copy the rest of the project files
  COPY . .
  # Build the project
  RUN npm run build
  # Step 2: Nginx to serve the app
  FROM nginx:alpine
  # Copy the built files from the build stage to Nginx's web directory
  COPY ./nginx.conf /etc/nginx/conf.d/default.conf
  COPY --from=build /app/dist /usr/share/nginx/html
  # Expose port 80
  EXPOSE 80
  # Start Nginx
  CMD ["nginx", "-g", "daemon off;"]

• 后端Dockerfile

  FROM golang:alpine AS builder
  LABEL stage=gobuilder
  ENV CGO_ENABLED 0
  ENV GOPROXY https://goproxy.cn,direct
  RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories
  RUN apk update --no-cache && apk add --no-cache tzdata
  WORKDIR /build
  ADD go.mod .
  ADD go.sum .
  RUN go mod download
  COPY . .
  RUN go build -ldflags="-s -w" -o /app/main main.go
  FROM ubuntu:22.04
  COPY --from=builder /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
  COPY --from=builder /usr/share/zoneinfo/Asia/Shanghai /usr/share/zoneinfo/Asia/Shanghai
  ENV TZ Asia/Shanghai
  WORKDIR /app
  COPY --from=builder /app/main /app/main
  EXPOSE 9090
  CMD ["./main"]

部署后访问结果

本地开发前后端均正常交互

核心代码，整个项目就这一个SFC

前端vite配置默认没有任何改变

    const submitData = async () => {
      if (!form.value.instruction || !form.value.output) {
        alert('Instruction and Output cannot be empty.');
        return;
      }
      const apiUrl = import.meta.env.VITE_API_URL;
      try {
        const response = await axios.post(`/api/receive`, {
          instruction: form.value.instruction,
          input: form.value.input,
          output: form.value.output
        }, {
          headers: {
            'Content-Type': 'application/json'
          }
        });

        console.log('Success:', response.data);
        alert('Data submitted successfully!');
      } catch (error) {
        console.error('Error:', error);
        alert('Error submitting data.');
      }
    };

期望

• 域名a.x.com使用cloudflare穿透绑定给nginx使用，绑定端口10800
• 前端转发地址：127.0.0.1:10802
• 后端转发地址：127.0.0.1:10801
• 访问a.x.com应该是可以提交数据的，但是访问的域名为docker的服务名称，这显然是不正确的