用全栈式的Cloudflare页面部署你的React应用

2022-04-13 00:00:00 代码 部署 项目 应用程序 构建

Cloudflare主要是作为第三层而闻名的，它保证了HTTP请求、CDN防火墙和其他专门与网络证券有关的面向用户的网络基础设施的安全。然而，Cloudflare是一家多方位的公司，一直在大力投资于开发者平台解决方案，如页面、工人、视频流等。

随着全球各地的公司在前端和后端项目中迅速采用无头和无服务器部署，你的Jamstack应用程序有大量的选择。选择合适的工具可能会让人不知所措，但需要考虑的几个参数可能包括成本、可及性和开发者生态系统。

如果你是一个前端或全栈开发人员，希望通过有限的工作流程设置和配置来部署你的Jamstack应用程序，Cloudflare是一个不错的选择，它可以让你的应用程序在几分钟内启动和运行。Cloudflare Pages是该公司受欢迎的开发者平台之一，允许开发者直接从GitHub部署前端应用程序。在撰写本文时，Cloudflare Pages几乎支持所有的前端框架。

2021年11月，全栈Cloudflare Pages推出，提供工具，用Cloudflare构建和部署全栈应用程序。开发人员现在可以通过一个git commit ，用Cloudflare Pages部署全栈应用，使用Cloudflare工作者来部署无服务器功能。

在本教程中，你将学习如何使用全栈 Cloudflare Pages 创建和部署 React 应用程序。要跟上本教程，你需要。

  • 熟悉CSS、HTML和JavaScript ES6
  • 在你的机器上安装一个网络浏览器
  • 熟悉Git
  • 在你的开发机器上安装一个代码编辑器
  • 对React有一个基本的了解

让我们开始吧!

使用全栈式 Cloudflare Pages

Cloudflare Pages使开发人员能够直接从其GitHub或GitLab存储库中部署前端应用程序。Cloudflare Pages之前被设计为支持静态网站的部署。

然而，随着Cloudflare Workers的推出，Cloudflare宣布正式支持全栈式Cloudflare Pages，这意味着开发者现在可以通过一个git commit ，同时构建和部署静态和服务器端渲染的应用程序。

全栈式 Cloudflare Pages 的工作方式与 Cloudflare Pages 完全相同，涉及git commit 和git push 的部署工作流程没有变化。不同的是，Cloudflare Pages现在支持使用Cloudflare Workers进行开箱即用的服务器端渲染。

全栈式 Cloudflare Pages 利用你的资源库文件系统，公开你添加到./functions 文件夹中的函数处理程序，并使用 Cloudflare Workers 将它们变成无服务器函数。要开始编写Cloudflare无服务器函数，首先需要在项目的根目录下添加一个./functions 文件夹。该文件夹中的任何文件都将被视为无服务器函数。

例如，考虑下面的代码。

// GET requests to /filename would return "Hello, world!"
export const onRequestGet = () => {
  return new Response("Hello, world!")
}

// POST requests to /filename with a JSON-encoded body would return "Hello, <name>!"
export const onRequestPost = async ({ request }) => {
  const { name } = await request.json()
  return new Response(`Hello, ${name}!`)
}

复制代码

将上面的代码片段添加到greetings.js 文件中，将发送一个GET 请求到project-url/greetings.js 。

设置和安装

在本教程中，我们将使用Create React App生成一个React应用程序，将该应用程序部署到GitHub，后将其部署到Cloudflare Pages。运行下面的代码，使用npx 初始化一个新项目。

npx create-react-app cloudflare-project

复制代码

初始化完成后，我们将通过导航进入Cloudflare-project 文件夹并运行下面的代码来测试我们的应用程序。

npm start

复制代码

你的应用程序看起来应该与下面的截图相似。

接下来，我们将创建一个新的GitHub资源库来存放Cloudflare-project 文件和源代码。访问新的仓库，你会看到一个类似下面的屏幕。

要准备并推送你的本地源文件到GitHub，请运行以下命令。

git remote add origin https://github.com/yourusername/cloudflare-project.git
git branch -M main
git push -u origin main

复制代码

使用 Cloudflare Pages 进行部署

