如何使用 Cloudflare 頁(yè)面自動(dòng)部署 React 應(yīng)用程序

如何入門

要開(kāi)始，需要以下工具：

1. 軟件包管理器npm和版本控制軟件Git

2. 自己的（免費(fèi)）GitHub帳戶和Cloudflare帳戶

創(chuàng)建我們的React項(xiàng)目

要部署 React 應(yīng)用程序，我們首先需要?jiǎng)?chuàng)建一個(gè)。

讓我們借助 Create React App，在電腦上構(gòu)建一個(gè) React 應(yīng)用程序。我們可以通過(guò)給它起名為“cloudflare-react”來(lái)做到這一點(diǎn)：

npx create-react-app cloudflare-react

創(chuàng)建我們的 Github 存儲(chǔ)庫(kù)

一旦我們的項(xiàng)目成功創(chuàng)建，讓我們繼續(xù)為它創(chuàng)建一個(gè)GitHub存儲(chǔ)庫(kù)。

我們使用GitHub來(lái)保存我們單個(gè)項(xiàng)目的在線、易于管理的記錄。GitHub還允許其他用戶通過(guò)拉取請(qǐng)求來(lái)改進(jìn)我們的代碼。

Cloudflare使用GitHub跟蹤我們所有的代碼，無(wú)論何時(shí)進(jìn)行更改。

為了跟蹤我們新的React應(yīng)用程序，我們通過(guò)訪問(wèn)github.com/new創(chuàng)建一個(gè)新的GitHub存儲(chǔ)庫(kù)。

接下來(lái)，我們只需添加所有文件，并提交它們，并發(fā)送一條消息，說(shuō)明我們正在做什么：

git add .git commit -m "Deploy to Cloudflare Pages"

接下來(lái)，我們需要添加適當(dāng)?shù)腉it遙控器，用于將我們提交的代碼推到上游，以更新我們的新的GitHub repo。

GitHub將告訴新創(chuàng)建的回購(gòu)協(xié)議需要包含的命令。應(yīng)該看起來(lái)是這樣的：

git remote add origin someurl

And finally, we can simply run git push -u origin master.

在我們刷新GitHub repo頁(yè)面后，我們應(yīng)該看到我們所有的React項(xiàng)目代碼，這些代碼被推送到GitHub。

這是將應(yīng)用程序部署到 Cloudflare 頁(yè)面的第一個(gè)主要要求——讓 React 應(yīng)用程序生活在 GitHub 上。

創(chuàng)建 Cloudflare 帳戶

接下來(lái)，我們前往 Cloudflare 部署我們的 React 項(xiàng)目。

和大多數(shù)其他開(kāi)發(fā)人員有興趣使用 Cloudflare 頁(yè)面的主要原因之一是 Cloudflare 有一個(gè)全球 CDN。這允許更快地交付我們部署的應(yīng)用程序。

Cloudflare還擁有DNS管理等資源，如果希望應(yīng)用程序有自己的自定義域，這尤其有幫助。

將GitHub鏈接到Cloudflare頁(yè)面

第一次訪問(wèn)Cloudflare頁(yè)面時(shí)，系統(tǒng)會(huì)提示從GitHub存儲(chǔ)庫(kù)創(chuàng)建項(xiàng)目，因此將選擇Connect GitHub帳戶按鈕：

然后，被要求安裝和授權(quán)Cloudflare頁(yè)面。

此步驟允許我們選擇Cloudflare獲得什么訪問(wèn)權(quán)限——是想讓它訪問(wèn)我們所有的存儲(chǔ)庫(kù)，還是只想選擇存儲(chǔ)庫(kù)：

如果希望將來(lái)部署多個(gè)項(xiàng)目，建議選擇所有存儲(chǔ)庫(kù)。

因此，Cloudflare將能夠訪問(wèn)我們所做的任何代碼和部署，以便將其部署到Web上。

將我們的反應(yīng)項(xiàng)目部署到Cloudflare頁(yè)面

一旦我們授予Cloudflare授權(quán)后，我們將看到一個(gè)屏幕，在那里我們可以從GitHub存儲(chǔ)庫(kù)中選擇要部署的項(xiàng)目：

就我們而言，我們將選擇我們的“云反應(yīng)”回購(gòu)協(xié)議，之后我們將點(diǎn)擊“開(kāi)始設(shè)置”。

