react项目打包部署到服务器上+宝塔面板的操作

最新推荐文章于 2025-04-08 10:58:59 发布
最新推荐文章于 2025-04-08 10:58:59 发布
阅读量2.1k 收藏 2
点赞数
文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_64544033/article/details/131780678
版权
文章描述了如何配置React项目，通过修改webpack配置，添加homepage字段，然后执行npmrunbuild进行打包。如果build后的页面为空，需检查配置。接着在腾讯云或阿里云的安全组设置端口，使用宝塔面板添加PHP站点，绑定域名和端口，最后将打包的build文件上传至服务器并设置文档根目录。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先进行配置react项目，在webpack.json中 加上homepage:'.'或‘./’

首先需要项目打包

npm run build

我们会得到一个build

运行build中的index文件如果是空白的话我们需要更改上面的操作重新打包 '.'或'./'

打包完我们需要进入腾讯云或阿里云的安全组中进行配置端口

 配置好端口后我们进入宝塔中

点击网站 php项目 添加站点

 站点域名+自己的id:端口号（也就是我们刚才建的端口号）

到首页将自己的域名删除

会看到自己创建的删除  留下自己的id即可

 创建好之后/www/wwwroot/www.aaa.cn会生成文件夹我们进入文件夹

将打包好的build文件夹放进去

 点击设置添加文档

 

 

 此时输入你的id+端口号就可以了

 

