如何在Hetzner VPS部署React+Flask应用并配置域名、DNS及SMTP（低预算）

• 域名注册：选廉价后缀（如.xyz、.top），年付仅几块到十几块，在Namecheap、Porkbun或国内平台注册基础款即可，无需额外付费服务。
• DNS配置：
  • 用免费DNS服务（如Cloudflare免费版），将域名的Nameserver替换为Cloudflare提供的地址。
  • 添加解析记录：
    • A记录：主机名填@（根域名）和www，指向你的Hetzner VPS公网IP；若后端需独立子域名（如api.yourdomain.com），再加一条A记录指向同一IP。
  • 开启Cloudflare免费CDN，既能加速前端访问，还能免费获取Let's Encrypt SSL证书，顺带防基础攻击。

• 免费SMTP服务选择：
  • Gmail：开启两步验证后创建应用专用密码，SMTP服务器smtp.gmail.com，端口587，加密用TLS，适合小流量场景（日发送量有限制）。
  • SendGrid免费版：每月100封免费额度，注册后生成API密钥，SMTP服务器smtp.sendgrid.net，端口587，用户名填apikey，密码为你的API密钥。
• Flask代码配置示例（避免硬编码密码，用环境变量存储敏感信息）：

from flask import Flask
from flask_mail import Mail, Message
import os

app = Flask(__name__)
app.config['MAIL_SERVER'] = 'smtp.sendgrid.net'
app.config['MAIL_PORT'] = 587
app.config['MAIL_USE_TLS'] = True
app.config['MAIL_USERNAME'] = 'apikey'
app.config['MAIL_PASSWORD'] = os.getenv('MAIL_PASSWORD')  # 从环境变量取密钥
app.config['MAIL_DEFAULT_SENDER'] = 'your@email.com'

mail = Mail(app)

@app.route('/send-test')
def send_test_mail():
    msg = Message('测试邮件', recipients=['user@example.com'])
    msg.body = '这是一封来自Flask应用的测试邮件'
    mail.send(msg)
    return '邮件发送成功'

• 环境变量设置：在VPS终端执行export MAIL_PASSWORD="你的API密钥"，若要永久生效，可写入~/.bashrc文件。

1. 初始化VPS环境 #

登录Hetzner VPS（推荐选Ubuntu 22.04，稳定且教程丰富），先更新系统：

sudo apt update && sudo apt upgrade -y

安装必备工具：

sudo apt install git python3-pip python3-venv nginx certbot python3-certbot-nginx -y

2. 部署Flask后端 #

• 拉取代码到VPS（或用scp上传本地代码）：

git clone 你的后端代码仓库地址
cd 后端代码目录

• 创建虚拟环境并安装依赖：

python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt

• 安装Gunicorn（替代Flask自带的开发服务器，更稳定）：

pip install gunicorn

• 创建systemd服务，让后端后台运行并开机自启：

sudo nano /etc/systemd/system/flask-app.service

写入以下内容（替换路径和用户名为你的实际信息）：

[Unit]
Description=Flask Backend App
After=network.target

[Service]
User=你的VPS用户名
WorkingDirectory=/home/你的VPS用户名/后端代码目录
Environment="PATH=/home/你的VPS用户名/后端代码目录/venv/bin"
ExecStart=/home/你的VPS用户名/后端代码目录/venv/bin/gunicorn --workers=3 --bind=0.0.0.0:5000 app:app

[Install]
WantedBy=multi-user.target

• 启动并设置开机自启：

sudo systemctl daemon-reload
sudo systemctl start flask-app
sudo systemctl enable flask-app

• 检查服务状态：sudo systemctl status flask-app，确保显示active (running)。

3. 部署React前端 #

• 本地打包React项目：npm run build，生成build文件夹。
• 上传打包后的文件到VPS：

scp -r build/ 你的VPS用户名@你的VPSIP:/home/你的VPS用户名/react-frontend

• 配置Nginx反向代理，区分前端静态请求和后端API请求：

sudo nano /etc/nginx/sites-available/yourdomain.com

写入以下内容（替换域名和路径）：

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    # 前端静态文件路由
    location / {
        root /home/你的VPS用户名/react-frontend/build;
        try_files $uri $uri/ /index.html;
    }

    # 后端API代理
    location /api {
        proxy_pass http://localhost:5000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

• 启用配置并重启Nginx：

sudo ln -s /etc/nginx/sites-available/yourdomain.com /etc/nginx/sites-enabled/
sudo rm /etc/nginx/sites-enabled/default
sudo nginx -t  # 测试配置是否合法
sudo systemctl restart nginx

• 配置HTTPS（若未用Cloudflare）：

sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

按提示完成操作，会自动配置SSL证书和HTTP转HTTPS跳转。

4. 防火墙配置 #

打开必要端口：

sudo ufw allow ssh
sudo ufw allow http
sudo ufw allow https
sudo ufw enable

检查防火墙状态：sudo ufw status

内容的提问来源于stack exchange，提问作者DMN