现在我们已经将项目推送到 GitHub，让我们从 GitHub 将我们的应用程序部署到 Cloudflare Pages。

要开始，请登录您的Cloudflare 仪表板，导航到账户主页，然后点击**页面。**如果你还没有把你的GitHub账户连接到Cloudflare，你应该有一个类似于下面截图的屏幕。

要继续，请点击连接GitHub，将GitHub与你的Cloudflare账户连接起来。点击Install & Authorize继续，然后输入你的GitHub密码来授权该操作。请看下面的屏幕截图作为参考。

一旦你的GitHub成功链接到Cloudflare，你的Cloudflare仪表板上就会出现一个GitHub的所有仓库的列表，就像下面的截图一样。

请注意，列表中的个 repo 是我们在上一节中创建的那个。选择该 cloudflare-projectrepo，然后向下滚动并单击 "开始设置"。向下滚动到构建设置，并添加以下配置。

  • 框架预设：create-react-app ，这将自动设置构建命令和构建输出
  • 构建命令。npm run build
  • 构建输出。/build

见下面的屏幕截图。

要完成构建过程，请点击保存和部署。构建过程完成后，你应该有一个类似于下面截图的成功信息。

要预览你的项目，你可以点击的链接。你的会与 [https://cloudflare-project-2ai.pages.dev/](https://cloudflare-project-2ai.pages.dev/)，但是，你会得到同样的结果。现在，我们已经成功地用Cloudflare Pages部署了我们的React应用程序

创建一个无服务器函数

正如上一节所述，我们首先需要在我们的cloudflare-project 项目的根目录下创建一个./functions 文件夹。接下来，创建一个名为api 的新文件夹，导航进入该文件夹，添加一个名为greetings.js 的文件，并添加以下代码。

// GET requests to /filename would return "Hello, world!"
export const onRequestGet = () => {
  return new Response("Hello, world!")
}

// POST requests to /filename with a JSON-encoded body would return "Hello, <name>!"
export const onRequestPost = async ({ request }) => {
  const { name } = await request.json()
  return new Response(`Hello, ${name}!`)
}

复制代码

接下来，提交并推送你的改动到GitHub，如下所示。

git add .
git commit -m "Added serverless functions"
git push

复制代码

导航到 [https://cloudflare-project-2ai.pages.dev/api/greatings](https://cloudflare-project-2ai.pages.dev/api/greatings)来测试运行该项目。你应该收到类似于下面截图的响应。

添加一个自定义域

与其他部署平台一样，Cloudflare也支持向您的网站添加自定义域名。在你继续之前，你需要从你的认可注册商那里购买一个域名，如Google Domains、Namecheap或Cloudflare Registrar。

接下来，登录您的Cloudflare仪表板，点击页面，然后选择您在上一节部署的cloudflare-project 。选择自定义域名，点击设置自定义域名。 键入你的域名，然后点击继续。

接下来，从域名注册商那里获得你的DNS记录，并更新Cloudflare上的记录，如下图所示。

Cloudflare SSL

Cloudflare还向其所有用户提供免费的安全套接字层（SSL）服务。SSL功能是可选的，然而，重要的是，你要始终保护你的网络应用程序的内容和访问者免受恶意攻击。访问"开始"，选择你所选择的证书类型，然后按照说明操作。

删除Cloudflare Pages项目

如果您想删除托管在 Cloudflarepages.dev 子域上的已发布的项目，请按以下方式导航到您的项目的设置部分。

  1. 访问账户主页或使用仪表板顶部的下拉菜单返回主页
  2. 选择页面
  3. 导航到Pages项目>设置>删除项目，以删除你的项目

对于有自定义域名的项目，确保删除与你的项目相关的CNAME 记录。

结论

对于希望通过单个git commit 来部署全栈应用程序的开发人员来说，Cloudflare全栈Pages是一个不错的选择。我认为全栈Cloudflare Pages将是全栈应用部署的一场革命。

在这篇文章中，我们介绍了全栈Cloudflare Pages的工作原理，如何从GitHub将我们的应用程序部署到Cloudflare Pages，创建无服务器函数，后是删除项目。我希望你喜欢这个教程

The postDeploying your React app with full-stack Cloudflare Pagesappeared first onLogRocket Blog.

相关文章