JavaScript >> Javascript 文檔 >  >> React

將 React 應用程序部署到 Netlify 的指南

簡介

部署 是將我們的代碼從源代碼控制系統移動到託管平台並存儲它的過程,並且可以作為應用程序提供給最終用戶。通常,這是在雲端或本地服務器上完成的。

在 Netlify 等雲平台出現之前,託管僅由託管服務提供商完成 誰需要重新上傳所有靜態資產(運行 npm run build 後生成的構建文件 ) 每次進行更改時。此上傳是使用 FTP 軟件或 cPanel 等網絡託管管理系統完成的,這可能會帶來很大壓力和技術性。

Netlify 旨在解決這個問題!它為您提供了三種簡單的方法來部署應用程序 - 拖放界面、項目導入界面和命令行界面 (CLI)。儘管它們都做得很簡單,但每一個都是根據不同的用例量身定制的。

為什麼要使用 Netlify?

Netlify 是一家為靜態網站提供無服務器後端服務的雲託管服務提供商。它旨在最大限度地提高生產力 從某種意義上說,它使開發人員(尤其是面向前端的)和工程師能夠快速構建、測試和部署網站/應用程序。

它通過連接到您的 GitHub 存儲庫來工作,從那裡提取源代碼。之後,它將運行一個構建過程來預渲染頁面 我們的網站/應用程序到 靜態文件 .

支持使用 Netlify 的原因有很多,這裡只是其中的一部分:

  • Netlify 更便宜 - 從長遠來看,創建和託管靜態網站將為您節省資金。 Netlify 通過全球分佈和自動預渲染顯著提高了網站速度。
  • Netlify 讓部署變得難以置信地簡單 一個網站——事實上,最簡單的方法是使用 GitHub、GitLab 或 Bitbucket 來設置持續部署。
  • Netlify 讓啟動網站變得超級輕鬆 使用其內置的 DNS 管理解決方案。
  • 我們可以輕鬆地只部署一個特定的分支 我們的 Git 項目的 - 這對於測試可能會或可能不會進入 master/main 分支的新功能很有用,或者用於快速確定 PR 將如何影響您的網站。
  • Netlify 允許您預覽任何部署 您進行或想要進行 - 這使您和您的團隊可以查看生產中的更改,而無需將它們部署到您現有的站點上。
  • Netlify 提供了一個方便的表單提交功能 這使我們能夠從用戶那裡收集信息。

開始使用

在本指南中,我們將部署一個顏色和陰影應用程序 到 Netlify。這是一個簡單的 React 應用程序,可以從 values.js 包中提取色調和陰影。

在開始之前,讓我們回顧一下使用 Netlify 的一些先決條件:

  • 擁有任何 Git 提供商的帳戶 - GitHub、GitLab 或 Bitbucket。
  • npm 已安裝 - 它預裝了 Node 或 Yarn。
  • 對如何使用終端的基本了解(可選)。

將代碼推送到 GitHub

我們必須先將項目推送到任何 Git 提供商,然後才能將應用程序部署到 Netlify。對於本指南,我們將使用終端將我們的 React 應用推送到 GitHub。

但讓我們先從創建 GitHub 存儲庫開始。然後確保填寫必要的信息並單擊創建存儲庫

回到終端 ,讓我們先暫存所有文件,這樣我們就可以將它們提交到存儲庫,然後創建一個新分支 main 使用以下命令:

$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main

完成後,我們現在可以使用以下命令推送到創建的遠程存儲庫:

$ git remote add origin https://github.com/username/git-repo.git
$ git push -u origin main

當我們刷新存儲庫時,我們的代碼應該會出現!接下來,有三種主要的方法來進行 Netlify 部署。讓我們看看所有的方法,並在最後進行比較。

部署應用到 Netlify

Netlify 提供免費計劃 這允許我們使用登錄頁面上列出的任何一個選項來創建帳戶或登錄(如下圖所示)。

登錄後,我們將被帶到我們的 Netlify 儀表板,在這裡我們將使用拖放方法和項目導入方法將我們的應用程序部署到 Netlify。

