8 個免費的 React 應用程式託管服務1 min read

因此，您建立了一個 React 應用程序，但您不確定如何或在哪裡託管它。在本文中，我們將引導您了解 8 個免費的 React 託管服務，並向您展示我們如何部署 這個React應用程式 利用每一個，並告訴你我們在這個過程中學到了什麼。

我們使用 Figma 建立了我們的應用程式 Anima 插件，它允許我們添加功能、響應行為和富媒體，然後 為整個 UI 匯出開發就緒的 React 程式碼。我們花了一天的時間來設計和部署。

在哪裡免費託管您的 React 應用程式

由於 React 等基於元件的框架的興起，無伺服器託管解決方案的數量不斷增加。亞馬遜AWS、微軟Azure和谷歌雲端是目前的主導平台。然而，人們越來越多地轉向專用前端託管服務，這些服務需要更少的精力，並且可以讓您立即啟動並運行，大多數包括 CI/CD。以下是我們測試的 8 個免費 React 應用程式託管服務：

1. 網路化

2. Vercel

3. AWS 放大

4. 火力基地

5. GitHub 頁面

6. 亞搏體育appGitLab頁面

7. 渲染

8. 突波

讓我們更詳細地了解這些免費的 React 應用程式託管服務，並示範我們如何使用每項服務部署 React 應用程式。 

網路化

背景

Netlify 成立於 2014 年，從一開始就專注於託管靜態網站。由於其慷慨的免費套餐，它吸引了許多開發人員。幾年後，Netlify 成長為最受歡迎的 JAMstack 和靜態網站主機之一。

如何使用

1. 理想情況下，您將使用 GitHub 註冊或登入。這確保您可以存取您的設定檔上的儲存庫並快速部署它們。
2. 登入後，點擊“新增網站”並選擇“匯入現有項目”。
3. 然後點擊 GitHub 作為您的提供者。
4. 選擇“銀行網站”或任何您的項目名稱。
5. 微調部署設定（對於我們的網站，預設設定完美運作），然後按一下「部署網站」。
6. 部署後，您可以在公共 URL 上查看它，並與世界分享。耶！

這是 部署在 Netlify 上的即時應用程式。

優點和缺點

Netlify 易於設定和部署，更不用說它是我們在這裡測試的最快的服務之一。一個缺點是，如果您需要協作者和/或團隊，則必須升級到付費方案。

Vercel

背景

Vercel（原名Zeit）成立於2015年，並迅速聲名大噪。他們是 Next.js 的維護者，Next.js 是一個流行的 React 網站建立框架。他們為非商業網站提供免費套餐，以及使用其邊緣網路實現無伺服器功能的方法。

如何使用

1. 登入或註冊 GitHub。
2. 點擊“新增…”下拉清單並選擇“項目”。                                                             
3. 選擇“銀行網站”或您最喜歡的 React 項目。
4. 我們使用部署設定的預設值，然後按一下「部署」。
5. 一段時間後，我們部署了網站。

這是 現場URL。

優點和缺點

Vercel需要一些時間來快取部署過程的安裝部分，但在此之後，它是最快的服務之一。它顯示了您推送的每個分支的預覽部署，並且由於緩存，它可以快速完成。

AWS 放大

背景

AWS 是雲端產品的一個巨大集合，Amplify 被宣傳為獲取其中一些產品的簡單方法。借助 AWS Amplify，您可以在 AWS 上快速建置、交付和託管全端應用程序，並隨著用例的發展靈活地利用 AWS 服務的廣度。

如何使用

1. 註冊或登入 AWS，然後搜尋 AWS Amplify 並按一下「開始」。
2. 選擇 GitHub 並授權它（我只允許它用於“bank-website”存儲庫）。
3. 在「最近更新的儲存庫」部分中選擇儲存庫。
   1. 在建置設定中，我們必須更改 基目錄 讓我們的應用程式成為 距離 像這樣： 然後，建置設定應如下所示：
4. 在下一步中，按一下「儲存並部署」。
5. 一段时间后，网站将被部署并可供使用。

我們正在直播！ 這是 URL。

