部署笔记之云服务器再部署一个新项目

前文：部署笔记之将本地的Vue+Spring Boot 前后端分离项目部署到云服务器上（www域名与HTTPS）

前提：远程服务器的/www/my-project 目录里存放了第一个项目的前后端文件。

bash 复制代码

# 获取该目录所有子目录
ls -l /www/my-project

一、部署前端项目

要新增端口部署第二个前端项目，核心是在 Nginx 配置中新增一个 server 块（指定新端口），并为新前端创建独立目录。以下是分步操作指南：

1、先创建新前端的目录（规范隔离）

bash 复制代码

# 创建新前端目录（示例：my-project2，可自定义）
mkdir -p /www/my-project2/frontend
# 赋予权限（和原有项目一致：赋予读写执行权限）
chmod -R 755 /www/my-project2

bash 复制代码

# 验证上传是否成功
ls -l /www/my-project2/frontend

2、上传前端打包文件到服务器

将新前端打包后的dist文件（如 index.html、static 等）上传到 /www/my-project2/frontend 目录。

本地终端（Windows CMD/PowerShell 或 macOS/Linux 终端）执行 scp 命令，上传 dist 文件夹内所有文件到服务器：

bash 复制代码

# 本地终端执行（替换为你的本地 dist 路径和服务器信息）
scp -r /本地Vue项目路径/dist/* root@服务器IP:/www/my-project2/frontend/

假设：E:\test\Vue3PlusDemo\frontEnd\dist

bash 复制代码

# 核心命令（直接复制替换服务器IP即可）
scp -r E:\test\Vue3PlusDemo\frontEnd\dist\* root@服务器IP:/www/my-project2/frontend/

3、修改 Nginx 配置，新增端口的 server 块

编辑 Nginx 主配置文件（和原有项目同文件）：

bash 复制代码

vim /etc/nginx/nginx.conf

在原有http{}内部，新增一个 server 块（示例：新增端口 8080，可改为 8081/8888 等未占用端口），完整配置参考：

bash 复制代码

worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

events {
    worker_connections 1024;
}

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

    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

    access_log /var/log/nginx/access.log main;

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;

    # ========== 原有80端口的server块（保留不动） ==========
    server {
        listen 80;
        server_name 服务器IP;

        root /www/my-project/frontend;
        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
        
        location ^~ /api {
            proxy_pass http://127.0.0.1:6868/backTest;
            proxy_method $request_method;
            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;
        }

        location /backTest/ {
            proxy_pass http://127.0.0.1:6868;
            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;
        }

        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
            expires 30d;
            add_header Cache-Control "public, max-age=2592000";
        }
    }

    # ========== 新增8080端口的server块（部署第二个前端） ==========
    server {
        listen 8080;  # 新端口（核心：和80端口区分）
        server_name 服务器IP;  # 还是服务器IP/域名，仅端口不同

        # 新前端的目录（对应第一步创建的目录）
        root /www/my-project2/frontend;
        index index.html;

        # 解决Vue history模式刷新404（和原有配置一致）
        location / {
            try_files $uri $uri/ /index.html;
        }

        # 【可选】如果新前端需要对接后端接口，新增接口转发规则
        # 示例：新前端接口前缀为 /api2，转发到后端8088端口（根据实际修改）
        location ^~ /api2 {
            proxy_pass http://127.0.0.1:8088/backTest2;
            proxy_method $request_method;
            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;
        }

        # 静态资源缓存（和原有配置一致）
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
            expires 30d;
            add_header Cache-Control "public, max-age=2592000";
        }
    }
}

修改完成后，先按 Esc 退出编辑模式，再输入 :wq 保存并退出。

验证 Nginx 配置是否正确：

bash 复制代码

nginx -t

没有问题的话重载Nginx(配置才能生效):

bash 复制代码

nginx -s reload

如果需要查看并再次编辑 nginx.conf 文件(补充)：

bash 复制代码

# cat 命令可以查看文件的完整内容
cat /etc/nginx/nginx.conf
# 文件内容较长，也可以用 less 命令分页查看（按 q 退出）
less /etc/nginx/nginx.conf

# 编辑 nginx.conf 文件：
# 进入 vim 后，按 i 键进入编辑模式，即可修改文件内容。
#修改完成后，按 Esc 键退出编辑模式，输入 :wq 并回车，保存并退出。
vim /etc/nginx/nginx.conf

# 验证配置语法
nginx -t
# 重启 Nginx
systemctl restart nginx

4、开放防火墙

在阿里云服务器的防火墙中开放 8080 端口，这样外部才能通过服务器IP:8080访问新部署的前端项目。

以下是在当前阿里云防火墙页面开放 8080 端口的步骤：

点击页面上的添加规则按钮；
在弹出的配置框中：
协议：选择TCP；
端口范围：填写8080；
来源 IP：保持默认的0.0.0.0/0（允许所有 IP 访问，若需限制可填指定 IP）；
备注：可填 "新前端项目端口"（方便后续识别）；
确认配置后点击 "确定" 保存规则。

二、部署前后端项目

要部署新前后端项目操作指南，包含关键注意事项和避坑点，全程基于 Linux 服务器（ECS）环境：

核心目标：新增 Nginx 端口 8083 映射到新项目，前后端目录独立，后端 Spring Boot 服务守护进程运行，数据库 / Redis 配置适配服务器环境。

步骤1：建独立目录结构（核心：权限 + 目录隔离）

bash 复制代码

# 1. 根目录（若已存在可跳过）
# mkdir -p /www
# chmod -R 755 /www  # 赋予读写执行权限

# 2. 新项目子目录（前端/后端/日志/上传目录分离）
mkdir -p /www/my-project5/{frontend,backend,logs,upload}
# 关键：upload目录需赋予写入权限（后端上传文件用）
chmod -R 775 /www/my-project5/upload
# chown -R root:root /www/my-project5  # 确保目录归属root，避免权限混乱

✅ 注意：

禁止给/www目录设置777权限（全网可写，极高安全风险）；
若后端运行用户非 root（如www用户），需调整chown为chown -R www:www /www/my-project5。

步骤 2：后端 JAR 包上传（Maven 打包 + 传输）

本地操作（Windows/Mac）：

bash 复制代码

# 1. 本地Maven打包（进入后端项目根目录）
mvn clean package -DskipTests  # 跳过测试，加快打包速度
# 打包成功后，JAR包路径：target/xxx-0.0.1-SNAPSHOT.jar

# 2. 上传JAR包到服务器后端目录
scp /本地路径/target/xxx-0.0.1-SNAPSHOT.jar root@服务器IP:/www/my-project5/backend/

✅ 注意：

确保本地 Maven 环境正常（mvn -v验证），打包无报错；
若上传慢 / 失败，检查服务器安全组是否放行 22 端口（SSH/SCP 默认端口）。

步骤 3：数据库配置（核心：Docker 容器文件访问 + 建库导入）

3.1 本地导出 SQL 文件

bash 复制代码

# 本地MySQL导出（Windows/Mac）
mysqldump -uroot -p 本地数据库名 > /本地路径/xxx.sql
# 输入本地MySQL密码，生成SQL文件

3.2 上传 SQL 文件到服务器

bash 复制代码

scp /本地路径/xxx.sql root@服务器IP:/www/my-project5/backend/

bash 复制代码

# 获取该目录所有子目录
ls -l /www/my-project5

3.3 服务器端创建数据库 + 导入 SQL（解决 Docker 容器路径隔离问题）

bash 复制代码

# 1. 先复制SQL文件到MySQL容器的 /tmp 目录（容器无法直接访问宿主机路径）
docker cp /www/my-project5/backend/xxx.sql mysql8:/tmp/xxx.sql

# 2. 进入MySQL容器，创建数据库并导入
docker exec -it mysql8 mysql -uroot -p
# 输入MySQL密码后执行以下命令：
CREATE DATABASE 你的数据库名 CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;  # 强制utf8mb4，兼容emoji
USE 你的数据库名;
SOURCE /tmp/xxx.sql;  # 导入容器内的SQL文件（核心：路径是容器内的/tmp）
SHOW TABLES;  # 验证表是否导入成功
exit;  # 退出MySQL

# 3. 可选：删除容器内临时SQL文件（节省空间）
docker exec -it mysql8 rm /tmp/xxx.sql

✅ 注意：

若docker exec -it mysql8报错，先检查容器是否运行：docker ps | grep
mysql8（未运行则docker start mysql8）；
导入报错ERROR 1046 (3D000): No database selected：确认先执行USE 你的数据库名;；
导入报错Table already exists：先清空数据库（DROP DATABASE
库名;）再重建，或用mysqldump导出时加--add-drop-table参数。

步骤 4：配置后端 application.yml（核心：解耦本地配置）

bash 复制代码

# 进入后端目录，创建并编辑配置文件
cd /www/my-project5/backend
vim application.yml

将以下模板粘贴到文件中（替换所有你的XXX为真实信息）：

bash 复制代码

server:
  port: 6868  # 后端端口，避免和Nginx(8083)、MySQL(3306)冲突

spring:
  # 数据库配置（关键：服务器MySQL地址/密码/库名）
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/你的数据库名?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: 你的MySQL密码  # 服务器Docker中MySQL的密码，不是本地的！
    driver-class-name: com.mysql.cj.jdbc.Driver

  # Redis配置（同服务器则保持127.0.0.1，否则改IP）
  redis:
    host: 127.0.0.1
    port: 6379
    password: 你的Redis密码  # 无密码则留空（password: ""）
    timeout: 5000  # 可选：添加超时时间，避免连接阻塞

  # 文件上传配置（Linux路径，对应步骤1创建的upload目录）
  file:
    staticAccessPath: /jitUpload
    uploadFolder: /www/my-project5/upload/  # 必须和步骤1的目录一致！

# 日志配置（可选：输出到后端logs目录，方便排查）
logging:
  file:
    name: /www/my-project5/logs/backend.log
  level:
    root: INFO
    com.yourpackage: DEBUG  # 你的业务包名，调试用

编辑完成后，验证配置：

bash 复制代码

cat application.yml  # 核对无语法错误（YAML严格缩进，禁止tab，用2个空格）

✅ 注意：

YAML 语法错误是启动失败的高频原因：冒号后必须加空格，层级缩进一致，字符串无特殊字符无需引号；
数据库 URL 必须加serverTimezone=Asia/Shanghai（避免时区报错）；
Redis 若未设置密码，需写password: ""（空字符串），而非删除该行（否则默认 null 可能导致连接失败）。

步骤 5：配置 Systemd 守护进程（核心：后端服务不随终端关闭停止）

5.1 创建服务文件

bash 复制代码

vim /etc/systemd/system/my-project5.service  # 文件名和项目名一致，便于管理

粘贴以下模板（替换xxx-0.0.1-SNAPSHOT.jar为你的 JAR 包名）：

bash 复制代码

[Unit]
Description=My Project5 Spring Boot Service
After=network.target mysql.service redis.service
Wants=mysql.service redis.service

[Service]
User=root
WorkingDirectory=/www/my-project5/backend
# 关键：JAR包路径用绝对路径，避免WorkingDirectory失效
ExecStart=/usr/bin/java -jar /www/my-project5/backend/xxx-0.0.1-SNAPSHOT.jar
# 可选：添加JVM参数（如内存限制）：ExecStart=/usr/bin/java -Xms512m -Xmx1024m -jar ...
SuccessExitStatus=143
Restart=always
RestartSec=5
# 日志输出到项目logs目录（而非系统日志），便于排查
StandardOutput=append:/www/my-project5/logs/app.log
StandardError=append:/www/my-project5/logs/error.log

[Install]
WantedBy=multi-user.target

5.2 校验并启动服务

bash 复制代码

# 1. 校验配置文件语法（无输出=正确，有报错需修正）
systemd-analyze verify /etc/systemd/system/my-project5.service

# 2. 重载systemd配置
systemctl daemon-reload

# 3. 启动服务
systemctl start my-project5

# 4. 设置开机自启（推荐）
systemctl enable my-project5

# 5. 查看服务状态（关键：确认active (running)）
systemctl status my-project5

✅注意：

若状态显示failed，先查看日志：cat /www/my-project5/logs/error.log 或 journalctl -u
my-project5 -f；
常见失败原因：JAR 包路径错误、application.yml 语法错误、数据库 / Redis 连接失败、端口 6868
被占用（netstat -tulpn | grep 6868排查）；
禁止在ExecStart中写相对路径（如java -jar xxx.jar），必须用绝对路径。

步骤 6：配置 Nginx（新增 8083 端口映射）

6.1 编辑 Nginx 配置文件

bash 复制代码

# 编辑 Nginx 主配置文件
vim /etc/nginx/nginx.conf

# cat 命令可以查看文件的完整内容
cat /etc/nginx/nginx.conf

6.2 写入 Nginx 配置（前端静态文件 + 后端接口反向代理）

bash 复制代码

# ========== 新增8083端口的server块（雄君官网前后端项目） ==========
    server {
        listen 8083;  # 前端访问端口

        # 前端静态文件根目录（对应之前上传的 frontend 目录）
        root /www/my-project5/frontend;
        index index.html;  # 默认访问首页

        # 解决 Vue 路由（history 模式）刷新 404 问题（若用 hash 模式可省略）
        location / {
            try_files $uri $uri/ /index.html;
        }

        # 新增：处理 /api 开头的后端接口请求（含POST）
    location ^~ /api {
        proxy_pass http://127.0.0.1:6868/official_website;  # 后端服务地址（含context-path）
        proxy_method $request_method;  # 保留原始请求方法（关键，支持POST）
        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;
    }


        # 关键：转发前端请求到后端 Spring Boot 服务（解决跨域）
        # 前端接口请求路径若为 /api/xxx，会自动转发到后端 6868 端口
        location /official_website/ {  # 需替换：后端配置的 context-path（你的后端是 /official_website）
            proxy_pass http://127.0.0.1:6868;  # 需替换：后端服务端口（你的后端是 6868）
            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;
        }

        # 静态资源缓存配置（优化访问速度）
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
            expires 30d;  # 缓存 30 天
            add_header Cache-Control "public, max-age=2592000";
        }
    }

6.3 校验并重启 Nginx

bash 复制代码

# 1. 校验Nginx配置语法
nginx -t

# 2. 重启Nginx（使配置生效）
systemctl restart nginx  # 或 /usr/local/nginx/sbin/nginx -s reload

✅ 注意：

安全组必须放行 8083 端口（ECS 控制台→安全组→入方向添加 8083）；
前端文件需先打包（npm run build），再将dist目录下的所有文件上传到/www/my-project5/frontend；
proxy_pass末尾的/是关键：若后端接口是/api/user，代理后会转发到http://127.0.0.1:6868/user（去掉
/api 前缀），若不加/则转发到http://127.0.0.1:6868/api/user（根据后端实际接口前缀调整）；
若访问 8083 报 403，检查/www/my-project5/frontend目录权限（需 755）和 Nginx 运行用户（ps
aux | grep nginx）是否有读取权限。

步骤 7：上传前端静态文件

bash 复制代码

# 本地打包前端项目（Vue/React）
npm run build

# 上传dist目录下的所有文件到服务器前端目录
scp -r /本地前端项目/dist/* root@服务器IP:/www/my-project5/frontend/