介紹

完成開(kāi)發(fā)了嗎？是時(shí)候部署了！您可以使用許多服務(wù)來(lái)部署您的應(yīng)用程序。Heroku 就是其中之一。在部署方面，這是一個(gè)顯而易見(jiàn)的選擇。它提供了部署、管理和擴(kuò)展應(yīng)用程序的便利。您可能會(huì)覺(jué)得它令人生畏，但使用 Heroku 非常簡(jiǎn)單！

登錄到 Heroku 帳戶

轉(zhuǎn)到Heroku并登錄到您的帳戶

成功登錄后，您將被重定向到儀表板頁(yè)面。

創(chuàng)建新應(yīng)用程序

單擊創(chuàng)建新應(yīng)用程序以開(kāi)始應(yīng)用程序部署。

如下所示，填寫(xiě)必填字段并點(diǎn)擊創(chuàng)建應(yīng)用程序按鈕。

您是否正在尋找精通 ReactJS 的開(kāi)發(fā)人員，同時(shí)還要精通開(kāi)發(fā)和部署？
立即聯(lián)系 Bacancy 并聘請(qǐng) React 開(kāi)發(fā)人員開(kāi)始構(gòu)建您的夢(mèng)想項(xiàng)目！

添加構(gòu)建包

要在 Heroku 上部署 React 應(yīng)用程序，我們需要添加構(gòu)建包。單擊“設(shè)置”選項(xiàng)卡，然后單擊“構(gòu)建包”部分中的“添加構(gòu)建包”按鈕。

我們的 React 構(gòu)建包 URL 是 https://github.com/mars/create-react-app-buildpack。復(fù)制此 URL 并將其添加到 buildpack，如下所示。

之后單擊“保存更改”按鈕。Buildpacks 部分現(xiàn)在將包含我們添加的 URL。請(qǐng)參閱下面的屏幕截圖。

在 Heroku 上部署 React 應(yīng)用程序：使用 Heroku CLI

單擊 Deploy 選項(xiàng)卡以使用 Heroku Git 部署 React 應(yīng)用程序。

在 Heroku 上部署應(yīng)用程序有三種部署方法。
1. Heroku Git
2. Github
3. 容器注冊(cè)中心

這里我們將選擇第一個(gè)選項(xiàng)進(jìn)行部署：Heroku Git。單擊以繼續(xù)。

單擊 Heroku Git 選項(xiàng)后，將出現(xiàn)以下頁(yè)面。

現(xiàn)在，我們需要在我們的機(jī)器上安裝 Heroku CLI。同樣訪問(wèn)Heroku CLI 。

您可以使用以下命令檢查版本

heroku –版本

成功安裝 heroku-cli 后，轉(zhuǎn)到您的項(xiàng)目目錄并使用這些命令設(shè)置 Heroku 存儲(chǔ)庫(kù)。

// 登錄登錄// 創(chuàng)建一個(gè)新的 Git 倉(cāng)庫(kù)初始化heroku git:remote -a bacancy-todo-task// 部署你的應(yīng)用混帳添加。git commit -am “第一次提交”git push --set-upstream heroku master:main

一旦完成觸發(fā)命令，你就成功地在 Heroku 上部署了 React 應(yīng)用程序。

運(yùn)行應(yīng)用程序

使用打開(kāi)您可以檢查在 URL 上運(yùn)行的應(yīng)用程序。

現(xiàn)在我們的應(yīng)用已經(jīng)部署成功。所以現(xiàn)在我們將轉(zhuǎn)到 https://bacancy-todo-task.herokuapp.com/ URL 并訪問(wèn)我們的應(yīng)用程序。

結(jié)論

(言鼎科技)