基础配置:

  1. 前端请求全部写相对路径 + axios的baseurl前缀:

service.post('/login') service.get('/user/list')
import axios from 'axios';

const service = axios.create({
  baseURL: '/api',   // 前端不用改 IP 或端口
  timeout: 10000,
  withCredentials: true
});

export default service;
  1. 后端 Spring Boot 配置统一加 /api 前缀,在application.yml配置
server:
  port: 8099
  servlet:
    context-path: /api   # 统一加 /api 前缀

二、Nginx 配置(前端 + 反向代理接口)


worker_processes 1;

events { worker_connections 1024; }

http {
    include mime.types;
    default_type application/octet-stream;

    server {
        listen 18080;  # Docker 映射到 18080
        root /usr/share/nginx/html/dist;
        index index.html;

        # 前端 SPA 页面
        location / {
            try_files $uri $uri/ /index.html;
        }

        # 静态资源缓存
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
            expires 1d;
            try_files $uri =404;
        }

        # 后端接口代理
        location /api/ {
            proxy_pass http://xue:8099;  # Docker 后端服务名或 IP
            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;
        }

        # 错误页面
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root /usr/share/nginx/html;
        }
    }
}

一、部署java后端

1.在本地创建两个配置文件(具体可以看springboot那一篇的多配置文件),mysql配置的时候不要写死,而是从生产/本地环境去读取参数。

2.写好dockerfile文件
 

# 基础镜像
FROM openjdk:11.0-jre-buster
# 设定时区
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
# 拷贝jar包,这里是把宿主机当前目录下的 hm-service.jar 文件,拷贝到镜像内的根目录,并命名为 app.jar
COPY hm-service.jar /app.jar
# 入口,启动镜像内的 app.jar 这个 Java 程序
ENTRYPOINT ["java", "-jar", "/app.jar"]

3.把jar包和dockerfile文件放到云服务器上

4.创建镜像和容器

docker build -t hmall .
#--name hm容器名  hmall镜像名
docker run -d --name hm -p 8080:8080 --network heima hmall

二、部署前端

hmall-portalhmall-admin是前端代码,需要基于nginx部署。在课前资料中已经给大家提供了nginx的部署目录:

其中:

  • html是静态资源目录,我们需要把hmall-portal以及hmall-admin都复制进去

  • nginx.conf是nginx的配置文件,主要是完成对html下的两个静态资源目录做代理

我们现在要做的就是把整个nginx目录上传到虚拟机的/root目录下:

然后创建nginx容器并完成两个挂载:

  • /root/nginx/nginx.conf挂载到/etc/nginx/nginx.conf

  • /root/nginx/html挂载到/usr/share/nginx/html

看一下具体的nginx配置:

server {
    listen 80;  # 监听80端口
    server_name 云服务器ip;  
    charset utf-8;  # 防止中文乱码

    # 1. 优先匹配前端静态资源(避免被接口转发拦截)
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|html|htm|woff|woff2|ttf|eot)$ {
        root /usr/local/frontend/dist;  # 前端dist文件夹绝对路径
        expires 7d;  # 静态资源缓存7天,提升访问速度
    }

    # 2. 前端单页应用路由支持(解决刷新404)
    location = / {
        root /usr/local/frontend/dist;
        index index.html;
    }
    # 3. 所有非静态资源请求转发到后端8099端口
    location / {
        proxy_pass http://127.0.0.1:8099;  # 后端服务地址,末尾无/
        # 传递客户端真实IP和请求信息给后端
        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;
        # 超时配置
        proxy_connect_timeout 60s;
        proxy_read_timeout 600s;
    }

    # 错误页面配置(可选)
    error_page 404 /index.html;  # 前端路由404指向index.html
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}



如果你是vue项目,需要打包成dist文件夹

# 1. 本地安装依赖(仅开发时需要)
npm install

# 2. 构建生产环境静态文件(核心:打包所有依赖到dist)
npm run build

命令如下:

#开放云服务器安全组的端口
#开放服务器本地的端口

firewall-cmd --add-port=18080/tcp --permanent
firewall-cmd --reload




docker run -d \
  --name nginx \
  -p 18080:18080 \
  -p 18081:18081 \
  -v /root/nginx/html:/usr/share/nginx/html \
  -v /root/nginx/nginx.conf:/etc/nginx/nginx.conf \
  --network heima \
  nginx

三、DockerCompose

1.DockerCompose文件

大家可以看到,我们部署一个简单的java项目,其中包含3个容器:

  • MySQL

  • Nginx

  • Java项目

而稍微复杂的项目,其中还会有各种各样的其它中间件,需要部署的东西远不止3个。如果还像之前那样手动的逐一部署,就太麻烦了。

