开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

react应用在部署到GitHub-pages时失败，但在本地主机上工作正常

当将React应用部署到GitHub Pages时失败，但在本地主机上正常工作时，可能有以下几个原因和解决方法：

配置文件问题：检查项目中的配置文件，特别是package.json文件中的homepage字段是否正确设置为GitHub Pages的URL。例如，如果你的GitHub Pages的URL是https://username.github.io/my-app，那么homepage字段应该设置为"https://username.github.io/my-app"。
路由问题：如果你在React应用中使用了React Router或其他路由库，并且在应用中使用了路由功能，那么在部署到GitHub Pages时可能会出现问题。GitHub Pages默认使用的是基于文件路径的路由，而不是基于浏览器历史记录的路由。为了解决这个问题，你可以尝试在应用的根目录下创建一个名为404.html的文件，并添加以下内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="0;url=/my-app/index.html">
    <script type="text/javascript">
      window.location.href = "/my-app/index.html";
    </script>
    <title>Redirecting to /my-app/index.html</title>
  </head>
  <body>
    If you are not redirected automatically, click <a href='/my-app/index.html'>here</a>.
  </body>
</html>

请注意将上述代码中的/my-app替换为你的GitHub Pages的URL路径。

构建问题：在部署到GitHub Pages之前，确保你已经正确地构建了React应用。在项目根目录下运行以下命令来构建应用：

npm run build

这将生成一个名为build的目录，其中包含了构建后的静态文件。将这些文件上传到GitHub仓库的gh-pages分支上。

仓库设置问题：确保你的GitHub仓库已经正确地设置为使用gh-pages分支作为GitHub Pages的源。在GitHub仓库的设置页面中，找到"GitHub Pages"选项，并选择gh-pages分支作为源。

如果上述解决方法都没有解决问题，你可以尝试查看浏览器的开发者工具中的错误信息，以便更好地定位问题所在。另外，你还可以参考GitHub官方文档中关于部署React应用到GitHub Pages的指南，链接地址为：https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site。

相关搜索:API调用在本地工作，但在部署到heroku或zeit时失败 Jenkins Spring构建Maven失败，但在本地构建时可以正常工作 Firebase verifySessionCookie()导致应用程序在部署到firebase时超时，但在本地工作正常部署到Heroku时出现ActionView错误，在本地工作正常节点包在本地工作，但在部署到Heroku时不起作用 Create React App - Build在Netlify上不断失败，但在本地工作外部css在本地主机上工作正常，但在远程服务器上不能正常工作 React App - Div集中在本地主机上，但在部署到github页面时不是这样 React Native构建在模拟器上失败，但在设备上工作正常为什么"scrollTop“功能在直播站点上不能正常工作，但在本地主机上可以正常工作？MERN应用程序在本地工作，但在部署到Heroku时得到503 Linkedin登录在本地主机上工作正常，但在服务器上显示错误 Google Calendar在托管服务器上失败，但在本地主机上工作 (MERN App)在Heroku部署上返回504 (网关超时)的所有API调用，但在本地工作正常 Spring Boot应用程序在本地工作，但在部署到Heroku时不起作用 Web scraper在本地工作，但在部署到Heroku服务器时不起作用当我在服务器上尝试但在本地工作时，Laravel - Route::redirect ('/')失败 Rails Gmail联系人表单-在本地主机上工作，但在部署到Heroku时不起作用 SAP连接器配置- Anypoint Studio中的“测试连接”失败，但在部署时可以正常工作 React应用程序无法在使用本地主机的移动设备上正常工作

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Astro网站部署到GitHub Pages踩坑记录

最近心血来潮，搭建了一个笔记网站，用的是 Astro React 模板，部署到 GitHub Pages，提交代码自动部署发版。

04

试用Github Action CI/CD流程（创建一个React项目，并打包部署）

增加github aciton CI配置文件：内容大体是在虚拟环境checkout项目,build React项目，部署静态文件到代码仓库的gh-pages分支。

