# Heroku Note

## 如何將 nuxt 掛上 Heroku

> [官網公告自 2022/11/28 停止免費服務](https://devcenter.heroku.com/articles/getting-started-with-nodejs)

經過蠻長的拖延，終於願意讓自己跨出第一步，嘗試這麼做了。
依照經驗，簡單的事情果然嘗試後會發現一些疑惑，以下記錄卡住的問題與上傳的過程。

本篇起始狀態如下：
* 作業系統是 win 10
* 已安裝 node
* 已安裝 git
* 未註冊 Heroku
* 有一個執行正常的 nuxt 檔

### 註冊&安裝 Heroku
註冊與安裝從[官方網站](https://www.heroku.com/)執行。因為已安裝 node，我順手用終端機下 `npm install -g heroku` 安裝。

### 新增一個 APP 並設定
完成註冊後登入網頁，在 dashboard 頁面可以找到一個按鈕「new」>「create new app」完成新增，完成後可以在 dashboard 找到已經新增的 app。
（這個步驟可以使用終端機 `heroku create your-app-name` 執行，但用網頁可以在送出前就幫忙檢查 your-app-name 是否可以使用，個人覺得比較貼心。）

點擊進入 app 後，找到 Buildpacks ，按下「Add buildpacks」選擇並新增「heroku/nodejs」。

同頁面可以看到設定 git 的說明，按照步驟就能把 nuxt 檔 push 上去了
### 還需要一些設定
根據 nuxt 官網 [如何将 Nuxt 应用部署至 Heroku？](https://www.nuxtjs.cn/faq/heroku-deployment)，還需要以下設定

$ heroku config:set NPM_CONFIG_PRODUCTION=false
$ heroku config:set HOST=0.0.0.0
$ heroku config:set NODE_ENV=production

設定完畢後，可在後台的設定頁(setting)看見這三項設定（即本步驟亦可手動設定）

以上步驟完成後，可在終端機下`heroku buildpacks`，確認安裝是否有安裝到 heroku/nodejs。

沒意外的話，上傳的 nuxt 網站已經在 heroku 上成功部屬了，設定頁可找到網址：

### 其他咚咚
1. 尚未指定 Heroku app 造成的錯誤。
> » Error: Missing required flag:
> » -a, --app APP app to run command against
> » See more help with --help

[參考](https://stackoverflow.com/questions/56133723/heroky-deployment-error-missing-required-flag)
可以在後方+上 -a -app-name 指向指定的 app
> heroku config:set NPM_CONFIG_PRODUCTION=false -a app-name

### 參考網址
https://www.nuxtjs.cn/faq/heroku-deployment
https://nuxtjs.org/deployments/heroku/
https://quip.com/tmWJAwTqySaL
https://stackoverflow.com/questions/14342553/git-push-heroku-master-permission-denied
https://stackoverflow.com/questions/18406721/heroku-does-not-appear-to-be-a-git-repository

###### tags: `nuxt` `Heroku`