讓Heroku幫你輕鬆建立Nuxt網頁

Nuxt除了可以使用SPA建立靜態頁面，也能使用SSR製作動態網頁 但是在部署上面實在是很麻煩又傷腦筋...

小編這邊推薦一個很好用又免費的Heroku！ 他可以透過git把做好的東西自動部署環境，整套幫你做妥妥的省時又省力！

除了建立帳號以外還必須安裝Heroku CliHeroko Cli的功能是讓我們可以使用heroku的相關指令，方便我們建立、管理、提交等相關功能

裝好Heroko Cli，確定電腦裡也有安裝Git就可以開始下一步了！

Stpe1、設定Heroku

打開Terminal，輸入heroku login來登入Heroku的帳號 目的是為了以後要push的時候不用一直輸入帳號密碼

Stpe2、建立一個新的應用程式

登入Heroku之後在畫面的右方會有一個New的按鈕，點擊後會看到兩個選項。 選擇Create new app來建立接下來要使用的應用程式

決定好應用程式的名字之後完成建立

Stpe3、同步與新增遠端Heroku儲存庫

建立完成後會自動進入應用程式的後台，接下來要做的就是把要部署的Nuxt推到應用程式裡

我們可以從Settings的Info裡面找到Heroku Git URL，這個URL就是該應用程式的Git遠端資料庫位置

如果你要上傳的檔案從未使用過Git進行版本控制的話得先使用指令git init來建立新的Git儲存庫，這個步驟記得要在你的專案資料夾裡面執行

因為我的應用程式名字叫mido-nuxt，接著再輸入heroku git:remote -a mido-nuxt來把應用程式的遠端儲存庫加進來

想要確認指令是什麼的話可以從Heroku後台的Deploy裡面找到Existing Git repository

想要確認有沒有順利加入遠端資料庫的話可以使用指令git remote只要有看到heroku的字樣就是成功的

Stpe4、將檔案推上Heroku遠端儲存庫

一切都準備就緒！ 接下來只要在Terminal裡面輸入git push heroku master就可以把檔案全部推到我們建立好的應用程式裡面

但是要怎麼看到推上去之後的頁面呢？ 只要從後台點擊Open app就能看到頁面啦！

結語

使用到API想要即時render結果的話靜態頁面沒辦法達成這個需求，想要部署自己的SSR網站... 不妨使用Heroku吧？步驟簡單迅速又方便！