01

Next.js项目部署到GitHub Pages问题整理

最近准备写一个小工具，域名和技术栈都看好了。用 Next.js 写，因为它基于 React，并且对 SEO 也有一定的可扩展性，下面是 Next.js 的一些特性：

01

Next.js项目部署到GitHub Pages问题整理

最近准备写一个小工具，域名和技术栈都看好了。用 Next.js 写，因为它基于 React，并且对 SEO 也有一定的可扩展性，下面是 Next.js 的一些特性：

01

它改变了 JavaScript 的体系结构——Webpack 5 Module Federation

Webpack 5 Module Federation: A game-changer in JavaScript architecture

02

「技术架构」5分钟把前端应用程序部署到NGINX

Nginx是一个流行的web服务器，用于提供web应用程序的静态资源(客户端源)。我将解释如何将Nginx设置为静态内容资源web服务器，以及如何将它配置为Linux系统上的反向代理(连接客户机和后端)。基本上如何设置前端+后端与Nginx在Linux上。如果你:

03

Angular CLI 使用教程指南参考

Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本.

05

「第一部:容器和Docker」(2) 什么是Docker

Docker是一个开源项目，用于将应用程序作为可移植的、自给自足的容器自动部署，这些容器可以在云端或本地运行。Docker也是一家推广和发展这项技术的公司，与云、Linux和Windows供应商（包括微软）合作。

01

[整理]CI持续集成-基于Github Action

参考一: 持续集成是什么？参考二: 部署GitHub Pages 参考三: Github Actions

03

Hexo + Github Pages博客搭建教程

一直以来自己都有书写文章的习惯，不管是收集资料还是表达自己的个人见解。最开始把资料都放在印象笔记里，但是印象笔记有个不好的点就是书写不方便，而且多设备登录不友好，需要升级账户。后来就搭建了一个WordPress站点，记录自己的点滴。慢慢的接触到了CSDN，也计划着在那里写博客。CSDN的编辑器有markdown版本，接触到了markdown就对其产生了好感。与此同时，我也将我的WordPress站点的编辑器换成了markdown编辑器，一处书写多处同步。慢慢的，我感受到了WordPress站点的臃肿，由于我的站点原因，做的并不是单独的博客站点，所有的文章展示方面不友好。所以萌生了搭建一个单独的博客的想法。

04

Kubernetes引入对Windows CSI的alpha支持

作者：Deep Debroy [Docker]，Jing Xu[谷歌]，Krishnakumar R（KK）[微软]

02

pwa, 上海地铁线路图全新重构.

之前一直有在维护一个上海地铁线路图的 pwa，最主要的特性就是 "offline first"。但是由于代码都是通过原生的 js 去实现，之前我都不是很喜欢去用框架，不想具有任何框架的偏好。但是到后期随着代码量的增加，代码的确变得混乱不堪，拓展新功能也变得尤为困难。因此，花了将近两个礼拜的时候对于应用进行了一次完整的重构。网站访问地址：https://neal1991.github.io/subway-shanghai

02

一文了解Docker与容器

每个容器内运行着一个应用，不同的容器相互隔离，容器之间也可以通过网络互相通信。容器的创建和停止十分快速，几乎跟创建和终止原生应用一致；另外，容器自身对系统资源的额外需求也十分有限，远远低于传统虚拟机。很多时候，甚至直接把容器当作应用本身也没有任何问题。

02

Angular 工具篇之npx及angular-cli-ghpages

今天本文的两个主角是 npx 及 angular-cli-ghpages，npx 是 npm 5.2 引入了的新的工具，用于帮助我们执行 npm 二进制任务和加速我们的工作流。而 angular-cli-ghpages 这个工具，是用于帮助 Angular CLI 的用户快速发布 Angular 应用到 Github Page。

02

Go语言中常见100问题-#100 Not understanding the impacts of running Go ..

