前后端分离项目多域名部署配置

字数: 0 字 时长: 0 分钟

服务器环境安装

安装JDK8/17

Linux 版本的 JDK 1.8 的安装包，可以去 Oracle官网 下载

Linux 创建一个放安装软件的目录。

mkdir -p /opt/software.env

然后把他上传到该目录去。

在该目录中，执行解压命令如下：

tar -zxvf jdk-8u211-linux-x64.tar.gz

jdk-8u211-linux-x64.tar.gz 这里替换为你上传的压缩包名字。

压缩后如下：

接下来，执行如下命令，开始配置环境变量：

vim /etc/profile

将光标移动到文件的最后面，添加如下内容，然后保存退出：

export JAVA_HOME=/opt/software/env/jdk-17.0.12
export JRE_HOME=${JAVA_HOME}/jre
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib:$CLASSPATH
export JAVA_PATH=${JAVA_HOME}/bin:${JRE_HOME}/bin
export PATH=$PATH:${JAVA_PATH}

JAVA_HOME 对应的就是你刚刚解压的 jdk 文件夹路径。

然后通过以下命令进行测试是否安装成功。

java -version

安装 Docker

Docker入门安装

安装中间件

✅️ 中间件环境部署

前后端打包

在此之前，先创建一个用于防止前后端的目录。

mkdir -p  /opt/software/data/picture/{frontend,backend}

直接快捷使用 vite build 命令进行打包。

然后把打包的 dist 目录上传到 frontend 目录中。

后端的 pom 文件需要加入，springboot 打包插件。

<build>
  <plugins>
    <!-- Spring Boot 打包插件 -->
    <plugin>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-maven-plugin</artifactId>
    </plugin>
  </plugins>
</build>

然后点击 package 进行打包。

然后把打好的 jar 包上传到后端的指定目录。

输入以下命令进行测试，jar 包是否可以正常运行。

java -jar lg-picture-backend-1.0-SNAPSHOT.jar --server.port=18888

可以看到，日志运行正常，说明运行成功。

使用 docker-compose部署

创建 nginx 目录，在改目录下面，创建 nginx.conf 文件以及 docker-compose 文件

mkdir -p /opt/software/data/nginx/
vim nginx.conf
vim docker-compose.yaml

编辑 nginx.conf 文件

worker_processes 1;