優點和缺點

您必須編輯 基目錄 在部署规范中——它不是开箱即用的。用户界面感觉有点笨拙，但这是个人喜好。 AWS Amplify 拥有巨大的潜力，因为许多其他 AWS Web 服务都触手可及。

火力基地

背景

Firebase 是一项 Google 服务，以实时存储平台而闻名。但它還提供靜態網站和 Express.js 微服務或 API 的託管選項，並支援您團隊正在處理的分支的預覽 URL。与 Netlify、Vercel 等一样，它通过 CDN 网络提供已部署的内容。

如何使用

1. 安裝 firebase-工具 與 npm 安裝-g firebase-tools.
2. 使用以下命令登入 Firebase 火力基地登錄。登入後，您應該會看到以下訊息：
3. 進入專案目錄並運行 firebase初始化，您應該會看到類似這樣的內容： 选择用于通过可选的 GitHub 操作部署来配置 Firebase 托管文件的选项。然后，您可以直接从 CLI 创建项目或使用 Firebase UI 来创建项目，然后再连接它。我們從命令列創建了項目，這就是我們回答所產生的問題的方式：                                    之后，将创建简单的 `firebase.json` 和 `.firebaserc` 文件。
4. 然後，運行 火力基地部署 實際部署文件 距離目錄。如果目錄遺失，請確保運行 npm 運行構建 首先生成文件。的 火力基地部署 命令應產生類似以下範例的輸出：

現在你可以 查看網站 在提供的URL上。耶！ 

優點和缺點

Firebase 相當簡單，但是當您在專案中設定它時，需要回答的問題有點令人困惑。幸運的是，我們在上面的部分中為您解答了這些問題，但在繼續之前，它們需要了解實際的 Firebase 功能。除此之外，Firebase 部署速度很快，並且可以產生 URL，您可以在其中預覽已部署的檔案。您也可以透過 CLI 的 GitHub 操作部署輕鬆自動化，這很簡潔。

GitHub 頁面

背景

GitHub Pages 已經存在相當長一段時間了，它是直接從 GitHub 發布文件或個人網站的簡單方法。它非常適合靜態內容，很多人用它來以最少的投資部署簡單的網站。如果您的專案是公開的，它可以免費使用，並且是一種快速且便宜的託管網站的方式。

如何使用

請注意，您必須編輯 應用程式.jsx 我們打電話的地方 路由器 並添加 基本名稱 使其匹配存儲庫名稱。所以這就是如何 應用程式.jsx 應該看起來：                                                                                        我們必須改變 基本名稱 因為 GitHub 頁面會將網站部署到「https://GITHUB_USERNAME.gitlab.io/REPO_NAME」形式的 URL。如果沒有設定基本名稱，網站將無法正常運作 反應路由器 DOM.

1. 程式碼修改後，我們需要安裝 gh-頁面 包裝內含：
2. 並且，添加一個 預部署 和一個 部署 腳本到 包.json:
3. 然後，我們只需運行 npm 運行部署。將會觸發 npm 運行構建 它將使用 gh-頁面 發佈內容 距離 到 GitHub 上的一個單獨的分支，稱為 gh-頁面.
4. 最後檢查是否 gh-頁面 用於 GitHub 頁面，如下所示：

這是 現場URL。

優點和缺點

如果您部署的專案與您的使用者名稱不同，它將使用 GitHub 部署在我們免費網域的子目錄中。然後，您需要編寫額外的程式碼來支援子目錄內部的邏輯。

在我們的用例中，它不支援開箱即用的持續部署，但您可以進行設定。設定完成後，可以快速部署變更。

亞搏體育appGitLab頁面

背景

與 GitHub 一樣，GitLab 有自己的託管解決方案，他們稱之為 GitLab Pages。我必須告訴他們，設定持續部署到 GitLab Pages 比 GitHub Pages 更容易。

如何使用

