小村の開発環境構築(12) herokuにデプロイする

  • こんばんは、小村だよ!

  • 今日は前回できなかったherokuへのデプロイまでやるつもりだよ!

  • トラブルおきませんよーに!



やること

  1. releaseブランチを作成
  2. mainブランチにマージ
  3. herokuの設定
  4. herokuにデプロイ



前提条件

  • nuxt.jsアプリを作成し、developブランチをGitHubにPush済み(前回まで)



事前準備

  • VSCodeよりUbuntuにリモート接続し、nuxt.jsアプリのプロジェクトを開いている

  • herokuのアカウントを作成済み



手順

現状整理

f:id:kom314_prog:20210607215823p:plain
  • 前回疲れて寝ちゃったからね、どこまで行ったか思いだすー……

  • ふんふん、developブランチにちゃんと[origin]ついてるね

  • yarn run dev 実行して異常なし。うんおっけ、デプロイしますか!



releaseブランチ作成

git checkout -b release/0.1.0
git push -u origin release/0.1.0 
f:id:kom314_prog:20210607221408p:plain



GitHubからプルリクエストし[main]にマージ

f:id:kom314_prog:20210607222415p:plain
f:id:kom314_prog:20210607223050p:plain
  • GitHubの[New Pull Request]を押下

  • [main]←[release/0.1.0]を選択

  • [Create Pull Request]を押下



f:id:kom314_prog:20210607223253p:plain
  • コメント欄出るけど1人プロジェクトだし入力しまてん!

  • [Create Pull Request]を押下

    • 追記:前回のGitHubルールを適用してるとここで承認できなくて詰むよ!
  • そしたらプルリクエストタブを見に行くよ!



f:id:kom314_prog:20210607223802p:plain
  • 物騒なマーク出てるゥーーー!!!

  • CL/CIの設定してないせいだと思いたい……

  • 気にせずに[Merge Pull Request]を押下してマージしまーーーす!



f:id:kom314_prog:20210607223941p:plain
f:id:kom314_prog:20210607224215p:plain
  • [Confirm marge]をポチィー!

  • ステータスが[Marged]に変わったね!問題なさそう!

  • releaseブランチはいらないのでそのまま削除しまーす!



[main]ブランチ確認

f:id:kom314_prog:20210607224354p:plain
  • おっけ!!!ちゃんと[main]ブランチに資材が反映されてるね!

  • CL/CIで失敗してるけどそのうち直すから今はガン無視する!

  • それじゃ次はherokuの設定していくよーーー!



herokuにリポジトリ作成

f:id:kom314_prog:20210607224639p:plain
  • herokuに初めてログインするとこんな感じ

  • まずはリポジトリを作成

  • イかした名前をつけて[Create app]をクリック

  • 至極順調!滞りないぜ!!!

f:id:kom314_prog:20210607224809p:plain
f:id:kom314_prog:20210607225106p:plain



Herokuの設定

  • 環境構築時にheroku cliのインストールとログイン済でVSCodeは問題なし!

  • ただ何個かのサイトを参考にしたところ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
f:id:kom314_prog:20210607232514p:plain
f:id:kom314_prog:20210607232559p:plain
  • 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
f:id:kom314_prog:20210607234308p:plain
  • リポジトリ名を1回[master]に間違えてエラー吐いてるのはご愛敬

    • 今Gitで起きるミスの上位というかあるあるだよね!
  • ちなみにこの後めっちゃログにWarningが吐かれてドキドキする

f:id:kom314_prog:20210607235309p:plain
  • Warningはあるけど無事完了したっぽい!

  • herokuを開いて[Open app]をクリック



f:id:kom314_prog:20210607235516p:plain
f:id:kom314_prog:20210607235656p:plain
  • ひゃっほーーー!!!うごいてるーーー!

  • 余がこの地の支配者だ!!!無礼者!!!我を崇めたたえよ!!!



おわりに

  • 無事herokuへのdeployが完了しました!

  • ここまできたら後ホント一息って感じするね!!!

  • 早くポートフォリオサイトにとりかかるぞーーー!!!

  • ではでは、またね~~~ちゃおちゃお!!!