Cloudflare Pages 教程。通过Github部署一个React应用

2022-04-13 00:00:00 代码部署组件推送将在

简介

React是一个用于构建用户界面的超流行的前端库。由于其输出是HTML、CSS和JavaScript，它可以被托管在多种服务上，如Github页面或Netlify，仅举几例。

近，Cloudflare Pages已经普遍可用，这使它成为另一个可以托管你的React应用的伟大服务。Cloudflare Pages是安全、快速和高度可扩展的。

在这个分步骤的教程中，我们将在Cloudflare Pages上托管一个演示的React应用设置。让我们开始吧。

为什么是Cloudflare Pages？

当然，React（或任何其他静态输出）可以免费托管在至少半打的服务上。为什么我们要选择Cloudflare Pages？

除了预览部署和Github集成等常规功能外，Cloudflare Pages还有自定义域名、重定向和无限带宽，这些都是免费的。所有这些功能每月都是零费用，而且我们可以获得快速的网络、免费SSL的安全性和惊人的可扩展性。

前提条件

在我们进入下面的代码之前，这里有一些先决条件。

1. 有JavaScript和React的知识
2. 对npm和npx有过了解
3. Node.js和npm/yarn在你选择的环境中工作
4. 有Git知识，并有一个可用的Github账户
5. 一个Cloudflare账户，你可以免费注册。

是时候开始行动了。

用Create React App建立一个React应用

作为本指南的步，我们将用Create React App（CRA）设置React。如果你没有安装CRA，你可以用npm install -g create-react-app 。为了用CRA启动一个React应用的模板，我们将执行以下命令。

bash
npx create-react-app react-cloudflare-pages

复制代码

这将为我们设置整个React模板。当它运行时，我们会看到如下的输出。

这将需要几分钟的时间来下载和设置React模板，完成后的输出如下。

按照上面的图片指示，为了检查我们的React应用是否正常，我们可以运行。

bash
cd react-cloudflare-pages
yarn start

复制代码

它将运行开发服务器，你可以运行[https://localhost:3000](https://localhost:3000)在你的默认浏览器中，显示一个像这样的输出。

祝贺你!我们的React模板与CRA正在工作。

接下来，我们将把这段基本代码推送到Github上，以后再把它改成从模拟API中获取用户列表，并显示其中的一些字段。

推送模板代码到Github

为了推送我们的基本React模板，我们将创建一个新的Github仓库，如下所示。

保持公开和空的状态就可以了。滚动到页面的底部，点击创建仓库按钮。我们会看到一个与下面类似的页面。

接下来，复制SSH URL到Github仓库，在我的例子中是git@github.com:geshan/react-cloudflare-pages.git ，并将其添加为远程，在我们的项目根部运行以下命令来推送代码。

bash
git remote add origin git@github.com:geshan/react-cloudflare-pages.git
git push origin master

复制代码

它看起来会像下面这样。

因此，我们将更新代码以调用模拟API，并列出一些用户的详细信息。如果你愿意，你可以创建一个新的Git分支来做以下改动，但我将把这留给你。

更新模板以调用模拟API

我们的React模板已经启动并运行了，而且也被推送到了GitHub。现在，我们将改变代码，以调用一个包含10个用户的模拟列表，并在我们的React应用程序中显示一些字段。

要做到这一点，我们将改变src/App.js ，使其看起来像下面这样。

js
import {Component} from 'react';
import Users from './components/users';

class App extends Component {
  state = {
    users: []
  };

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then((data) => {
        this.setState({ users: data })
      })
      .catch(console.log)
  }

  render() {
    return (
      <Users users={this.state.users} />
    )
  }
}

export default App;

复制代码

注意，我们已经删除了不必要的CSS文件和标志。

是时候深入了解一下代码的作用了。首先，我们要从React中导入Component ，然后导入另一个名为users 的组件，我们接下来会写这个组件。

