JavaScript >> Javascript 文檔 >  >> React

如何將 React 應用程序部署到 Heroku

簡介

當開發人員創建應用程序時,下一步是與朋友或公眾共享它,以便每個人都可以訪問它。將代碼從開發環境轉移到託管平台並提供給最終用戶的過程稱為部署 .

在 Heroku 等雲託管平台出現之前,託管效率非常低。這主要是由需要上傳所有靜態資產(通過運行 npm run build 生成的構建文件)的託管服務提供商完成的 ) 每次我們做出改變。除了某種 FTP 接口(本地接口或託管服務器上)之外,沒有其他方法可以上傳靜態文件,這可能會帶來很大的壓力和技術性。

什麼是 Heroku 以及為什麼要使用它?

Heroku 是一個基於容器的雲平台,使開發人員能夠輕鬆部署、管理和擴展現代應用程序。這使開發人員可以專注於他們的核心工作——創建讓用戶滿意和吸引用戶的優秀應用程序。換句話說,Heroku 通過使應用程序部署、擴展和管理盡可能簡單來提高開發人員的工作效率。

我們應該使用 Heroku 的原因有很多:

  • 支持多種語言 - 從頭開始,Heroku 平台支持超過八種語言,包括 Node、Java 和 Python。
  • 支持多個數據庫 和數據存儲 - Heroku 使開發人員能夠根據各個應用程序(Postgres SQL、MySQL、MongoDB 等)的特定要求從各種數據庫和數據存儲中進行選擇。
  • 更便宜 - 從長遠來看,創建和託管靜態網站將為我們節省資金。

開始使用

在本指南中,我們將部署一個電影搜索應用程序,它是一個簡單的 React 應用程序,用於搜索電影的 API。在我們開始之前,如果您還沒有帳戶,您應該註冊 Heroku,因為這是我們將部署我們的 React 應用程序的地方。我們可以去 Heroku.com,點擊右上角的註冊按鈕進行註冊。註冊管道幾乎是標準管道,因此在 Heroku 上創建帳戶應該沒有任何問題:

創建 Heroku 帳戶後,我們就可以繼續實際部署我們的應用了。

注意: 以前,可以選擇通過 GitHub 集成進行部署,但由於安全漏洞,該功能已被撤銷。目前部署到 Heroku 的最佳方式是通過 Heroku Git,這發生在我們的 CLI(命令行界面 )。

使用 Heroku Git 部署

Heroku 使用 Git 版本控制系統來管理應用程序部署。需要注意的是,我們不需要成為 Git 專家即可將我們的 React 應用程序部署到 Heroku,我們只需要了解一些基礎知識,這些基礎知識將在本指南中介紹。

如果你對 Git 沒有信心——別擔心。我們將涵蓋您需要知道的一切。否則,請查看我們的免費課程 關於 Git:Git Essentials:Git 開發人員指南

開始之前

作為名稱 Heroku Git 暗示,我們將使用 Git,這意味著我們需要安裝 Git。這同樣適用於 Heroku CLI。如果您沒有安裝這兩個,您可以按照以下說明指導您完成安裝過程:

  • Git 安裝說明
  • Heroku CLI 安裝說明

成功安裝它們後,我們可以繼續在 Heroku 上創建一個應用程序,稍後我們的 React 應用程序將部署到該應用程序。我們可以通過兩種方式在 Heroku 上創建應用程序 - 通過 終端 (CLI 命令)或在我們的 Heroku 儀表板上手動 .

注意: 一個常見的誤解是 Git 和 GitHub 是同一個東西,但它們不是! Git 是許多應用程序和服務使用的版本控制系統,包括但不限於 GitHub。因此,您無需將代碼推送到 GitHub,也無需擁有 GitHub 帳戶即可使用 Heroku。

如何手動創建 Heroku 應用

首先讓我們看看如何使用 Heroku 儀表板創建應用程序。第一步是點擊創建新應用 按鈕:

這會將我們重定向到需要填寫有關我們要創建的應用程序的信息的頁面:

注意: 確保你記住名字 您在 Heroku 上創建的應用程序,因為我們將很快將我們的本地存儲庫連接到這個遠程存儲庫。

