【Nuxt×Heroku】Herokuを使ってSSRなNuxtアプリをデプロイする
SSRだとfirebaseの設定が面倒でHerokuに
初めての導入から公開までのフローを備忘録的に書きました。
作業方法は
- terminalでやる
- Herokuのダッシュボードを使う
の2パターン。
この記事では分かりやすい後者をメインにしつつ、terminalでの作業コマンドも併せて記載しています。
導入編
ここまでは他記事もたくさんあるのでサクッと書きます。
① Herokuでアカウントを作る
Heroku: クラウド・アプリケーション・プラットフォームからアカウントを作成します。
② Heroku CLIをインストール
The Heroku CLI | Heroku Dev Centerで最新の状況を確認してください。
$ brew tap heroku/brew && brew install heroku
③ Herokuログイン
$ heroku login
ブラウザが開くのでログインして、
Logging in... done
Logged in as your@email.com
となればOK。
設定編
ここからデプロイのための設定をしていきます。
① Herokuで新しいアプリを作る
- ダッシュボードのホーム、もしくは「New」から「Create new app」を選択
- 「App name」にアプリの名前を記載して作成
terminalでやる場合
$ heroku create <myapp-name>
② Herokuでビルドパックを設定
- 「Settings」>「Buildpacks」で、「Add buildpack」ボタンを選択。
- 「node.js」を選んで「変更内容を保存」
terminalでやる場合
$ heroku buildpacks:set heroku/nodejs
③ Herokuで環境変数を設定
- 「Settings」>「Config Vars」で、「Reveal Config Vars」ボタンを選択。
環境変数が入力できます。
- 自身が設定している.envの中身（あれば）+以下を追加します。
HOST=0.0.0.0
terminalでやる場合
$ heroku config:set HOST=0.0.0.0
④ ビルドコマンドを追加
package.json
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint": "npm run lint:js",
"heroku-postbuild": "npm run build"
},
こんな感じでheroku-postbuildを追加します。
⑤ HerokuとGitHubを連携する
Herokuダッシュボードで設定していきます。
- 「Deploy」>「Deployment method」で「GitHub」を選択して連携
- 連携すると出てくる「Connect to GitHub」でリポジトリ名を入力して「Search」
- 「Connect」ボタンで連携
とりあえず、これで連携自体はOK。
terminalでやる場合
$ git remote -vでherokuが見つからない場合（githubしかない場合）は
$ git remote add heroku git@heroku.com:<heroku-app-name>.git
公開・自動デプロイ編
お試しデプロイしてみる
手動デプロイをします。
- 「Deploy」>「Manual deploy」でデプロイするブランチを選択
- 「Deploy Branch」を選択
- ビルドログがすぐ下に展開されます
- 「Your app was successfully deployed.」と表示されたら「View」を選択
- 公開URLで確認ができます
terminalでやる場合
- SSH鍵を作成
$ ssh-keygen -t rsa
Enter file in which to save the key (/Users/xxx/.ssh/id_rsa):
そのままenterでOK。既に同名の鍵がある場合は更新しないよう気をつけてください。
鍵を個別で作成したい場合はこの質問時に
/Users/xxx/.ssh/<your_key_name>
こんな感じで名前を指定してください。
個別作成の場合、GitHubに追加も忘れずに。
公開鍵をコピーして、
$ pbcopy < ~/.ssh/<your_key_name>.pub
「Settings」>「SSH and GPG keys」で登録できます。
- Herokuに鍵登録
$ heroku keys:add
登録する鍵を選んでください。
$ heroku keys
で登録されたか確認、
$ heroku keys:remove your@email.local
で削除ができます。
- Herokuにpush
$ git push heroku master
で、masterブランチがデプロイされます。
Permission denied (publickey)になった場合、以前生成された鍵が送信されている可能性があるので
$ vi ~/.ssh/config
で、
Host heroku.com
HostName heroku.com
IdentityFile /Users/xxx/.ssh/<your_key_name>
IdentitiesOnly yes
を追加してください。
- ブラウザで確認
$ heroku open -a <heroku-app-name>
ブラウザが開きます。簡単。
Herokuで自動デプロイの設定をする
「Deploy」>「Automatic deploys」へ移動
「Choose a branch to deploy」で公開するブランチを選択
「Wait for CI to pass before deploy」にチェックを入れてコミットステータスが「success」の場合のみデプロイするようにする（任意）
「Enable Automatic Deploys」ボタンを選択で設定完了
お疲れ様でした！
参考：
GitHub Integration (Heroku GitHub Deploys) | Heroku Dev Center