1. 註冊或登入 GitLab
2. 如果您還沒有儲存庫，請將其新增至 GitLab。你可以 分叉我在那裡添加的那個 
   與 GitHub 頁面類似，您必須編輯 應用程式.jsx 我們打電話的地方 路由器 並添加  基本名稱 使其匹配存儲庫名稱。所以這是最後的改變：                                                               我們必須改變 基本名稱 因為 GitLab 頁面會將網站部署到以下形式的 URL： https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME。如果沒有設定基本名稱，網站將無法正常運作 反應路由器 DOM.
3. 編輯專案並將其推送到 GitLab 後，轉到“設定”>“頁面”，您將看到一個四步驟嚮導，用於將儲存庫部署到 GitLab 頁面。 
4. 精靈的第一步是輸入建置映像。我們將使用 Node.js LTS。
5. 接下來，我們將輸入預建置命令。這 國家管理委員會 這裡就足夠了。
6. 現在進行建置步驟。我們需要透過 — –dist-dir 公共 因為 GitLab Pages 希望將網站建置在 公開的 目錄。抱歉，您無法擺脫任何其他目錄。
7. 提交新生成的 .gitlab-ci.yml 告訴 GitLab 如何部署您的網站的文件。
8. 現在，前往儲存庫的 CI/CD -> Pipelines 部分並觀察新新增的管道的執行情況。
9. 一段時間後，管道作業將完成，網站將部署在 GitLab Pages 上。

這是 結果。

優點和缺點

軟體包安裝速度很慢，您需要添加額外的程式碼才能使其正常工作，但嚮導非常直觀，只需四個步驟即可部署。

渲染

背景

Render 是 2019 年推出的新產品。它試圖顛覆人們部署服務（包括靜態網站）的方式。到目前為止，他們做得很好，而且數量還在增加。

如何使用

1. 註冊或登入 Render。
2. 透過按下「新建」按鈕並選擇「靜態網站」來建立新的靜態網站。
3. 選擇您要部署的儲存庫。
4. 保留 紗;紗線結構 建置設定中的建置命令。不幸的是，它不能與 npm ci； npm 運行構建 就像其他服務一樣。將“發布目錄”更改為 距離 並點擊“建立靜態網站”。
5. 一段時間後，Render 將部署程式碼。

這是 來自 Render 的即時 URL。

優點和缺點

它確實很快，但對於我們使用“npm ci”和“npm run build”命令的項目來說效果不佳。似乎只有“yarn”有效。

突波

背景

Surge 已經存在了一段時間了。最重要的是，他們的服務使用起來很簡單，只需要一兩個命令即可部署您的靜態網站。它是免費的，但提供每月 30 美元的付費計劃。該工具的堅忍精神使其熠熠生輝。不需要複雜的設置，只需安裝“surge”並使用“surge”運行即可。

如何使用

1. 準備，運行 npm 運行構建 裡面產生靜態文件 距離 目錄。的 激增 將使用它們進行部署。
2. 運行 npm install –全域激增
3. 然後，運行 激增.

有幾點要注意：
如果這是您第一次運行它，您必須建立一個 Surge 帳戶。別擔心，這很容易。只需輸入您的電子郵件和所需的密碼。

然後，系統會要求您輸入“project”，這應該是專案的路徑 距離 目錄。您只需附加即可 距離 如果您在正在部署的儲存庫中執行 Surge，請轉到您給出的路徑。

然後，輸入您網站的未來URL。嘗試一些獨特的東西，因為什麼 激增 提供的對我不起作用。

URL 輸入後， 激增 將部署來自的內容 距離 轉移到指定的URL。這是我得到的：

優點和缺點

它快速而簡單，不需要您採用單獨的介面，但它無法為您的應用程式建議可用的 URL。

部署每個託管服務的時間

我們的 3 個免費 React 託管服務

1. 網路化
2. Vercel
3. 突波

重點

在測試了這些免費的 React 應用程式託管服務之後，我們認為 Netlify 是其中最好的。它提供快速部署以及您可能需要的許多功能。緊隨其後的是 Vercel，它具有許多功能，並且在初始部署後相當快。然後，我們有 Surge，這是一個最小的部署工具，如果您決定升級，它的價格會相當便宜。

自動化您的前端建置並將您的應用程式交付速度提高 10 倍。 了解更多.