linux环境docker部署前后端应用

linux文件夹目录结构如下：

my-project/

├── backend/ # Spring Boot 项目

│ ├── target/*.jar

│ └── Dockerfile

│

├── frontend/ # Vue 项目

│ ├── dist/

│ ├── nginx.conf

│ └── Dockerfile

│

└── docker-compose.yml

sql 复制代码

1、*.jar
后端打jar包

sql 复制代码

2、backend/Dockerfile内容如下：
# Dockerfile（Spring Boot 后端）
FROM eclipse-temurin:17-jre-alpine

# 创建非 root 用户
RUN addgroup -g 1001 -S spring && \
    adduser -u 1001 -S spring -G spring

USER spring:spring

WORKDIR /app

# 复制构建好的 JAR 文件（注意：你需要先本地打包！）
COPY target/*.jar app.jar

# 暴露端口（根据你的 application.properties 中 server.port）
EXPOSE 8088

# 启动应用
ENTRYPOINT ["java", "-jar", "app.jar"]

sql 复制代码

3、dist文件
前端在vscode terminal执行
npm run build
会在根目录下生成一个dist的文件，拷贝过来

sql 复制代码

4、nginx.conf配置如下
# frontend/nginx.conf

events {
    worker_connections 1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    sendfile      on;
    tcp_nopush    on;
    tcp_nodelay   on;
    keepalive_timeout 65;

    server {
        listen 80;
        server_name localhost;

        # 静态资源根目录（Vue 打包后的 dist）
        root /usr/share/nginx/html;
        index index.html index.htm;

        # 支持 Vue Router history 模式（刷新不 404）
        location / {
            try_files $uri $uri/ /index.html;
        }

        # 👇 关键：代理所有 /api 开头的请求到后端 Spring Boot（8088 端口）
        location /api/ {
            proxy_pass http://api:8088/;   # 后端的端口号，注意结尾的斜杠！
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        # 可选：gzip 压缩（提升前端加载速度）
        gzip on;
        gzip_vary on;
        gzip_min_length 1024;
        gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
    }
}

sql 复制代码

5、前端Dockerfile文件如下：
# 直接使用nginx镜像，无需builder阶段（无需Node.js环境）
FROM nginx:alpine

# 复制本地打包好的dist文件夹到nginx目录
COPY dist /usr/share/nginx/html

# 复制nginx配置
COPY nginx.conf /etc/nginx/nginx.conf

# 暴露端口
EXPOSE 80

# 启动nginx
CMD ["nginx", "-g", "daemon off;"]

sql 复制代码

6、docker-compose.yml文件如下内容

version: '3.8'

services:
  # 前端：Vue + Nginx
  web:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    #container_name: vue-app
    ports:
      - "9091:80"		#自定义的访问端口号9091
    volumes:
      - ./frontend/logs:/var/log/nginx
    restart: unless-stopped
    networks:
      - app-network

  # 后端：Spring Boot
  api:
    build:
      context: ./backend
      dockerfile: Dockerfile
    #container_name: springboot-api
    ports:
      - "8088:8088"        # 主机:容器，方便本地调试（可选）
    environment:
      - SPRING_PROFILES_ACTIVE=prod
    restart: unless-stopped
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

sql 复制代码

7、在my-project目录下执行
# 构建并启动所有服务
docker-compose up --build -d

sql 复制代码

8、最后在浏览器上输入http://你的linux服务器地址:9091即可访问


9、备注
# 查看日志
docker-compose logs -f

# 停止
docker-compose down

# 查看状态
docker-compose ps