为Nginx上的Strapi API与React应用配置Let's Encrypt HTTPS证书

嘿，我来帮你搞定这个HTTPS配置的问题！咱们一步步来，先搞定Let's Encrypt的免费SSL证书，再调整Nginx配置，让你的React前端和Strapi后端都能安全地通过HTTPS访问。

第一步：安装Certbot工具 #

Certbot是Let's Encrypt官方推荐的证书获取工具，还能自动帮我们配置Nginx。根据你的服务器系统选择对应的安装命令：

• 如果是Debian/Ubuntu系：

sudo apt update && sudo apt install certbot python3-certbot-nginx

• 如果是RHEL/CentOS/Rocky Linux系：

sudo dnf install certbot python3-certbot-nginx

第二步：获取SSL证书 #

运行下面的命令，Certbot会自动检测你的Nginx配置，生成并安装证书，还会帮你配置HTTP到HTTPS的重定向：

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

跟着命令行提示操作就行，记得选择“Redirect”选项，把所有HTTP请求都转到HTTPS。

第三步：调整Nginx配置（关键！） #

Certbot会自动修改你的Nginx配置，但咱们需要针对React和Strapi的场景做一些优化和修正（注意你之前的配置里Strapi的代理端口写错了，要改成50002）。打开你的Nginx站点配置文件，替换成下面的内容：

server {
    listen 443 ssl;
    server_name myappdomain.com www.myappdomain.com;

    # 下面两行Certbot会自动添加，不用手动写
    # ssl_certificate /etc/letsencrypt/live/myappdomain.com/fullchain.pem;
    # ssl_certificate_key /etc/letsencrypt/live/myappdomain.com/privkey.pem;

    # 推荐添加的SSL安全配置，提升安全性
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;

    # React单页应用配置：直接静态托管dist目录
    location / {
        root /home/rocky/231009twins/front/dist;
        try_files $uri $uri/ /index.html; # 单页应用必须加这个，否则刷新页面会404
    }

    # 保留ACME挑战路径，方便证书自动续期
    location ^~ /.well-known/acme-challenge/ {
        root /home/rocky/231009twins/front/dist;
        allow all;
    }

    # Strapi访问重定向：访问/back自动跳转到后台管理页
    location = /back {
        return 301 /back/admin;
    }

    # Strapi API代理配置
    location /back {
        rewrite ^/back/(.*) /$1 break;
        proxy_pass http://127.0.0.1:50002; # 这里要对应Strapi的端口50002
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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_cache_bypass $http_upgrade;
    }
}

# HTTP自动重定向到HTTPS（Certbot一般会自动生成，确认下存在就行）
server {
    listen 80;
    server_name myappdomain.com www.myappdomain.com;
    return 301 https://$server_name$request_uri;
}

第四步：验证配置并重启Nginx #

先检查配置有没有语法错误：

sudo nginx -t

如果提示“test is successful”，就重启Nginx让配置生效：

sudo systemctl restart nginx

第五步：配置证书自动续期 #

Let's Encrypt证书有效期只有90天，不过Certbot默认已经设置了自动续期的定时任务。你可以用下面的命令测试续期是否正常：

sudo certbot renew --dry-run

如果没有报错，就说明自动续期没问题。

额外注意事项 #

• 记得修改Strapi的配置文件（config/server.js），把url设置为https://www.myappdomain.com/back，admin.url也设置成同样的值，避免跨域和后台访问异常。
• React应用里的API请求地址要改成HTTPS的，比如把http://localhost:50002换成https://www.myappdomain.com/back。

备注：内容来源于stack exchange，提问作者Fahed