Docker Compose就可以帮助我们实现多个相互关联的Docker容器的快速部署。它允许用户通过一个单独的 docker-compose.yml 模板文件(YAML 格式)来定义一组相关联的应用容器。

Docker Compose和docker run描述的信息是一致的:

当你有多个容器的时候只需要在services下面加就可以:

version: "3.8"

services:
  mysql:
    image: mysql
    container_name: mysql
    ports:
      - "3306:3306"
    environment:
      TZ: Asia/Shanghai
      MYSQL_ROOT_PASSWORD: 123
    volumes:
      - "./mysql/conf:/etc/mysql/conf.d"
      - "./mysql/data:/var/lib/mysql"
      - "./mysql/init:/docker-entrypoint-initdb.d"
    networks:
      - hm-net
  hmall:
    build: 
      context: .
      dockerfile: Dockerfile
    container_name: hmall
    ports:
      - "8080:8080"
    networks:
      - hm-net
    depends_on:
      - mysql
  nginx:
    image: nginx
    container_name: nginx
    ports:
      - "18080:18080"
      - "18081:18081"
    volumes:
      - "./nginx/nginx.conf:/etc/nginx/nginx.conf"
      - "./nginx/html:/usr/share/nginx/html"
    depends_on:
      - hmall
    networks:
      - hm-net
networks:
  hm-net:
    name: hmall

2.DockerCompose命令

docker compose [OPTIONS] [COMMAND]

其中,OPTIONS和COMMAND都是可选参数,比较常见的有:

类型

参数或指令

说明

Options

-f

指定compose文件的路径和名称

-p

指定project名称。project就是当前compose文件中设置的多个service的集合,是逻辑概念

Commands

up

创建并启动所有service容器

down

停止并移除所有容器、网络

ps

列出所有启动的容器

logs

查看指定容器的日志

stop

停止容器

start

启动容器

restart

重启容器

top

查看运行的进程

exec

在指定的运行中容器中执行命令

3.示例命令

# 1.进入root目录
cd /root

# 2.删除旧容器
docker rm -f $(docker ps -qa)

# 3.删除hmall镜像
docker rmi hmall

# 4.清空MySQL数据
rm -rf mysql/data

# 5.启动所有, -d 参数是后台启动
docker compose up -d
# 结果:
[+] Building 15.5s (8/8) FINISHED
 => [internal] load build definition from Dockerfile                                    0.0s
 => => transferring dockerfile: 358B                                                    0.0s
 => [internal] load .dockerignore                                                       0.0s
 => => transferring context: 2B                                                         0.0s
 => [internal] load metadata for docker.io/library/openjdk:11.0-jre-buster             15.4s
 => [1/3] FROM docker.io/library/openjdk:11.0-jre-buster@sha256:3546a17e6fb4ff4fa681c3  0.0s
 => [internal] load build context                                                       0.0s
 => => transferring context: 98B                                                        0.0s
 => CACHED [2/3] RUN ln -snf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo   0.0s
 => CACHED [3/3] COPY hm-service.jar /app.jar                                           0.0s
 => exporting to image                                                                  0.0s
 => => exporting layers                                                                 0.0s
 => => writing image sha256:32eebee16acde22550232f2eb80c69d2ce813ed099640e4cfed2193f71  0.0s
 => => naming to docker.io/library/root-hmall                                           0.0s
[+] Running 4/4
 ✔ Network hmall    Created                                                             0.2s
 ✔ Container mysql  Started                                                             0.5s
 ✔ Container hmall  Started                                                             0.9s
 ✔ Container nginx  Started                                                             1.5s

# 6.查看镜像
docker compose images
# 结果
CONTAINER           REPOSITORY          TAG                 IMAGE ID            SIZE
hmall               root-hmall          latest              32eebee16acd        362MB
mysql               mysql               latest              3218b38490ce        516MB
nginx               nginx               latest              605c77e624dd        141MB

# 7.查看容器
docker compose ps
# 结果
NAME                IMAGE               COMMAND                  SERVICE             CREATED             STATUS              PORTS
hmall               root-hmall          "java -jar /app.jar"     hmall               54 seconds ago      Up 52 seconds       0.0.0.0:8080->8080/tcp, :::8080->8080/tcp
mysql               mysql               "docker-entrypoint.s…"   mysql               54 seconds ago      Up 53 seconds       0.0.0.0:3306->3306/tcp, :::3306->3306/tcp, 33060/tcp
nginx               nginx               "/docker-entrypoint.…"   nginx               54 seconds ago      Up 52 seconds       80/tcp, 0.0.0.0:18080-18081->18080-18081/tcp, :::18080-18081->18080-18081/tcp

#清理
docker compose down

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