前言

使用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路由,则需要添加一个基础路径。

具体来说,你需要在使用BrowserRouterHashRouter来包装你的应用程序时,将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/projecthttps://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.