react项目如何部署到阿里云

部署React项目到阿里云ECS服务器

准备React项目
确保项目已完成构建，生成静态文件。在项目根目录运行 npm run build 或 yarn build，生成 build 文件夹。

配置阿里云ECS服务器
购买并登录阿里云ECS实例，确保实例已安装Node.js、Nginx等必要环境。通过SSH连接到服务器，更新系统软件包：

sudo apt update && sudo apt upgrade -y

上传项目文件到服务器
使用 scp 或SFTP工具将本地 build 文件夹上传到服务器。例如：

scp -r ./build username@your-server-ip:/path/to/target

配置Nginx托管静态文件
安装Nginx并修改配置文件，指向上传的 build 文件夹：

sudo apt install nginx -y
sudo nano /etc/nginx/sites-available/default

修改Nginx配置中的 root 路径：

server {
    listen 80;
    server_name your-domain.com;
    root /path/to/target/build;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

重启Nginx服务：

sudo systemctl restart nginx

配置域名与HTTPS（可选）
在阿里云域名控制台解析域名到ECS公网IP。使用Certbot申请免费SSL证书：

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your-domain.com

验证部署
访问域名或服务器IP，检查React应用是否正常运行。若遇到问题，查看Nginx错误日志：

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

使用Docker部署（替代方案）

创建Dockerfile
在React项目根目录创建 Dockerfile：

FROM node:alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html

构建并运行容器
在服务器上安装Docker后，执行以下命令：

docker build -t react-app .
docker run -d -p 80:80 react-app

使用阿里云OSS托管静态资源（可选）

上传到OSS
在阿里云OSS控制台创建Bucket，将 build 文件夹内容上传至Bucket。配置Bucket为静态网站托管模式，并绑定自定义域名。

配置CDN加速
在阿里云CDN控制台添加OSS源站，加速静态资源访问，提升加载速度。