小村の開発環境構築(12) herokuにデプロイする
こんばんは、小村だよ!
今日は前回できなかったherokuへのデプロイまでやるつもりだよ!
トラブルおきませんよーに!
やること
- releaseブランチを作成
- mainブランチにマージ
- herokuの設定
- herokuにデプロイ
前提条件
- nuxt.jsアプリを作成し、developブランチをGitHubにPush済み(前回まで)
事前準備
手順
現状整理
前回疲れて寝ちゃったからね、どこまで行ったか思いだすー……
ふんふん、developブランチにちゃんと[origin]ついてるね
yarn run dev
実行して異常なし。うんおっけ、デプロイしますか!
releaseブランチ作成
今回のバージョンはまだ本稼働じゃない最初のだし、[0.1.0]かな。
下記を実行してreleaseブランチを作成してPush!!!超!エキサイティン!!!
git checkout -b release/0.1.0 git push -u origin release/0.1.0
GitHubからプルリクエストし[main]にマージ
GitHubの[New Pull Request]を押下
[main]←[release/0.1.0]を選択
[Create Pull Request]を押下
コメント欄出るけど1人プロジェクトだし入力しまてん!
[Create Pull Request]を押下
- 追記:前回のGitHubルールを適用してるとここで承認できなくて詰むよ!
そしたらプルリクエストタブを見に行くよ!
物騒なマーク出てるゥーーー!!!
CL/CIの設定してないせいだと思いたい……
気にせずに[Merge Pull Request]を押下してマージしまーーーす!
[Confirm marge]をポチィー!
ステータスが[Marged]に変わったね!問題なさそう!
releaseブランチはいらないのでそのまま削除しまーす!
[main]ブランチ確認
おっけ!!!ちゃんと[main]ブランチに資材が反映されてるね!
CL/CIで失敗してるけどそのうち直すから今はガン無視する!
それじゃ次はherokuの設定していくよーーー!
herokuにリポジトリ作成
herokuに初めてログインするとこんな感じ
まずはリポジトリを作成
イかした名前をつけて[Create app]をクリック
至極順調!滞りないぜ!!!
Herokuの設定
ただ何個かのサイトを参考にしたところHeroku側にNuxt.js用の設定が必要っぽい
Herokuの環境変数にいくつか登録が必要みたいで、下記を実行!
# little-villageには自分のプロジェクト名 heroku config:set HOST=0.0.0.0 -a little-village heroku config:set NODE_ENV=production -a little-village heroku config:set NPM_CONFIG_PRODUCTION=false -a little-village
Config Varsのところに登録されてるね!
あとはherokuにPushするだけじゃ!
色々試したけど下記でherokuにPushできました!
# herokuのリポジトリに紐づけ。 # little-villageの部分に自分のプロジェクト名を設定 heroku git:remote -a little-village # gitのブランチをmainに変更 git checkout main # gitのmainブランチをpull rebase git pull --rebase # herokuにプッシュ git push heroku main
リポジトリ名を1回[master]に間違えてエラー吐いてるのはご愛敬
- 今Gitで起きるミスの上位というかあるあるだよね!
ちなみにこの後めっちゃログにWarningが吐かれてドキドキする
Warningはあるけど無事完了したっぽい!
herokuを開いて[Open app]をクリック
ひゃっほーーー!!!うごいてるーーー!
余がこの地の支配者だ!!!無礼者!!!我を崇めたたえよ!!!
おわりに
無事herokuへのdeployが完了しました!
ここまできたら後ホント一息って感じするね!!!
早くポートフォリオサイトにとりかかるぞーーー!!!
ではでは、またね~~~ちゃおちゃお!!!