然后在扩展React组件的App 类中，我们要用users 数组引入一个状态。当组件挂载时，我们从我们的模拟API中获取一个10个用户的列表 -- [http://jsonplaceholder.typicode.com/users](http://jsonplaceholder.typicode.com/users)- 并将其设置在state 的users 。如果出现错误，我们将其记录下来。

在主App 组件的后一步，我们渲染Users 组件，我们将在接下来写出。

由于我们使用上面的users 组件，我们将创建一个新的文件src/components/users.js ，该文件将包含以下内容。

js
const Users = ({ users }) => {
  return (
    <div className="users">
      <center><h1>Application Users</h1></center>
      {Array.isArray(users) && users.map((user) => (
        <div className="user" key={user.id}>
          <div className="user-details">
            <h2 className="user-name">{user.name}</h2>
            <h3 className="user-email">{user.email}</h3>
            <h4 className="user-company">Company: {user.company.name}</h4>
            <hr/>
          </div>
        </div>
      ))}
    </div>
  )
};

export default Users

复制代码

让我们来看看这个文件是如何工作的。这是一个非常简单的组件，它依赖于用户作为一个数组被传入。我们检查它是否是一个数组并循环浏览用户。然后我们打印出用户的姓名、电子邮件和用户的公司名称。

如果我们愿意，我们可以用下面的命令删除这个变化后的不必要的文件。

bash
rm -rf src/App.css src/logo.svg src/App.test.js

复制代码

之后，我们可以运行yarn start ，看到以下输出。

好哇!模拟API被正确调用，我们看到用户的名字、电子邮件和公司名称被正确呈现。在这之后，我们将把我们的代码修改推送到GitHub，并与Cloudflare Pages进行连接。如果你想看看哪些文件有变化，你可以看看这个拉动请求。

推送应用程序到Github

为了推送我们的修改到主分支，我们将在项目根目录下运行以下命令。

bash
git add .
git add -u #because we have deleted files
git commit -m "Call the mock users API"
git push origin master # if you are in a different branch push that and open a PR

复制代码

推送之后，你应该看到Github仓库中也反映了这些变化。现在是时候为我们的 React 应用程序获取一个 Cloudflare 页面 URL 了。

登录到 Cloudflare Pages

要将您的 React 应用程序与 Cloudflare 页面连接起来，如果您还没有创建 Cloudflare 帐户，请创建一个帐户。然后，登录Cloudflare，点击右侧的页面。

我们会看到一个与下面类似的页面。

单击 "连接Github账户"。我们将被重定向到Github，在那里我们可以配置我们希望CloudFlare访问的账户和存储库。

点击你推送上述React应用的账户（可能是你的个人账户），并选择正确的存储库来连接。

好是只给所需的版本库访问权。给予访问权限后，我们将被重定向到 Cloudflare Pages，在那里可以部署 React 应用程序，选择版本库，并单击**"开始设置**"，如下所示。

接下来，我们将把主分支配置为主干。

在该页面的下方滚动，配置构建设置，如下所示。

yarn build 我不得不在构建命令字段中用npm build ，因为CRA用yarn代替了npm。

然后点击保存和部署。如果一切顺利，项目将被创建并开始部署，如下图所示。

几分钟后，构建工作应该完成了，如果我们点击项目react-cloudflare-pages的标题，就会看到一个如下的页面。

如果我们点击部署下面的链接**，**这是一个pages.dev URL，我们应该可以看到我们的React应用部署在Cloudflare Pages上，如下所示。

如上所示，这是一个HTTPS Cloudflare Pages URL，地址是pages.dev 。

预览部署的操作

为了让我们看到预览部署的效果，我将在src/components/users.js 的第10行将Company 标签改为Company Name 。

我们将在一个名为preview-deployment 的分支中推送它，当我们打开拉动请求时，它将在 Github 上给我们一个预览。在Cloudflare Pages上成功构建后，它将给我们一个独特的链接，以评论的形式显示这些更改，在这里可以看到。

这是一个非常整洁的功能，可以看到在一个完全运作的URL上的变化。

接下来的步骤

我们可以在Cloudflare Pages上轻松地为我们的React应用配置一个自定义域名，这也是免费的。此外，也可以配置预览部署的重定向和访问控制。我将让你自己去探索它们。

总结

正如我们在这个分步教程中所看到的，Cloudflare Pages很容易为你的React应用或任何其他前端框架进行设置。不需要在像Github行动或其他CI系统上配置构建过程。

将您的Github repo与Cloudflare Pages相连，并使用一次构建命令，因为每个拉动请求都会自动获得一个预览部署URL。免费利用Cloudflare Pages的力量，让你的网站飞起来。

The postCloudflare Pages tutorial:通过Github部署React应用程序出现在LogRocket博客上。

相关文章