如何将React应用部署至Google Cloud虚拟机实例？

1. 本地构建React生产版本 #

• 在你的React项目根目录下，执行生产构建命令生成可部署的静态资源：

  npm run build
  

  执行完成后，项目根目录会生成build文件夹，里面就是打包好的静态文件。

2. 配置GCE虚拟机基础环境 #

• 确认公网IP：在GCP控制台的Compute Engine实例列表中，确保你的虚拟机已分配公网IP（无IP的话，点击「编辑」→「网络接口」→「外部IP」选择可用公网IP）。
• 开放防火墙端口：进入GCP控制台「VPC网络」→「防火墙」，创建或更新规则，允许外部流量访问80（HTTP）和443（HTTPS，可选）端口，目标设置为你的虚拟机标签或所有实例。
• SSH连接虚拟机：通过GCP控制台的「SSH」按钮直接连接，或用本地终端执行：

  ssh username@your-server-public-ip
  

  注：Ubuntu系统默认用户为ubuntu，CentOS默认是centos。

3. 上传构建文件到虚拟机 #

先在虚拟机创建存储静态文件的目录，再用scp上传本地build文件夹：

• 本地终端执行：

  # 远程创建目标目录
  ssh username@your-server-public-ip "sudo mkdir -p /var/www/react-app"
  
  # 上传build文件夹
  scp -r ./build/ username@your-server-public-ip:/var/www/react-app/
  

4. 安装并配置Nginx托管静态资源 #

Nginx是轻量高效的静态文件服务器，适合托管React应用：

• 安装Nginx：

  # Ubuntu/Debian系统
  sudo apt update && sudo apt install nginx -y
  
  # CentOS/RHEL系统
  sudo yum update && sudo yum install nginx -y
  

• 创建Nginx站点配置文件：

  sudo nano /etc/nginx/sites-available/react-app
  

  写入以下配置（替换your-server-public-ip为实际IP或域名）：

  server {
      listen 80;
      server_name your-server-public-ip;
  
      root /var/www/react-app/build;
      index index.html index.htm;
  
      location / {
          try_files $uri $uri/ /index.html; # 解决React路由刷新404问题
      }
  }
  

• 启用站点配置：

  # Ubuntu/Debian
  sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/
  
  # CentOS/RHEL直接复制到conf.d目录
  # sudo cp /etc/nginx/sites-available/react-app /etc/nginx/conf.d/
  

• 验证配置合法性并重启Nginx：

  sudo nginx -t
  sudo systemctl restart nginx
  

5. 调整文件权限（推荐） #

确保Nginx运行用户（通常为www-data）有权访问静态文件：

sudo chown -R www-data:www-data /var/www/react-app
sudo chmod -R 755 /var/www/react-app

6. 测试访问 #

在浏览器中输入虚拟机的公网IP（或绑定的域名），即可看到你的Hello World React应用。

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