2021年Go开发者调查（https://go.dev/blog/survey2021-results）表明，用Go编写服务是最常见的用法，见下图。与此同时，Kubernetes是部署这些服务最广泛使用的平台。

01

如何在Windows平台上基于github搭建个人博客平台

本文将介绍在Windows平台上搭建基于github pages 的个人博客网站的过程，以及利用Jekyll进行本地博客调试的过程，对于不懂前端的人来说是一个比较基础的入门教程。另外，本文也同步发布在我的个人博客上面，本文中的一些外部超链接，所涉及到的工具typora，博客模板的github地址，基于Ruby的本地博客调试方式，博客主题和markdown语法等更多的详细信息，欢迎访问我的博文地址：

05

使用TravisCI做个人博客的自动构建

今天又有朋友问我，这个博客是怎么搭建的。在回答后，顺便重新申视了下博客的构建部署方式，发现还是有一些改进空间的，刚好今天有点时间，就把它优化一下。

02

docker容器技术系列一：基本概念

前言：从去年下半年开始，我们就尝试在使用docker部署生产应用，至现在已经有十多个项目使用了docker容器部署，docker为我们节约了大量的服务器资源，并提高了运维的交付能力。我和我的小伙伴们在学习和使用docker的过程中遇到了很多的坑，现在我将我所理解的docker相关技术写成两个系列文章《docker容器技术系列》和《docker管理进阶系列》供大家参考。一、什么是docker？ Docker 是一个开源项目，诞生于 2013 年初，最初是 dotCloud 公司内部的一个业余项目。它基于

04

如何使用代码配置运行Jenkins实例？

在传播了关于DevOps文化的一些想法之后，我想再次关注Jenkins主题。我将大部分时间都花在各种环境之间，而对于每种环境，我都在一个完全不同的Jenkins上工作。我测试了高级插件中的新功能，这些新功能可以改善和阐明开发环境中的软件交付过程。确认新功能正常运行后，我将花费更多时间将其推广到其他环境。这听起来像是一项重复性的任务，但实际上，我多年来倾向于避免采用此类任务，因为多年来我一直在追求采用EaC，“一切都作为代码”，但是由于某种原因，我还没有机会将其应用于Jenkins安装范围。

01

Scannerl：模块化分布式指纹识别引擎工具

Scannerl是由Kudelski Securit开发的模块化分布式指纹识别引擎，它可以在单个主机上识别数以千计的目标指纹，也可以在多个主机上分布执行分布式的指纹识别。Scannerl会识别zmap到端口扫描的指纹内容。当前的Scannerl版本适用于Debian/Ubuntu/Arch（包括其他的一些发行版本），使用主/从（master/slave）架构，主节点会将工作（主机指纹）分配给其从节点（本地或远程），且整个部署对用户都是透明的。

03

ATT&CK视角下的红蓝对抗：一. 隧道穿透技术详解

从技术层面来讲，隧道是一种通过互联网的基础设施在网络之间传递数据的方式，其中包括数据封装、传输和解包在内的全过程,使用隧道传递的数据(或负载)可以使用不同协议的数据帧或包。

07

Kubernetes的服务网格（第2部分）：Pods目前看来还是很棒的

在我们最近关于Kubernetes的序列，Kubernetes的服务网格，第一部分：顶级服务质量一文中，细心的读者注意到，linkerd是使用DaemonSet而不是sidecar进程安装的。在这篇文章中，我们将解释我们为什么（以及如何）这样做。

06

如何在Kubernetes开发微服务

问卷链接（https://www.wjx.cn/jq/97146486.aspx）

01

【分享】每个 Web 开发者在 2021 年必须拥有 15 个 VSCode 扩展

Visual Studio Code 在开发人员中迅速流行起来，它是最流行的开发环境，可定制性是其流行的原因之一。

01

基于SecureCRT向远程Linux主机上传下载文件步骤图解

