react部署到nginx外网如何访问

部署 React 应用至 Nginx 并允许外网访问

构建 React 应用

运行以下命令生成生产环境优化版本，输出文件默认在 build 目录：

npm run build

配置 Nginx 服务器

编辑 Nginx 配置文件（通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default），添加以下内容：

server {
    listen 80;
    server_name your_domain_or_ip;  # 替换为域名或服务器外网IP

    location / {
        root /path/to/react/build;  # 替换为build目录实际路径
        try_files $uri /index.html;
    }
}

重启 Nginx 服务

执行以下命令使配置生效：

sudo systemctl restart nginx

防火墙与端口开放

确保服务器防火墙允许 HTTP（80端口）或 HTTPS（443端口）流量：

sudo ufw allow 80/tcp
sudo ufw allow 443/tcp

域名与 HTTPS（可选）

若需通过域名访问且启用 HTTPS：

1. 使用 Certbot 获取 Let's Encrypt 证书：

   sudo certbot --nginx -d your_domain.com

2. 自动更新证书：

   sudo certbot renew --dry-run

验证访问

浏览器输入服务器外网 IP 或域名，应显示 React 应用页面。若遇问题，检查 Nginx 错误日志：

sudo tail -f /var/log/nginx/error.log

注意事项

• 确保 build 目录权限允许 Nginx 读取（如 chmod -R 755 /path/to/build）。
• 若使用自定义 API 代理，需在 Nginx 中配置反向代理规则。