一旦這個過程完成,我們就可以開始將我們的應用程序從本地環境部署到 Heroku。但是,在我們了解如何部署應用程序之前,讓我們考慮另一種創建 Heroku 應用程序的方法 - 使用 Heroku CLI。

如何通過 CLI 創建 Heroku 應用

或者,您可以使用 CLI 在 Heroku 上創建應用程序。 Heroku 確保這盡可能簡單。您唯一需要做的就是在您選擇的終端中運行以下命令(只需確保替換 <app-name> 使用您的應用程序的實際名稱):

$ heroku create -a <app-name>

注意: 如果您從應用程序的根目錄運行此命令,空的 Heroku Git 存儲庫將自動設置為我們本地存儲庫的遠程。

如何將代碼推送到 Heroku

將代碼推送到 Heroku 之前的第一步是將自己定位在應用程序的根目錄中(在終端中)。然後使用 heroku login 命令以登錄 Heroku 儀表板。之後,您需要接受 Heroku 的條款和條件,最後使用您的登錄憑據登錄 Heroku:

免費電子書:Git Essentials

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

之後您將返回終端,因此您可以繼續部署到 Heroku 的過程。現在,您應該初始化存儲庫:

$ git init

然後將我們之前在 Heroku 上創建的應用程序註冊為我們在上一步中初始化的本地應用程序的遠程存儲庫:

$ heroku git:remote -a <app-name>

注意: 確保替換 <app-name> 使用我們之前在 Heroku 上創建的應用程序的名稱(例如 movies-search-app )。

現在我們可以繼續部署我們的應用程序了。但是,由於我們需要部署一個 React 應用程序,我們首先需要添加 React buildpack:

$ heroku buildpacks:set mars/create-react-app

一旦完成,下一步就是將我們的代碼實際推送到我們在 Heroku 上創建的遠程存儲庫。第一步是暫存我們的文件,提交它們,最後將它們推送到遠程存儲庫:

$ git commit -am "my commit"
$ git push heroku main

注意: 假設我們想從 main 切換我們的分支 到 development .我們可以運行以下命令:git checkout -b development .

成功推送到 Heroku 後,我們可以在瀏覽器中打開新部署的應用:

$ heroku open

如何更新我們的部署

您可能會遇到的下一個問題是在我們對其進行更改後如何重新部署該應用程序。這與在任何基於 Git 的平台中的工作方式類似——我們所要做的就是暫存文件、提交,然後將代碼推送到 Heroku:

$ git commit -am "added changes"
$ git push heroku main

Heroku 會自動選擇此更改並將其應用於實時應用程序。

結論

Heroku 可以成為部署 React 應用程序的一個相當有用的工具。在本文中,我們了解瞭如何使用 Heroku Git 將 React 應用程序部署到 Heroku。此外,我們還介紹了您在使用 Heroku Git 時需要的一些基本 Git 命令,最後,我們討論瞭如何在對應用程序進行更改後重新部署它。


Tutorial JavaScript 教程
  1. 在 JavaScript 中解構數組和對象第 2 部分

  2. 如何在 amchart 條形圖中刪除或隱藏類別名稱

  3. Kinsta Kingpin:約書亞·布羅頓訪談

  4. 一次從 Github、Gitlab 和 Bitbucket 閱讀你的簡歷

  5. 將 Chai 斷言庫與 Mocha 一起使用

  6. 什麼是 Vuex 商店?

  7. 第 19 天:添加習慣功能

  1. 擺脫 jQuery 膨脹——使用 NodeList.js 進行 DOM 操作

  2. 您尋找的材料吧

  3. 我是如何編寫世界上最快的記憶庫的

  4. 如何為每個用戶生成一個唯一的 URL 目錄?

  5. Python vs Javascript:2020 年哪種網絡編程語言更好?

  6. 為開源項目 JS-DOM 做貢獻

  7. 解決 Apache 上 Vue 路由的 404 錯誤

  1. 從頭開始構建一個 AngularJS 應用程序,由 Python EVE 提供支持

  2. 如何在運行時檢查當前的 Node.js 版本

  3. 玩轉瀏覽器遊戲和網絡數據庫

  4. 如何使用 React Hooks 構建電影搜索應用程序