events {
    worker_connections 1024;
}

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

    sendfile on;
    keepalive_timeout 65;

    # 主域名静态网站
    server {
        listen 80;
        server_name leocoder.cn;

        root /usr/share/nginx/blog;
        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }

    # 二级域名网站
    server {
        listen 80;
        server_name picture.leocoder.cn;

        # 前端服务
        location / {
            root /usr/share/nginx/picture/frontend;
            index index.html;
            try_files $uri $uri/ /index.html;
        }

        # 后端服务代理
        location /api/ {
            proxy_pass http://picture-backend:18888/api/; # backend 为后端服务的 docker network 名称
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

这里主要是配置两个网站，主域名 leocoder.cn 配置我们的 vuepress 静态网站，而二级域名 picture.leocoder.cn 配置我们图库项目，包括前段以及后端。

配置解释：

主域名：

• server { … } 块定义了一个虚拟主机，处理特定域名的请求。

• listen 80;：表示该虚拟主机监听 80 端口，即 HTTP 请求的默认端口。

• server_name leocoder.cn;：指定该虚拟主机响应的域名是 leocoder.cn。

• root /usr/share/nginx/blog;：指定该域名的根目录为 /usr/share/nginx/blog，所有的静态文件都从这个目录提供。

• index index.html;：指定默认的首页文件为 index.html。

• location / { … }：定义根路径 / 的请求处理规则。try_files 指令尝试查找请求的文件，首先会检查请求的 URI 是否有对应的文件（$uri），如果没有则尝试加上 / 再查找（$uri/），如果还找不到则重定向到 /index.html。这对于单页面应用（SPA）特别有用。

二级域名：

• server { … } 块定义了另一个虚拟主机，处理 picture.leocoder.cn 这个二级域名的请求。

• listen 80;：和主域名相同，监听 80 端口。

• server_name picture.leocoder.cn;：指定该虚拟主机响应 picture.leocoder.cn。

• location / { … }：该块用于处理根路径 / 的请求，指向静态文件目录 /usr/share/nginx/picture/frontend，并使用 try_files 来处理文件请求，支持单页应用（SPA）。

• location /api/ { … }：该块用于处理以 /api/ 开头的请求，进行后端服务代理。通过 proxy_pass 将请求转发到 http://picture-backend:18888/api/。其中，picture-backend 是 Docker 容器的名称，Nginx 会根据 Docker 的网络名称来访问该容器的服务。

• proxy_set_header 指令用于设置传递给后端的 HTTP 头信息，确保后端能获取到客户端的请求信息，如原始主机（Host）、客户端 IP（X-Real-IP）和代理链信息（X-Forwarded-For）。

---

编辑 docker-compose.yaml

version: '3.9'
services:
  nginx:
    image: nginx:latest
    container_name: nginx-proxy
    ports:
      - "80:80"
    volumes:
      - /opt/software/data/nginx/nginx.conf:/etc/nginx/nginx.conf
      - /opt/software/data/blog/dist:/usr/share/nginx/blog
      - /opt/software/data/picture/frontend/dist:/usr/share/nginx/picture/frontend
    networks:
      - proxy_network
    restart: always

  picture-backend:
    image: openjdk:17
    container_name: picture-backend
    volumes:
      - /opt/software/data/picture/backend:/app
    working_dir: /app
    command: ["java", "-jar", "lg-picture-backend-1.0-SNAPSHOT.jar", "--server.port=18888"]
    networks:
      - proxy_network
    restart: always

networks:
  proxy_network:
    driver: bridge

然后通过下面的命令启动项目

docker-compose up -d

如果需要重新部署的话，停止并删除由 docker-compose up 启动的所有容器、网络和卷。

docker-compose down -v

如果只是想要停止容器，但不删除容器和网络。

docker-compose stop

配置 ssl 证书

这里使用 Let’s Encrypt 提供的免费 SSL 证书，并通过 Certbot 工具自动获取和安装。以下是具体步骤：

由于 Certbot 无法直接与 Docker 部署的 Nginx 交互，你可以使用 Certbot 的 standalone 模式，这需要暂时停止占用 80 端口的 Nginx 容器。

在获取证书之前，停止 Nginx 容器以释放 80 端口：

docker-compose down

使用以下命令获取证书：

sudo certbot certonly --standalone -d leocoder.cn -d picture.leocoder.cn

• certonly：仅获取证书，不自动配置。

• --standalone：Certbot 启动一个临时的 web 服务来完成验证。

• -d：指定域名。

获取成功后，证书将存储在 /etc/letsencrypt/live/ 目录中。

然后将证书复制到 Nginx 可访问的目录

Certbot 生成的证书通常位于 /etc/letsencrypt/live/yourdomain.com/ 目录下。您需要将这些证书文件复制到 Nginx 配置目录 /etc/ssl/certs/ 和 /etc/ssl/private/：

sudo cp /etc/letsencrypt/live/leocoder.cn/fullchain.pem /etc/ssl/certs/leocoder.cn.crt
sudo cp /etc/letsencrypt/live/leocoder.cn/privkey.pem /etc/ssl/private/leocoder.cn.key

首先，您需要确保目标目录存在。你可以通过以下命令创建所需的目录：

sudo mkdir -p /etc/ssl/private
sudo mkdir -p /etc/ssl/certs

修改nginx.conf 文件

events {
    worker_connections 1024;  # 最大连接数
}

http {
    include /etc/nginx/mime.types;  # 载入文件类型
    default_type application/octet-stream;  # 默认文件类型

    sendfile on;  # 启用文件发送
    keepalive_timeout 65;  # 设置保持连接时间
    # 主域名网站
    server {
        listen 80;
        server_name leocoder.cn;
        return 301 https://$host$request_uri;  # 强制 HTTP 重定向到 HTTPS
    }

    server {
        listen 443 ssl;
        server_name leocoder.cn;

        ssl_certificate /etc/ssl/certs/leocoder.cn.crt;
        ssl_certificate_key /etc/ssl/private/leocoder.cn.key;

        root /usr/share/nginx/blog;
        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }

    # 二级域名网站
    server {
        listen 80;
        server_name picture.leocoder.cn;
        return 301 https://$host$request_uri;  # 强制 HTTP 重定向到 HTTPS
    }

    server {
        listen 443 ssl;
        server_name picture.leocoder.cn;

        ssl_certificate /etc/ssl/certs/leocoder.cn.crt;
        ssl_certificate_key /etc/ssl/private/leocoder.cn.key;

        # 前端服务
        location / {
            root /usr/share/nginx/picture/frontend;
            index index.html;
            try_files $uri $uri/ /index.html;
        }

        # 后端服务代理
        location /api/ {
            proxy_pass http://picture-backend:18888/api/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}
                                                                                                                                                                           63,1          Bot

修改 docker-compose 文件

version: '3.9'
services:
  nginx:
    image: nginx:latest
    container_name: nginx-proxy
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - /opt/software/data/nginx/nginx.conf:/etc/nginx/nginx.conf
      - /opt/software/data/blog/dist:/usr/share/nginx/blog
      - /opt/software/data/picture/frontend/dist:/usr/share/nginx/picture/frontend
      - /etc/letsencrypt/live/leocoder.cn/fullchain.pem:/etc/ssl/certs/leocoder.cn.crt:ro
      - /etc/letsencrypt/live/leocoder.cn/privkey.pem:/etc/ssl/private/leocoder.cn.key:ro
    networks:
      - proxy_network
    restart: always

  picture-backend:
    image: openjdk:17
    container_name: picture-backend
    volumes:
      - /opt/software/data/picture/backend:/app
    working_dir: /app
    command: ["java", "-jar", "lg-picture-backend-1.0-SNAPSHOT.jar", "--server.port=18888"]
    networks:
      - proxy_network
    restart: always

networks:
  proxy_network:
    driver: bridge

完成上述步骤后，重新部署服务

docker-compose up -d

可以看到，此时就是安全的连接了，大功告成！

配置自动续期

Let’s Encrypt 的证书有效期为 90 天，因此需要配置自动续期。

编辑定时任务：

sudo crontab -e

添加以下行，每月自动续期并重启 Nginx：

0 0 1 * * certbot renew --quiet