有时候直接在Linux服务器上通过 wget 或 curl 工具下截比较大的网络文件时会比较慢，这时我们通常会改用在Windows平台通过迅雷等更加现代化的下载功具下好目标文件（迅雷开会员才能更高速的恶心操作是题外话哈，话说我也送了不少钱给迅雷~~~），这时就面临要把Windows平台下的文件传送到远程Linux服务器上的问题了。

06

开源作者心路历程从0到100

前言 GitHub地址：https://github.com/Dark2017 最开始开源的是vue-dark-photo，他是基于vue2.0封装的一个图片预览组件。在开源之前，曾经给朋友和同事体验了一下内测版本，结果当然是各种建议（吐槽）😱。比如补充动态图大致让用户知道有什么样的功能、某些功能可以去除或优化等等。最开始vue-dark-photo第一版其实是基于element ui的去做开发的（其实完全没必要，就是图某些东西方便🐶），但在npm安装该插件时候还需要下载element就很蠢而且

02

SSH的三种端口转发

最近工作中经常需要ssh登录到某台跳板机，再连接受限网络环境中的某台服务器。以前经常用SSH端口转发这一功能，但周围的同事好像对这个并不清楚，这里记录一下以备其它同事询问。

02

如何使用ReconFTW来实现完整的渗透测试信息侦察

ReconFTW是一个简单且功能强大的脚本，ReconFTW能够通过各种技术实现子域名枚举的自动化，并进一步扫描其中可能存在的安全漏洞。扫描完成之后，ReconFTW将给广大研究人员报告潜在的安全漏洞。

01

iMac（OS X）日常开发中各种代理设置方法汇总（shell、Android Studio、gem、npm）

写在前面由于各种各样的墙的原因，导致日常开发中我们会遇到各种各样的因为网络的问题导致的不能访问、超时等问题。每次遇到都会去查一遍，很是费时，今天专门总结汇总一下。由于考虑到需要不停的切断是否使用，因此这里不再介绍设备全局代理的设置方式。对于mac环境，我们大部分时间都是使用命令行，因此代理配置相关的主要就是关于shell的代理配置。很奇怪shell命令行下配置的代理仅仅对shell相关的部分命令（例如wget等）生效，不是对整个机器生效（例如npm等还是要使用专门的代理）。当然也有可能由于公司网络异常复

08

何时以及如何在你的本地开发环境中使用 HTTPS

翻译：布兰作者：Maud Nalpas https://web.dev/when-to-use-local-https/ https://web.dev/how-to-use-local-https/

03

使用 LeanCloud 云引擎部署 React Web 应用

最近在探索 KubeSphere 和 K8s，东西毫无疑问是好东西，学了在未来也很有用，但是用在个人开发上实在是费用有点高，当然也不太敢用在个人开源项目上，因此我再次开始探索适用于个人全栈应用托管平台。

02

2019-Web开发技术指南和趋势

HTML/CSS框架目前没有以前那么有意义, 但是我还是介意你选择一个学习(这里作者想隐射的应该是, 在jquery时代, HTML/CSS框架的学习是必须的).

02

2019-Web开发技术指南和趋势

HTML/CSS框架目前没有以前那么有意义, 但是我还是介意你选择一个学习(这里作者想隐射的应该是, 在jquery时代, HTML/CSS框架的学习是必须的).

02

如何开发UI5应用并运行在云平台上

选择Services Catalog，根据关键字搜索到WebIDE服务，点击超链接打开WebIDE：

00

博客搭建(Hexo+replica主题) 之部署篇

如果您打开浏览器并访问http://localhost:4000,您应该看到文档网站已启动并正在运行。

03

从文档开发框架到package.json，带你走一轮React组件库构建与发布

近期我正在尝试完成所谓的「拐角轮播」，目前稍有收获（虽然拐角部分完成的并不是很好）

02

《微服务设计》第 6 章　部署

