当前位置:首页 > React

react如何部署到服务器

2026-01-25 20:35:47React

部署 React 应用到服务器的步骤

构建生产环境代码

运行以下命令生成优化后的生产环境代码,代码会被打包到 build 文件夹:

npm run build

配置服务器

确保服务器已安装 Node.js 或配置了静态文件服务(如 Nginx、Apache)。

上传构建文件

build 文件夹中的内容上传到服务器的目标目录,例如 /var/www/html

使用 Nginx 配置静态文件服务

编辑 Nginx 配置文件(通常在 /etc/nginx/sites-available/default),添加以下内容:

server {
    listen 80;
    server_name your_domain.com;

    root /var/www/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

重启 Nginx 使配置生效:

sudo systemctl restart nginx

使用 PM2 运行 Node.js 服务器(可选)

如果使用 serve 或其他 Node.js 服务器,可以全局安装 serve 并运行:

npm install -g serve
serve -s build -l 4000

使用 PM2 管理进程:

pm2 serve build 4000 --spa
pm2 save
pm2 startup

配置 HTTPS(可选)

使用 Let’s Encrypt 获取免费 SSL 证书:

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your_domain.com

验证部署

访问服务器的 IP 或域名,确保 React 应用正常加载。

react如何部署到服务器

标签: 服务器react
分享给朋友:

相关文章

react如何记忆

react如何记忆

React 记忆技术 在 React 中,记忆(Memoization)是一种优化技术,用于避免不必要的重新渲染或计算。React 提供了多种内置方法和第三方库来实现记忆功能。 useMemo Ho…

react native 如何

react native 如何

React Native 开发基础 React Native 是一个用于构建跨平台移动应用的框架,允许开发者使用 JavaScript 和 React 编写代码,同时生成原生 iOS 和 Androi…

电脑如何安装react

电脑如何安装react

安装 Node.js 和 npm React 依赖于 Node.js 和 npm(Node Package Manager)。从 Node.js 官网下载并安装最新稳定版本,安装完成后会自动包含 np…

如何手写一个react

如何手写一个react

手写一个简单的 React 创建一个基础的 React 实现需要理解其核心概念:虚拟 DOM、组件、状态管理和渲染。以下是一个简化版的 React 实现。 创建虚拟 DOM 虚拟 DOM 是真实 D…

如何react页面

如何react页面

创建 React 页面 使用 create-react-app 快速初始化项目: npx create-react-app my-app cd my-app npm start 基础页面结构 在…

react如何更新

react如何更新

更新 React 版本的方法 检查当前 React 版本 运行以下命令查看项目中安装的 React 版本: npm list react 更新 React 及相关依赖 通过 npm 或 yar…