從那里，我們可以選擇我們希望我們的React應(yīng)用程序使用Cloudflare的項(xiàng)目名稱。這個(gè)項(xiàng)目名稱很重要，因?yàn)樗鼪Q定了它將部署到的子域。

由于我們選擇了“cloudflare-react”，它將部署到cloudflare-react.pages.dev：

我們可以選擇部署哪個(gè)分支，以及構(gòu)建設(shè)置。

請(qǐng)注意，我們真正需要做的就是選擇我們使用的框架預(yù)設(shè)。Cloudflare為我們的框架提供了一個(gè)預(yù)設(shè)選項(xiàng)——?jiǎng)?chuàng)建反應(yīng)應(yīng)用程序。

當(dāng)我們選擇它時(shí)，它將包括任何Create React App項(xiàng)目的默認(rèn)設(shè)置：通過(guò)運(yùn)行構(gòu)建命令“npm運(yùn)行構(gòu)建”來(lái)部署項(xiàng)目，輸出目錄（運(yùn)行此構(gòu)建命令時(shí)將構(gòu)建我們的React代碼的文件夾）稱為“構(gòu)建”。

對(duì)于使用Next.js或Gatsby等框架制作的任何React應(yīng)用程序，還有其他有用的預(yù)置。可以使用 Cloudflare 頁(yè)面部署幾乎所有你能想到的 React 應(yīng)用程序類型。

最后，我們點(diǎn)擊部署按鈕。部署過(guò)程第一次大約需要四到五分鐘。要有耐心，但要知道，任何后續(xù)部署所需的時(shí)間都會(huì)少得多。

我們確實(shí)看到一些關(guān)于我們正在構(gòu)建的項(xiàng)目和部署進(jìn)度的有用日志。如果該過(guò)程中出現(xiàn)錯(cuò)誤，我們會(huì)在日志中看到它，并獲得一些關(guān)于我們需要修復(fù)的內(nèi)容的指示。

然后，要查看我們部署的項(xiàng)目，我們可以點(diǎn)擊“繼續(xù)項(xiàng)目”按鈕，點(diǎn)擊“訪問(wèn)網(wǎng)站”，然后我們可以看到我們的應(yīng)用程序在URL上運(yùn)行： your-project-name.pages.dev。

使用自動(dòng)部署進(jìn)行更改

雖然在將 React 應(yīng)用程序推送到 GitHub 后，立即將其部署到 Web 非常容易，但下一步是更改我們的應(yīng)用程序并重新部署它。

正如將看到的，這個(gè)自動(dòng)部署（持續(xù)集成）功能已經(jīng)設(shè)置。

就我的應(yīng)用程序而言，我決定安裝React路由器DOM來(lái)添加一個(gè)關(guān)于頁(yè)面。在首頁(yè)上，我還添加了一個(gè)關(guān)于頁(yè)面的鏈接：

這樣做后，如果我們翻轉(zhuǎn)回我們的Cloudflare頁(yè)面儀表板，我們可以看到Cloudflare立即接收了這個(gè)新部署，因?yàn)樗溄拥轿覀兊腉itHub帳戶，并且可以查看向我們的repo提出的任何部署或拉取請(qǐng)求。

因此，它立即根據(jù)我們所做的更改重新部署我們的應(yīng)用程序。當(dāng)我們的部署進(jìn)行時(shí)，我們可以點(diǎn)擊“查看構(gòu)建”，并查看有關(guān)此部署的具體信息以及任何日志。

正如將看到的，在初始部署后所做的任何更改都需要更少的時(shí)間（部署成功完成總共只需要大約一分鐘）。還將看到，在我們的URL開(kāi)頭，它被賦予了自己獨(dú)特的部署散列。這允許我們唯一地引用每個(gè)部署。

如果我們刪除散列，我們會(huì)看到我們所做的更改也部署到我們選擇的項(xiàng)目名稱：cloudflare-react.pages.dev。

好了，本文到此結(jié)束。如果對(duì)編程、計(jì)算機(jī)、程序員方面感興趣的話，歡迎私信聯(lián)系我，隨時(shí)交流！點(diǎn)個(gè)關(guān)注，是對(duì)我莫大的鼓勵(lì)！