第 6 章　部署在众多相互依赖的微服务中，部署却是完全不同的情况。如果部署的方法不合适，那么其带来的复杂程度会让你很痛苦 ---- 6.1　持续集成简介 CI（Continuous Integration，持续集成）已经出现很多年了，但还是值得花点时间来好好复习一下它的基本用法，因为在微服务之间的映射、构建及代码库版本管理等方面，存在很多不同的选择 CI 能够保证新提交的代码与已有代码进行集成，从而让所有人保持同步。CI 服务器会检测到代码已提交并签出，然后花些时间来验证代码是否通过编译以及测试能否通过

02

「nodejs + docker + github pages 」定制自己的「今日头条」

在闲暇之余，我们经常会逛各种社区，逛掘金看技术软文，逛虎扑看今日赛事，逛头条看热门时事，逛 91……

04

.Net大户的选择：Windows Container在携程的应用

数人云上海&深圳两地“容器之Mesos/K8S/Swarm三国演义”的嘉宾精彩实录第四弹！小数已经被接连不断的干货搞晕了，沉浸技术的海洋好幸福~Windows container在国内的实践还比较少，携程作为.Net大户，率先进行了调研和实践应用，将其中的成果与大家分享。

06

向钢铁侠学习怎样开发软件[每日前端夜话0xB7]

现在要写出优秀的代码并不是一个真正的问题。一切都只是先进行 Google 搜索，然后只需找到 Stackoverflow 的第一个链接，找到最受欢迎或赞同最多的答案并复制粘贴就足够了！

03

5个提升开发效率的必备自定义 React Hook，你值得拥有

自定义Hook不仅能让你的代码更加简洁和高效，还能让你更容易地管理复杂的逻辑。在实际项目中，我们经常会遇到一些重复的代码和逻辑，而自定义Hook正是解决这些问题的最佳方案。

01

一怒之下，我写了一个开源流量测试工具

继一怒之下我写出了 Vivian（详见“测试驱动开发 Nginx 配置”）之后。又在等待客户审批流程的时间里自己写了一个流量测试工具。

05

超赞！墙裂推荐这款开源、轻量无 Agent 自动化运维平台

在日常运维管理的发展过程中，可视化、自动化是一个阶段的进程必备要素，所以，对于可视化运维平台的掌握与了解也非常重要，我们运维小伙伴们也在不断的探索与挖掘当中，今天，民工哥给大家安利一款可视化的自动化运维管理平台：Spug，开源、免费，功能强大。

02

本地运行 Kubernetes 的 4 种方法

Kubernetes 是一个开源的容器编排平台。它由 Google 开发，为自动化部署、扩展和管理容器化应用提供了一个开源系统。虽然大多数人在云环境中运行 Kubernetes，但在本地运行 Kubernetes 集群不仅是可能的，它还至少有两个好处：

03

国内无法拉取Docker镜像了？这些方法拯救你的Docker

这极大地影响了工作效率和开发进度。面对这一困境，本文将为你介绍几种有效的解决方案，帮助你顺利拉取Docker镜像，继续你的开发工作。

容器安全扫描工具推荐

在现代软件开发中，我们会使用一些公共镜像作为基础镜像来快速构建我们的应用镜像，并将其部署到生产环境中。

03

Docker 入门到实战教程(一)介绍Docker

在计算机中，虚拟化（英语：Virtualization）是一种资源管理技术，是将计算机的各种实体资源，如服务器、网络、内存及存储等，予以抽象、转换后呈现出来，打破实体结构间的不可切割的障碍，使用户可以比原本的组态更好的方式来应用这些资源。这些资源的新虚拟部份是不受现有资源的架设方式，地域或物理组态所限制。一般所指的虚拟化资源包括计算能力和资料存储。

03

玩转SSH端口转发

SSH有三种端口转发模式，本地端口转发(Local Port Forwarding)，远程端口转发(Remote Port Forwarding)以及动态端口转发(Dynamic Port Forwarding)。对于本地/远程端口转发，两者的方向恰好相反。动态端口转发则可以用于科学上网。

08

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