教你如何不花錢把 Laravel 專案部署到 Heroku

教你如何不花錢把 Laravel 專案部署到 Heroku

Heroku 是一個網站 App Hosting 的服務商,也就是可以讓你把網站部署到網際網路的地方。針對個人作品.或者是概念驗證等需求的專案提供免費方案,非常適合 Laravel 新人來學習遠端部署,所以我們就來看看可以怎麼做吧!

實作前準備


快速實作

建立Heroku APP

在命令提示字元之下,切換到專案資料夾,執行以下指令以登入Heroku:

heroku login

這個指令會開啟瀏覽器讓我們登入Heroku帳號,在登入完畢之後,即可關掉登入分頁。回到命令提示字元下操作,接下來利用以下指令建立一個Heroku APP:

heroku create 你的App名稱

如果在create後面沒有加上任何的名字,則Heroku會幫我們挑選一個可用的id。我們也可以自選id,只要和別人不一樣就可以使用,如果你挑選的id有人用過了,那麼它會提示你再另外選用

如果建立時的名稱不滿意,沒關係,之後還是能回到 Heroku 的 Dashboard 來進行變更

建立完成之後,可以利用以下的指令檢視目前自己的帳號下所有可用的APP,看看 App 建立是否成功

heroku list

免費的Heroku帳號只能建立最多5個 APP,就作品集的需求來說是足夠的

調整專案

App 建立完成之後,需要在專案的根目錄新建一個叫做Procfile的檔案,沒有副檔名,是給 Heroku 了解公開資料夾所在用的。其內容如下:

web: vendor/bin/heroku-php-apache2 public/

建立本地端 Git 版本庫(非必須)

這部分只針對還沒有進行 Git 版本控管的專案才需要做

git init
git add .
git push heroku master

部署到Heroku伺服器

部署到 Heroku 需要執行以下的指令,第一行會建立一個名為 heroku 的遠端版本庫設定。第二行則是進行 push 的動作,如果你喜歡使用圖形化介面,比如 SourceTree 也是沒問題的

heroku git:remote -a 你的App名稱
git push heroku master

在完成上傳之後,即完成了第一個步驟。如果你的git環境不是初次設定,在上述指令最後一行的master可能會不一樣(也許是main),要依照你自己的branch名稱而修正

此時網站已經可以瀏覽了,如需訪問可以在 Heroku 的 Dashboard 找到 Open app 按鈕,但是在還沒有設定之前,瀏覽的結果是錯誤的訊息,也就是在畫面上會出現「500 Server Error」的字樣

https://pandalab.org/storage/articles/segments/148-1.png

設定環境變數

一般的 Laravel 專案會將環境變數寫在 .env 檔案內,再將其上傳到雲端空間。但 Heroku 作法有所不同。上傳到Heroku之後,還需要到 Dashboard 中找出這個網站 App,選擇 Settings ,找到Config Vars,填入以下這些內容。:

(這裡的設定是以 Postgres 資料庫為例,如果是MySQL的話可能會不太相同)

https://pandalab.org/storage/articles/segments/148-2.png

下面的內容可根據自己的需要來修改,但建議 APP_ENV 保留為 local 就好 ,我們一般需要到.env檔案中去找,尤其是 APP_KEY,APP_URL則改成剛開啟網站時所得到的網址

基本範例如下:

https://pandalab.org/storage/articles/segments/148-3.png

填寫完畢之後,基本上網站就可以順利運行了。不過,如果你的網站有使用到資料庫,那還需要進行資料庫的設定才行。

資料庫設定

資料庫在 Heroku 算是另外一個服務,或稱為 add-ons,需要逐一去新增。Heroku 有提供 Postgres 資料庫可以免費使用,請在 App 的介面切換到 Resources 頁籤,利用「Find more add-ons」連結,去找出 Heroku Postgres 服務,並把它加到目前的App專案中

https://pandalab.org/storage/articles/segments/148-4.png

https://pandalab.org/storage/articles/segments/148-5.png

