前后端部署 + Nginx 配置 + Cloudflare 全攻略（通俗易懂版）

🚀 前后端部署 + Nginx 配置 + Cloudflare 全攻略（通俗易懂版）

🌍 前言

想象一下：

你的 前端项目 是"门面"，负责迎接用户。
你的 后端项目 是"后厨"，负责做菜（数据处理）。
Nginx 就是"服务员"，把用户点的菜送到正确的地方。
Cloudflare 就是"保安 + 加速器"，既能保护餐厅不被打砸抢（防 DDoS、防攻击），还能让顾客在不同地方都能快速吃到饭（CDN 加速）。

今天我们就从 部署 → 配置 → 加速 → 安全 一步步来。

1. 环境准备

服务器（Linux）需要：

Nginx：反向代理 + 静态资源托管
Node.js + PM2：运行 Node.js 项目（示例用 Node.js）
JDK：如果后端是 Java Spring Boot
Cloudflare 账号：提供 DNS + CDN + 安全防护

2. 前端部署

1. 打包前端代码

以 Vue 为例：

bash 复制代码

npm run build

得到 dist/ 文件夹。

2. 上传到服务器

bash 复制代码

scp -r dist/* root@your_server:/data/code_html/

3. 配置 Nginx 托管

nginx 复制代码

root /data/code_html;
location / {
    try_files $uri $uri/ /index.html;
}

👉 作用：保证前端路由（如 /user/profile）不会 404。

3. 后端部署

Node.js 示例

bash 复制代码

cd /data/code_server
npm install
pm2 start app.js --name backend
pm2 save
pm2 startup

👉 pm2 就像"保姆"，保证后端不会因为关掉终端而挂掉。

Java 示例

bash 复制代码

scp app.jar root@your_server:/data/code_server/
cd /data/code_server
nohup java -jar app.jar > app.log 2>&1 &

👉 nohup 就像"后台运行"，即使退出也继续跑。更稳妥的方法是用 systemd。

4. Nginx 配置（核心）

完整配置（IP 已替换为 your_server_ip）：

nginx 复制代码

server {
    listen 80;
    server_name your_server_ip;
    root /data/code_html;
    index index.html index.htm;

    # API 代理（Node.js:3001 / Java:8080）
    location ^~ /api/ {
        proxy_pass http://127.0.0.1:3001/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;

        # 跨域支持
        add_header Access-Control-Allow-Origin $http_origin always;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS' always;
        add_header Access-Control-Allow-Headers 'Authorization,Content-Type' always;

        if ($request_method = 'OPTIONS') {
            return 204;
        }
    }

    # 管理端静态资源
    location ^~ /admin/ {
        alias /data/code_manage/;
        try_files $uri $uri/ /admin/index.html;

        location ~* \.(js|css|png|jpg|jpeg|svg|ico|gif|bmp|swf)$ {
            expires 7d;
        }
        location ~* \.(vue|jsx|ts|map|env)$ {
            deny all;
        }
    }

    # 导出文件
    location ^~ /exports/ {
        proxy_pass http://127.0.0.1:3001/exports/;
    }

    # 前端路由支持
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 禁止访问敏感文件
    location ~ ^/(\.git|\.env|README.md|LICENSE) {
        return 404;
    }

    # 静态资源缓存
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
        expires 30d;
    }
    location ~ .*\.(js|css)?$ {
        expires 12h;
    }

    # 日志
    access_log  /www/wwwlogs/your_server_ip.log;
    error_log   /www/wwwlogs/your_server_ip.error.log;
}

👉 这份配置的作用：

/ → 前端 SPA
/api/ → 后端服务（Node.js/Java）
/admin/ → 管理系统前端
/exports/ → 后端导出接口
try_files → 保证前端路由刷新不报错
expires → 给静态资源加缓存
deny all → 防止敏感文件泄露

5. 接入 Cloudflare

为什么要用 Cloudflare？

隐藏真实服务器 IP（避免被直接攻击）。
DNS 解析：让域名绑定到你的服务器。
CDN 加速：Cloudflare 在全球有节点，用户访问时能走最近的节点。
安全防护：自动抵御 DDoS、SQL 注入等攻击。
免费 SSL 证书：轻松上 HTTPS。

步骤

1. 注册 Cloudflare

打开 Cloudflare 官网，注册账号。

2. 添加网站

输入你的域名（比如 myapp.com），Cloudflare 会自动扫描 DNS 记录。
添加一条 A 记录：
- @ → 指向 your_server_ip
- www → 指向 your_server_ip

3. 修改域名 DNS

去域名注册商（如阿里云/腾讯云/Namecheap）修改 域名服务器（NS），改成 Cloudflare 提供的两个地址。
等待解析生效（几分钟到几小时不等）。

4. 打开小云朵（代理模式）

在 Cloudflare 控制台 DNS 页面，把小云朵点成橙色。
这样就启用了 CDN + IP 隐藏。

5. 开启 SSL

在 Cloudflare → SSL/TLS 里选择 Flexible 或 Full 模式。
推荐：
- 如果你在 Nginx 配置了证书，用 Full (strict)。
- 如果没有，就用 Flexible，Cloudflare 会帮你处理 HTTPS。

6. 强化安全

开启 防火墙规则，比如禁止某些地区访问、限制请求速率。
开启 Bot 管理，拦截恶意爬虫。

6. 学会后的作用

你能让前端、后端、Nginx、Cloudflare 协同工作：
- 用户请求 → Cloudflare（加速 + 防护）
- Cloudflare → Nginx（分流）
- Nginx → 前端/后端
你能交付一个 真正上线可用的项目，而不是只能在本地跑。
你能做到：
- 性能优化（CDN + 缓存）
- 安全性（隐藏 IP + 防 DDoS + 拦截敏感文件）
- 稳定运行（PM2 / systemd）
你能让别人访问你的域名就能用项目，而不是记一堆奇怪的端口号。

✅ 总结

整套流程下来，你学会了：

前端如何打包并交给 Nginx 托管
后端（Node.js/Java）如何运行并稳定守护
Nginx 配置的核心作用和安全优化
Cloudflare 如何接入，加速 + 隐藏 IP + 防护

一句话总结：

👉 以前你只是"能开发"，学完这些你就是"能上线"。