四月 17, 2019 | 前端與Vue

讓Heroku幫你輕鬆建立Nuxt網頁

Nuxt除了可以使用SPA建立靜態頁面,也能使用SSR製作動態網頁 但是在部署上面實在是很麻煩又傷腦筋... 小編這邊推薦一個很好用又免費的Heroku! 他可以透過git把做好的東西自動部署環境,整套幫你做妥妥的省時又省力! 除了建立帳號以外還必須安裝Heroku Cli Heroko Cli的功能是讓我們可以使用heroku的相關指令,方便我們建立、管理、提交等相關功能 裝好Heroko Cli,確定電腦裡也有安裝Git就可以開始下一步了! Stpe1、設定Heroku 打開Terminal,輸入heroku login來登入Heroku的帳號 目的是為了以後要push的時候不用一直輸入帳號密碼 Stpe2、建立一個新的應用程式 登入Heroku之後在畫面的右方會有一個New的按鈕,點擊後會看到兩個選項。 選擇Create new app來建立接下來要使用的應用程式

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吧?步驟簡單迅速又方便!