Railway上需分离部署React前端与FastAPI后端：后端用Python服务，配置$PORT和CORS；前端用Static Site或Nginx容器，通过/api反向代理至后端，并统一使用相对路径调用API。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Railway上部署React前端与FastAPI后端的完整路径
你想把本地跑通的Devin AI风格应用——React前端加FastAPI后端——真正变成线上可访问的服务，而不是只在localhost:3000和localhost:8000看效果。Railway能帮你跳过服务器配置、域名绑定、HTTPS证书这些琐事，但必须严格区分前后端部署逻辑，否则会出现跨域失败、静态文件404或API调用被拒绝的问题。
第一步：为FastAPI后端单独创建一个服务。登录Railway，点击“New Project”→“Create Empty Project”，项目名建议带-backend后缀（如devin-ai-backend），避免后续混淆。
第二步：连接GitHub仓库。选择存放FastAPI代码的主分支，确保根目录下有requirements.txt和正确的启动命令（如uvicorn main:app --host 0.0.0.0:$PORT --port $PORT）。【$PORT必须作为环境变量传入，不能写死为8000，否则服务无法启动】
第三步：设置构建与运行配置。在“Services”页点击刚创建的服务→“Settings”→“Build & Deploy”，将Build Command设为pip install -r requirements.txt，Start Command设为uvicorn main:app --host 0.0.0.0:$PORT --port $PORT。保存后触发首次部署。
立即学习“前端免费学习笔记（深入）”；
React前端部署：不能直接扔进同一服务
Railway不原生托管纯静态前端，你不能把build后的React文件夹塞进FastAPI服务里然后指望它自动serve。那样会导致/static/路径冲突、CORS头缺失、history路由404，而且违反前后端分离原则。
方法一：用Railway内置的Static Site服务类型。新建一个服务→选择“Static Site”模板→连接存放React源码的仓库→在“Build & Deploy”中将Build Command设为npm ci && npm run build，Output Directory填dist（或你实际的build输出目录）。这一步会自动生成CDN链接，但需手动配置反向代理或DNS指向。
方法二：用Nginx容器桥接（推荐用于Devin类AI应用）。新建一个服务→选择“Dockerfile”模板→在React项目根目录新增Dockerfile，内容为：
FROM nginx:alpine
COPY ./build /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
同时新增nginx.conf，关键段落必须包含：location /api { proxy_pass http://your-backend-service.up.railway.app; }，其中your-backend-service.up.railway.app替换成你在Railway后台看到的真实后端服务域名。这才能让前端请求/api路径时正确转发到FastAPI。
关键联调配置：环境变量与跨域控制
FastAPI后端必须显式允许前端域名跨域，否则fetch('/api/chat')会直接被浏览器拦截。在main.py中加入：
from fastapi.middleware.cors import CORSMiddleware
app.add_middleware(CORSMiddleware, allow_origins=["https://your-frontend.up.railway.app"], allow_methods=["*"], allow_headers=["*"])。注意allow_origins不能写*，Railway强制要求具体域名。
在Railway后台的FastAPI服务“Variables”页，添加环境变量：FRONTEND_URL=https://your-frontend.up.railway.app。这个变量要被后端用于生成重定向地址或Webhook回调地址，不能漏。
React前端代码中所有API调用地址，统一用相对路径：fetch("/api/chat")。不要写成http://localhost:8000/api/chat，也不要硬编码Railway后端域名——因为Nginx反向代理已接管/api前缀，前端完全感知不到后端真实地址。
