React项目：如何在子域名部署create-react-app测试版本？

完全可行！这其实是前端项目测试部署的常规操作，很多团队都会用子域名来隔离生产和测试环境，避免影响主站用户。下面我一步步给你讲具体怎么实现：

1. 先搞定子域名解析 #

首先你需要在域名服务商的DNS管理后台，给test.mydomain.com添加解析记录：

• 如果你的服务器有固定公网IP，添加A记录，将test指向你的服务器IP
• 如果你的主域名已经指向服务器，也可以添加CNAME记录，将test指向www.mydomain.com

解析生效可能需要几分钟到几小时，你可以用ping test.mydomain.com来验证是否生效。

2. 配置Create React App适配子域名 #

因为你是部署在子域名的根目录（不是子域名下的某个文件夹），其实默认配置大多情况下可以直接用，但为了避免资源路径问题，建议做以下配置：

• 在项目根目录的package.json中添加"homepage": "https://test.mydomain.com"，这样构建时所有静态资源的路径会自动指向子域名根
• 或者通过环境变量配置：在项目根目录创建.env.test文件，写入PUBLIC_URL=https://test.mydomain.com，构建时加载这个环境文件

如果测试环境需要和生产环境不同的API地址，同样可以用环境变量区分：
在.env.test中加入REACT_APP_API_URL=https://test-api.mydomain.com，然后在package.json里添加测试构建脚本：

"scripts": {
  "build": "react-scripts build",
  "build:test": "env-cmd -f .env.test react-scripts build"
}

（需要先安装env-cmd：npm install env-cmd --save-dev）

3. 构建测试版本项目 #

运行测试环境的构建命令：

npm run build:test

或者如果没装env-cmd，直接手动指定环境变量：

REACT_APP_API_URL=https://test-api.mydomain.com npm run build

构建完成后会生成build文件夹，里面就是可以部署的静态文件。

4. 服务器配置（以Nginx为例，最常用） #

假设你的服务器用Nginx做静态文件服务，需要新增一个server块来处理子域名的请求：

# 先把HTTP请求重定向到HTTPS
server {
    listen 80;
    server_name test.mydomain.com;
    return 301 https://$server_name$request_uri;
}

# HTTPS服务配置
server {
    listen 443 ssl;
    server_name test.mydomain.com;

    # 替换成你的SSL证书路径
    ssl_certificate /etc/nginx/ssl/test.mydomain.com.crt;
    ssl_certificate_key /etc/nginx/ssl/test.mydomain.com.key;

    # 指定静态文件根目录为build文件夹路径
    root /var/www/test-react-app/build;
    index index.html;

    # 处理React单页应用的路由问题，避免刷新404
    location / {
        try_files $uri $uri/ /index.html;
    }
}

配置完后，重启Nginx生效：sudo systemctl restart nginx

如果你用Node.js的serve模块临时测试，也可以直接在build文件夹下运行：

npm install -g serve
serve -s . -l 3001

然后用Nginx反向代理到3001端口，或者直接开放服务器的3001端口，但生产环境还是推荐用Nginx做静态服务，性能更好。

5. 可选：自动化部署（提升效率） #

如果想每次代码提交到测试分支就自动部署，可以用CI/CD工具（比如GitHub Actions、GitLab CI），举个GitHub Actions的简单例子：
在项目根目录创建.github/workflows/deploy-test.yml：

name: Deploy Test Environment
on:
  push:
    branches: [test]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install dependencies
        run: npm install
      - name: Build test version
        run: npm run build:test
      - name: Deploy to server
        uses: appleboy/scp-action@v0.1.7
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          source: "build/*"
          target: "/var/www/test-react-app"

把服务器的IP、用户名、SSH密钥存在GitHub仓库的Secrets里，这样每次推送到test分支就会自动构建并部署到子域名服务器。

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