通過拖放將應用程序部署到 Netlify

我們將首先通過運行以下命令來創建應用程序的構建:

$ npm run build

一旦成功完成,我們的構建文件夾將被創建,其中將包含所有生產就緒文件(這些是我們將使用拖放方法上傳到 Netlify 的文件)。

注意: 這僅適用於 HTML、CSS 和 JS 等靜態文件。這就是為什麼我們必須首先構建我們的項目,以便它可以生成我們的靜態文件。

點擊“添加新網站 "> "手動部署" 在我們的 Netlify 概述頁面上。這將把我們帶到我們將放置靜態文件的頁面。我們也可以登陸這裡訪問drop頁面。

下一步是刪除生成的構建文件夾,以便立即將其部署到實時 URL,如下所示:

使用 Netlify 的 CLI 將應用程序部署到 Netlify

Netlify 的命令行界面 (CLI) 允許我們直接從命令行部署我們的應用程序,以及配置持續部署,以便當我們將提交推送到我們連接的 Git 存儲庫時,Netlify 會自動部署我們網站的新版本。

第一步是使用以下命令安裝 CLI:

$ npm install netlify-cli -g

此命令將全局安裝 Netlify。如果您想在本地安裝 Netlify CLI,請從我們項目的根目錄運行以下命令:

$ npm install netlify-cli --save-dev

注意: 安裝成功後,我們可以運行 netlify 在我們的終端中查看所有 Netlify 命令的列表以及它們的作用。

使用 Netlify CLI 部署我們的 React 應用程序的第一步是通過命令行從任意目錄運行以下命令進行身份驗證並獲取訪問令牌:

$ netlify login

這將打開一個瀏覽器選項卡,以便對我們進行身份驗證並授予我們對 Netlify CLI 的訪問權限 :

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

一旦成功,我們現在可以使用 deploy 部署我們的應用程序 命令:

$ netlify deploy

這將提示一些關於設置的問題:

由於我們已經在 GitHub 上託管了我們的 react 應用程序,所以我們只需要 “將此目錄鏈接到現有站點” .這將提出下一個問題:

該文件夾將鏈接到我們推送代碼的 GitHub 存儲庫,只要將其添加為遠程源,它就會自動出現。之後,我們的站點將被創建並部署到一個草稿 URL,我們可以通過將 URL 複製並粘貼到瀏覽器中來查看:

根據我們的控制台,“如果您的草稿 URL 上一切正常,請使用 --prod 將其部署到您的主站點 URL 標誌。” 這使我們能夠預覽我們所做的任何部署,以便我們和我們的團隊可以看到更改在生產中的外觀,而無需在我們現有的站點上部署它們。

因此,為了使我們的應用程序上線,我們將執行以下命令:

$ netlify deploy --prod

成功完成後,我們將獲得兩個重要的 URL:唯一部署 URL (代表每個單獨部署的唯一 URL)和 實時 URL (始終顯示您的最新部署):

因此,每次我們更新和部署我們的網站時,我們都會獲得該部署的唯一 URL。從本質上講,如果我們多次部署,我們將擁有多個唯一的 URL,您可以使用這些 URL 將用戶引導到您的應用程序的特定版本。但是,實時 URL 始終會在同一 URL 上顯示我們最近的更改。

將項目導入 Netlify Dashboard

到目前為止,我們已經了解瞭如何通過拖放以及 Netlify CLI 部署 React 應用程序。如果我們不想使用 CLI,我們可以通過將項目從 Git 提供程序導入到我們的 Netlify 頁面來手動完成所有操作。這也可以執行類似於 Netlify CLI 的功能。

第一步是訪問我們的 Netlify 團隊頁面,然後點擊“添加新站點 "> "導入現有項目" 如下圖:

之後,它會將我們帶到一個頁面,我們可以在其中選擇託管您的站點/應用程序源代碼的 Git 提供程序。在我們的例子中,我們選擇了 GitHub。我們現在可以在獲得授權後搜索 GitHub 存儲庫:

一旦我們確定了項目,我們現在就可以處理部署了。這會將我們帶到一個頁面,我們可以在其中指定要部署的分支,例如,如果我們正在測試特定版本。此頁面還允許我們指定構建命令和構建文件的位置(這由 Netlify 自動處理,除非我們希望更改它)。完成後,我們將單擊“部署站點” 按鈕。

當我們的部署成功時,我們應該得到一個 Live URL。我們還可以在設置概覽頁面調整設置,例如域設置、查看部署日誌等。

比較部署選項

前三種方法都幫助我們進行部署,但後兩種方法有助於其他功能,例如持續部署、部署特定分支、處理測試等。

當您想要快速部署構建文件而無需將代碼推送到任何 Git 提供商時,拖放界面非常有用。 Netlify CLI 和儀表板在後台執行相同的功能。 Netlify CLI 通過一個乾淨的終端接受所有命令,因此您不必處理不必要的導航,並且可以預期它的更改頻率低於網頁。

選擇最好的取決於開發人員的個人喜好,許多人更喜歡 CLI,因為所需的開銷較低 - 您可以從 IDE 中使用它,它乾淨簡潔,並且不會隨著時間的推移而發生太大變化。

處理頁面未找到錯誤

如果我們使用路由器,例如 React Router,我們需要為我們的 URL 配置重定向和重寫規則。因為當我們點擊任意導航項改變頁面(路由)並刷新瀏覽器時,會出現404錯誤頁面。

因此,Netlify 使為我們的 URL 配置重定向和重寫規則變得非常容易。我們需要添加一個名為 _redirects 的文件 到我們應用程序的構建文件夾,為了自動發生,我們將它放在 public 文件夾。文件中必須包含以下重寫規則:

/*  /index.html 200

無論瀏覽器請求什麼 URL,此重寫規則都會為 index.html 文件提供服務,而不是返回 404。因此,為了查看實時 URL 中的最新更改,我們必須使用任何首選方法重新部署.更改路線並刷新應用後,我們將不再看到 404 錯誤頁面:

結論

部署 是將我們的代碼從源代碼控制系統移動到託管平台並存儲它的過程,並且可以作為應用程序提供給最終用戶。通常,這是在雲端或本地服務器上完成的。

在 Netlify 等雲平台出現之前,託管僅由託管服務提供商完成 誰需要重新上傳所有靜態資產(運行 npm run build 後生成的構建文件 ) 每次進行更改時。此上傳是使用 FTP 軟件或 cPanel 等網絡託管管理系統完成的,這可能會帶來很大壓力和技術性。

在本指南中,我們了解瞭如何通過三種方式輕鬆地將 React 應用程序部署到 Netlify - 通過拖放界面、Netlify CLI 和 Netlify Dashboard。我們還學習瞭如何修復 404 當你的 React 應用使用路由器時發生的錯誤。


Tutorial JavaScript 教程
  1. Kurzgesagt Earth - 一個 CSS 娛樂

  2. JQuery 不能使用多個元素的同名

  3. 獲取 CodeMirror 實例

  4. 在 reactjs 中添加絕對導入的 4 個步驟

  5. 從 JS 中的對象列表中匯總屬性

  6. 使用 JavaScript 查找字符串中最長的單詞

  7. MikroORM 5:更嚴格、更安全、更智能

  1. 📅 Javascript 日期時間 📅

  2. 以簡單的方式開始一個新的 Twilio Functions 項目

  3. 如何測試 React 組件

  4. ASP.NET MVC 5 帖子列表

  5. 如何通過某個值獲取 Map 鍵?例如。 Map.prototype.get - 按最小值鍵

  6. 我用 react 和 zustand 重新創建了經典的俄羅斯方塊遊戲

  7. 使用 AJAX 抓取的可搜索動態內容

  1. TypeScript 中的類型聲明文件是什麼?

  2. JavaScript 按屬性排序 |數組對象

  3. 現代 Javascript 開發環境

  4. 如何使用 JSDelivr