Contents
  1. 前言
  2. 步骤
  3. 排查一
  4. 排查二
  5. 排查三
  6. 排查四
  7. 补充一
  8. 补充二

前言

使用GitHub Pages部署静态网站的简单性是一个可以轻松转移到 React 应用程序的过程。只需几个步骤，就可以轻松地在 GitHub Pages 上免费托管 React 应用程序，或者构建它以部署在您自己的自定义域或子域上。

步骤

在GitHub中创建新的仓库（例如名为newDemo），并clone到本地。

将.../newDemo/目录作为根目录，创建您的React项目。

之后将您的项目代码push到GitHub仓库中。

接下来，我们将在我们的项目中安装gh-pages包。该包允许我们将构建文件发布到GitHub 上的一个分支，然后可以在其中托管它们。

通过 npm 作为开发依赖项安装：

sudo npm install gh-pages --save-dev

现在，让我们配置文件，以便我们可以将 GitHub 存储库指向将部署 React 应用程序的位置。

在package.json文件中，添加一个遵循此结构的属性：homepage: http://{github-username}.github.io/{repo-name}

比如：

"homepage": "https://qiuyedx.github.io/os_demo_deploy",

我们还需要在文件中添加predeploy和deploy脚本。这些脚本分别用于捆绑 React 应用程序和部署捆绑的文件。

然后在"scripts"中添加以下两个条目：

"predeploy" : "npm run build", // build要改为你实际用的编译/打包指令，比如我用webpack打包的话，我这里填的是webpack:build
"deploy" : "gh-pages -d build", // build要改为实际编译/打包后生成的静态资源文件夹，如果用的webpack，则应该改为dist

现在，我们已经完成了文件的配置，只需再次将本地代码push到GitHub仓库中。

到此，我们可以通过简单地运行npm run deploy来部署我们的 React 应用程序。并将其推送到我们在 GitHub 上的远程存储库中的一个分支gh-pages。

要查看我们部署的 React 应用程序，请导航到Settings选项卡并单击Pages菜单。您应该会看到已部署的 React 应用程序的链接。

排查一

若遇到npm run deploy卡在gh-pages -d build命令之后报错连接失败，则需要考虑您的代理是否配置正确。

情况一

您在系统中开启了代理，但未在终端中开启代理。

以下是我用V2rayU进行终端代理的命令：

export http_proxy=http://127.0.0.1:1087
export https_proxy=http://127.0.0.1:1087
export ALL_PROXY=socks5://127.0.0.1:1080

（请注意1087是我这里配置的端口，请注意更换为你自己的）

情况二

您已在终端中开启代理，但端口没有和git的端口相匹配。即这是由于本机系统代理端口和git端口不一致导致的。

解决方法：（记得将1087换为你代理的端口）

git config --global http.proxy http://127.0.0.1:1087
git config --global https.proxy http://127.0.0.1:1087

之后再重新进行npm run deploy即可。

排查二

本地测试

本地测试需要把package.json中的homepage条目删掉或者改为"homepage": "./"

部署到GitHub.io

运行npm run deploy前，需要将package.json中的homepage条目改为

"homepage": "https://qiuyedx.github.io/os_demo_deploy",

排查三

问题描述

你可以用https://XXX.github.io/A访问到你的项目，但打开的不是/路径对应的主页，而且点击其他路由跳转按钮后URL会变为https://XXX.github.io/PageB而不是https://XXX.github.io/A/PageB。

解决方法

如果你用的是react-router-dom路由，则需要添加一个基础路径。

具体来说，你需要在使用BrowserRouter或HashRouter来包装你的应用程序时，将basename属性设置为/A。例如：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router basename="/A">
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

export default App;

排查四

问题描述

React Router在部署时无法直接访问子页面。

拿这位老哥的例子看一下：

当我在localhost中工作时，使用create-react-app

我可以访问localhost:3000/A或localhost:3000/B

但是当我将它部署到服务器上时，npm build会运行并将构建的文件放到服务器文件夹中，就像放到https://ip/project中一样。

我可以在<Link/>中单击以转到https://ip/project或https://ip/project，但不能直接访问https://ip/project。

App.js

<BrowserRouter basename={'project_name'}>
    <Route path='/A' component={A}/>
    <Route path='/B' component={B}/>
</BrowserRouter>
<Link to="/A">A</Link>
<Link to="/B">B</Link>

package.json

"homepage": ".",
...
"dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0"
}

解决方法

（顺带会解决“排查三”中的问题）

只需使用不带基名的HashRouter，而不是BrowserRouter：

import { HashRouter, Route } from 'react-router-dom';

// Then in render
<HashRouter>
  <Route path='/' component={ Home } exact />
  <Route path='/contact' component={ Contact} exact />
</HashRouter>

请注意，URL中将包含/#/：

http://server.com/path/#/contact

补充一

目的

如果访问了不存在的子目录，让其能够自动跳转回你的项目主页，而不是GitHub Pages的404页面。

方法

在gh-pages分支的根目录（你整个项目的静态资源目录）添加404.html文件，并填入一下内容：

<!DOCTYPE html>
<html>
  <head>
    <title>404 Not Found</title>
    <meta http-equiv="refresh" content="0; URL=https://qiuyedx.github.io/NavPage">
  </head>
  <body>
    <h1>404 Not Found</h1>
    <p>The requested URL was not found on this server.</p>
    <hr>
    <address>Apache/2.4.29 (Ubuntu) Server at qiuyedx.github.io Port 443</address>
  </body>
</html>

补充二

用CDN加速部署在Github Pages上的React项目

package.json中的"homepage": "https://qiuyedx.github.io/NavPage",字段保持不变；

webpack.config.js中的publicPath字段需要改变：

// 部署到GitHub Pages时用
// publicPath: '/NavPage/'

// 部署到GitHub Pages时用(CDN)
publicPath: '/'

然后在deploy之后需要到项目仓库的设置-Pages中设置自定义域名(Custom domain)为你的加速域名（也是最终暴露给用户的域名）。然后用这个域名的DNS解析到CDN提供的CNAME记录（最好是全站加速），CDN的源站设置为qiuyedx.github.io（改为你自己的）即可。

阿里云全站加速的CDN中有“动静态加速规则”，我是开启了的。然后把静态资源的文件类型添加了一下，即可实现静态资源的加速以及动态资源的最优路由回源。

CDN配置HTTPS

如果域名、DNS解析服务和CDN都是阿里云提供了的话配置很方便。直接在CDN的HTTPS配置中选择打开（注意会增加计费），然后申请一个免费的证书，签发后即可在下拉框中选中，一键部署。

然后可以在阿里云CDN的HTTPS配置中打开强制跳转（HTTP => HTTPS），然后Github项目仓库设置-Pages中的HTTPS强制跳转不要打开（我这里也显示不允许我打开）。到此已经完成所有配置了。可以强制走HTTPS访问你的项目啦。

相关资料

A Student on the way to full stack of Web3.