当前位置：首页 > React

react项目如何部署

2026-02-12 03:29:10React

部署 React 项目的常见方法

方法 1：使用静态服务器部署（如 Nginx、Apache）

构建生产版本：运行 npm run build 或 yarn build，生成优化后的静态文件（位于 build 文件夹）。

配置服务器：将 build 文件夹内容上传至服务器，并配置 Nginx/Apache 指向该目录。例如 Nginx 配置片段：

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

方法 2：部署到云平台（如 Vercel、Netlify）

通过 Git 集成：直接关联 GitHub/GitLab 仓库，平台会自动检测 React 项目并完成构建部署。

手动上传：在平台控制台上传 build 文件夹，或通过 CLI 工具部署。

方法 3：使用 Docker 容器化部署

react项目如何部署

创建 Dockerfile：

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

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

构建并运行容器：

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

方法 4：部署到 Node.js 服务器

使用 Express 等框架托管：

react项目如何部署

const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(9000);

注意事项

确保环境变量已正确配置生产环境参数（如 NODE_ENV=production）。

对于客户端路由（如 React Router），需配置服务器支持 HTML5 History API 的回退。

考虑启用 CDN 加速静态资源加载。

部署前测试 404/500 等错误页面的处理逻辑。