当前位置:首页 > React

react如何部署到服务器

2026-01-25 20:35:47React

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

构建生产环境代码

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

npm run build

配置服务器

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

上传构建文件

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

react如何部署到服务器

使用 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 使配置生效:

react如何部署到服务器

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 页面 使用 create-react-app 快速初始化项目: npx create-react-app my-app cd my-app npm start 编写组件代码 在 s…

react中monent如何获取日期

react中monent如何获取日期

使用 Moment.js 获取当前日期 在 React 中通过 Moment.js 获取当前日期,可以直接调用 moment() 函数。它会返回包含当前日期和时间的 Moment 对象。 impor…

如何降低react版本

如何降低react版本

降低 React 项目版本的步骤 检查当前 React 版本 运行以下命令查看项目中安装的 React 当前版本: npm list react 或 yarn list react 修改…

如何选购react

如何选购react

选购 React 相关产品或服务的建议 React 是一个用于构建用户界面的 JavaScript 库,广泛应用于前端开发。以下是选购 React 相关产品(如课程、书籍、工具、组件库等)的参考方法:…

如何下载react

如何下载react

下载 React 的方法 通过 npm 或 yarn 安装 React 可以通过包管理器 npm 或 yarn 安装。确保已安装 Node.js(包含 npm),然后在项目目录中运行以下命令:…

如何启动react

如何启动react

安装Node.js 确保系统已安装Node.js(建议使用LTS版本),可通过官网下载并安装。安装完成后,在终端运行以下命令验证版本: node -v npm -v 创建React项目 使用官方工具…