React项目打包部署注意点 + 宝塔面板几步部署项目
背影、的博客
08-11 4047
1.react项目打包 1.1 终端运行打包命令 在编辑器的终端运行vue项目打包命令 yarn build 打包成功如下： 这时我们可以看到项目目录多出来一个build文件夹，记住它，后面部署就靠它了。 1.2 修改配置 在package.json里面添加一行： "homepage": "." 如果不加上这个的话之后打包的时候,打开index.html会报错，示例如下： 2.宝塔面板部署项目 2.1 部署要求 有一台云服务器（笔者这里用的是腾讯云） 服务器安装宝塔面板 安装教程 2.2 在
Vue + Node + MongoDB 项目在宝塔Linux面板部署上线流程（CentOS8.2服务器）
Sujb8540的博客
09-02 1288
#### 一、背景 分享wallBlog项目部署上线的流程。以下是部署需要的工具以及环境： + mac系统操作 + 一台系统为CentOS 8.2服务器 + 宝塔Linux面板管理、运维项目 + Node v14.15.1 + Npm v6.14.8 + PM2管理器 v5.2.0 + MongoDB v4.4.6 + Nginx v1.21.0 1. wallBlog线上地址：[http://www.rasblog.com](http://www.rasblog.com) 2. Github地址：[h
前端基础：React项目打包部署服务器教程
最新发布
destinyol的博客
04-08 868
react项目服务器部署教程
使用宝塔面板部署react项目
weixin_46063824的博客
12-22 1087
运行dist中的index文件如果是空白的话我们需要更改配置 vite.config.ts / vite.config.js文件。首先进行配置react项目，在webpack.json中 加上homepage:'.'或‘./’创建好之后/www/wwwroot/ip会生成文件夹，我们进入文件夹。域名为自己的ip，有域名可以填写。点击网站 php项目 添加站点。将打包好的dist文件夹放进去。此时输入ip：端口就能查看了。配置 base: ‘./’
10分钟，手把手教学【正确】还原京东倒计时，初学者必看，简单易懂(1)
2301_79097795的博客
05-09 505
【代码】10分钟，手把手教学【正确】还原京东倒计时，初学者必看，简单易懂(1)
宝塔部署react前端项目，后端使用Node.js,数据库使用MongoDB（晓飞前端项目部署在云端）
weixin_54219288的博客
08-04 1282
晓飞前端全栈，宝塔部署前端网页
宝塔linux部署react项目 图文并茂 傻瓜式教学
凌宇的博客
03-09 1574
购买服务器过程省略，记得付款就好，或者新人可去白嫖一个月试用。
最新项目部署-- 使用宝塔面板将前端项目部署到阿里服务器
SOLar7SysteM的博客
11-19 458
阿里云# 项目部署 使用宝塔面板将前端项目部署到阿里服务器
react+node阿里云搭配宝塔实现项目上线（保姆级教学）
2401_82601047的博客
07-25 1220
这个请求，我们只需要将http://127.0.0.1换成我们的公网IP即可。例如：47.94.230.142：3333。输入我们上面表他账户登陆信息中的username和password。如果不知道自己的公网IP可以去阿里云实例中查看。
实战：node-react项目部署到服务器(1)
2401_84093973的博客
04-10 1040
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等。
实战：node-react项目部署到服务器
2401_84094029的博客
04-10 1799
后记总结一下这三次面试下来我的经验是：一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！多刷面经！
超简单的React项目打包后部署到服务器上
热门推荐
nihaio25的博客
12-21 1万+
前言：我们都知道有些react项目打包后生成的不管是dist,还是build的文件，直接打开都无法直接浏览到项目，然后查看控制器，就发现它报错。 如图： 用脚手架创建的 react / vue 项目，已经集成了webpack，只要运行命令：npm run build 或 yarn run build 项目就会编译成功，生成一个dist文件夹，现在问题来了，如何启动这个编译后项目呢。 ...
将React项目打包部署到服务器
weixin_61769998的博客
12-26 306
将React项目打包部署到服务器
React 环境搭建，并打包到服务器
chen_peng7的博客
04-28 2531
React 环境搭建，并打包到服务器
react+node.js+mysql 前后端分离项目 宝塔面板 部署到腾讯云服务器
weixin_43026567的博客
12-01 3381
安装完推荐界面的软件后，软件商店里搜索PM2下载安装，安装完成后打开PM2，切换node版本，并安装后端项目所需依赖（这里node项目用的express）。上传完成后，添加站点，根目录选打包后的前端文件夹（这里是dist），域名这里，域名备案没审核完或没备案，填服务器的ip地址也可以。端口这里，要同时在宝塔和腾讯云两个地方放行（建议把用到的所有端口在这两个地方同时添加了，包括前端、后端、mysql）。开头的请求，直接代理到本地服务器的8088端口（也就是后端接口地址的端口）nginx反向代理，
使用宝塔面板部署node项目、数据库及react项目
weixin_43239880的博客
12-27 4299
这个项目端口号可以随便填，但是一定要与node项目中配置的端口号一致，并且与vue项目中axios的base_url（项目基地址）的端口号一致，并且整个vue项目中的地址，你都是使用的base_url变量，而不是写死的常量。（平常的vue项目访问的图片和接口一定要用base_url，否则会出现请求错误的情况，我部署的时候就出现了，接口访问出错，找了很久，发现是vue项目里面写死了！将我们的node项目中的node_modules删除掉，然后再压缩，把这个压缩包上传上去，再解压，然后删除这个安装包即可。
react打包项目并且部署到Linux服务器上
kjprime的博客
03-21 3519
打包react项目 在命令行输入 npm run build 会在项目中生成build文件夹 在测试环境上运行 在原react的包中添加依赖 npm install serve --save 然后可以自定义端口启动(默认3000) serve -s build -p 8380 部署到Linux系统 别把原来react项目包上传到服务器，自己可以把build文件夹拿出来，重新放入一个新的文件夹中。 package.json文件可以这样写 { "name": "react",
部署react项目到服务器
程序员三木的博客
06-20 387
文章目录打包项目 打包项目 yarn build 打包成功的结果
react项目打包部署上线
03-18
### React 项目打包与部署到生产环境的最佳实践 #### 一、准备工作 在将 React 项目部署到生产环境中之前，需要完成一系列准备操作。这包括但不限于安装必要的依赖项以及配置开发环境。 确保已安装 Node.js 和 npm/yarn 工具链，并确认版本满足项目的最低需求[^1]。对于服务器端，推荐使用 Nginx 或 Apache 来托管静态资源文件，同时可以利用反向代理来解决跨域问题[^2]。 --- #### 二、React 项目打包流程 为了使应用程序能够在生产环境下高效运行，需对其进行优化和压缩处理： 1. **清理旧构建** 使用命令 `rm -rf build` 删除之前的构建产物以避免残留文件干扰新版本发布。 2. **执行构建脚本** 运行以下命令生成用于生产的静态资产： ```bash npm run build ``` 此过程会通过 Webpack 将源码转换成适合浏览器加载的形式，通常存储于根目录下的 `build` 文件夹中[^4]。 3. **检查输出内容** 构建完成后应仔细审查生成的结果，特别是入口 HTML 文件 (`index.html`) 是否正常引用了 CSS 及 JavaScript 资源路径。 --- #### 三、Nginx 配置支持单页应用 (SPA) 由于 React 默认采用的是前端路由机制，在某些情况下可能会遇到访问子页面时报错的情况（如 HTTP 404）。这是因为当用户直接请求某个内部链接时，Web 服务器无法识别这些 URL 并将其交由客户端解析。 解决方案如下所示： ```nginx server { listen 80; server_name your-domain.com; root /path/to/build; # 替换为实际的 build 目录位置 index index.html; location / { try_files $uri /index.html; # 关键设置：重定向所有未匹配的 URI 到 index.html } error_page 500 502 503 504 /50x.html; } ``` 上述配置允许任何未知路径都指向主页从而让 React Router 接管导航逻辑[^3]。 --- #### 四、上传至远程服务器 可以通过多种方式实现文件传输任务，比如 SCP 命令行工具或是图形界面软件 FileZilla 等。另外也可以借助宝塔面板这样的管理平台简化整个工作流[^5]。 具体步骤概述如下： - 登陆目标机器； - 创建站点对应的虚拟主机记录； - 把本地编译好的成果复制过去覆盖默认文档树； --- #### 五、自动化运维建议 随着业务规模扩大手动干预变得越来越不可取，因此引入 CI/CD 流水线显得尤为重要。Jenkins, GitHub Actions 等都是不错的选择可以帮助我们自动触发测试验证环节直至最终推送更新包给线上实例。 此外记得定期备份重要资料以防万一发生意外丢失情况！ --- ### 总结 综上所述，从本地调试到最后成功对外提供服务涉及多个方面知识点的学习掌握程度决定了整体效率高低。遵循以上指南能够极大提升工作效率减少潜在错误几率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

筱闯~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值