展示流程:既有專案使用Heroku推出你的應用

在使用Heroku推出你的應用，可適用於新建與既有專案! 一文中僅介紹了整個流程，這篇以實際的既有專案做流程展示。

要使用React的CRA其實也是可以，不過既然要展示，我們就直接用公開的作品。以下選擇github的Tim Baker所提供的React JS Resume Web App Template作為既有專案。

使用既有React專案

我們先clone下來。記得事前要先安裝好套件管理程式npm或者是yarn

$ git clone https://github.com/tbakerx/react-resume-template.git
$ cd react-resume-template
$ yarn install

查看一下可以用的script

$ cat package.json

非常好，script內有heroku需要的build跟start。

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
...
}

先確認一下專案正常

$ yarn start

會開port 3000在瀏覽器中呈現結果，與github上所見相同。

如果你還沒登入的話，沒帳號就請申請帳號。再安裝heroku CLI來consle進行登入

$ heroku login

heroku: Press any key to open up the browser to login or q to exit:

按一下不是q的任意按鍵會開啟你的預設瀏覽器進行登入。

這裡使用CLI來創建Heroku專案

~~$ heroku create my-react-test~~

~~▸ Name my-react-test is already taken~~

~~如果得到以上錯誤就是請你改一下專案名稱。~~

$ heroku create react-sample-20211116

Creating ⬢ react-sample-20211116... done

https://react-sample-20211116.herokuapp.com/ | https://git.heroku.com/react-sample-20211116.git

你可以看到你的git remote中增加了heroku的git路徑

$ git remote -v

heroku https://git.heroku.com/react-sample-20211116.git (fetch)

heroku https://git.heroku.com/react-sample-20211116.git (push)

origin https://github.com/tbakerx/react-resume-template.git (fetch)

origin https://github.com/tbakerx/react-resume-template.git (push)

使用git push就能推出你的應用，部屬到heroku。

$ git push heroku master

因為既有專案是master分支，所以直接master

$ heroku open