實際上 Heroku 也提供 Mysql 資料庫,也有免費的方案,但都需要填寫信用卡資料才能夠使用。Postgres SQL 則不需要,算是比較親民的方案。但缺點是不支持關閉外鍵偵測的功能,所以在執行 db:seed 時可能會出現外鍵限制的錯誤,需特別注意

加入完成之後,請回到命令提示字元去輸入以下的指令:

heroku config

此時即會列出目前此 App 的相關設定,其中就會有 DATABASE_URL,如下:

https://pandalab.org/storage/articles/segments/148-6.png

請複製 DATABASE_URL 的內容,前往 config/database.php 中,在程式碼最前面,也就是在 use 的後一行輸入以下的內容:

https://pandalab.org/storage/articles/segments/148-7.png

其中 parse_url() 裡頭雙引號的內容,即為 DATABASE_URL 原先於指令所得到的網址。接者將 'default' 設定改為以下的內容:

'default' => env('DB_CONNECTION', 'pgsql'),

接著再以如下的指令對 Heroku 的網站進行更新部署,使用 SourceTree 等圖形化介面工具也是沒問題的

git add .
git commit -m "update database configuration"
git push heroku master

表格與資料建置

以如下的指令在 Heroku 主機上對資料庫進行 migrate 與 seeding 的作業:

heroku run php artisan migrate
heroku run php artisan db:seed

如此,網站就順利上線了。


進階技巧

如何連到 Heroku 去執行 Artisan 指令?

你可以透過 heroku run 來執行 Artisan 指令,如下例

heroku run php artisan db:seed

如何使用其他分支而非master來進行部署?

Heroku 預設只認 master 分支,如果你想要上傳的並非這個分支的話,最簡單的做法是使用以下指令來部署當前版本

git push -f heroku HEAD:master

素材檔案沒有像網址是以 https 協定來訪問?

如果網站的所有素材沒有採用一致的協定(https)來進行訪問的話,瀏覽器會發出警告。解決方法是在 AppServiceProvider.php 利用 forceScheme() 來設定

//app\Providers\AppServiceProvider.php
if($this->app->environment('production')) {
    \URL::forceScheme('https');
}

資料庫使用常見問題

一般我們在本地端開發都是使用 MySQL,但是 Heroku 不填信用卡資料的免費方案只能使用 PgSQL,會導致資料庫編碼以及部分 SQL 語法都會有些不相容的問題,比如資料庫編碼與校正使用 utf8mb4 與 utf8mb4_unicode_ci,而 PostgreSQL 就不接受

如果無法自行修改來解決的話,可以考慮填寫信用卡來使用 MySQL 的免費方案,增加 MySQL addon 之後點選 addon 項目可取得資料庫主機名稱、連線帳密與資料庫名,我依序填入 phpMyAdmin 後可以順利連上,同時用匯入SQL檔案的方式把本地端資料都匯進去

另外如果出現 connection refused」訊息,請在 Heroku 變數設定部分比照本地專案的 .env 檔案內容,將資料庫相關設定一一補上後就正常顯示


總結

花了一個下午才終於搞定把專案給順利部署到 Heroku 上面去。倒不是它的工具難用,而是受限於免費方案的限制。你無法隨意地去加載需要使用的 dll 檔,所以如果有需要安裝外掛的需要就很麻煩,這個在如果你想要生成中文的假資料就有需要

另外免費版本支持的 PostgreSQL 也有無法關閉外鍵偵測的小麻煩,執行 db:seed 指令需要特別小心,除此之外,也沒有提供資料庫管理介面,只能夠遠端連線來進行管理,而我經過測試並無法成功連線

總的來說,我只推薦想要不花錢就能把自己的作品集放上雲端的朋友來使用。因為部署過程並不會太簡單,管理上也不方便。而其部署上的一些作法也與上傳到一般的 Web Hosting 雲端有所不同,需要重新適應

如果你願意負擔少少的預算,比如一個月不到150台幣。我更為推薦你使用 A2 Hosting 來部署專案,一切將會更為順利與方便,如果想瞭解如何部署到 A2 Hosting ,請參考我的另一篇文章

(本文章參考自何敏煌老師的課程教材,多謝他的貢獻)


分享這篇文章:

關聯文章: