LoginSignup
0
1

More than 3 years have passed since last update.

コーディング未経験のPO/PdMのためのRails on Dockerハンズオン、Rails on Dockerハンズオン vol.15 - Deploy to Heroku

Last updated at Posted at 2020-04-14

はじめに

こんにちは!

今回は実際にここまで作ったアプリケーションをデプロイして公開してみます!
Herokuというサービスを使って、今まで開発してきたアプリケーションをデプロイしてみます。

ちなみに今回のハンズオンではGitコマンドを使用します(Herokuにソースコードをアップロードするときに使う)。各自の環境に合わせてGitコマンドをインストールしてから進んでください!(ググって!)

前回のソースコード

今回使うソースコードです(今まで作ってきたアプリです)。今回はこれをデプロイしていきますので、お手元にアプリがない方はこちらからダウンロードしてください。

Heroku

アプリを公開するには、サーバーが必要ですね。今ではサーバーも物理的にサーバーを用意するのではなくAWS、Azure、GCPなどのクラウドサービスのIaaSを利用して用意するのが一般的になってきているかと思います。
HerokuはIaaSのもう一段上のPaaSに位置付けられるサービスです。
IaaS的なサーバーの利用はもちろん、アドオンとしてデータベースやCDNなどのサービスを簡易に利用できたり、ソースコードからビルド・デプロイを簡単に行なってくれたり(ビルドパック)、IaaS+αなことを提供してくれます。
時間などの制約などはありますが、個人の開発者でも無料でアプリケーションを公開できたりするのもオススメポイントです。
Herokuに関しては公式ドキュメントも整っていますし、色々な方が記事を書いたりしているので、この記事での説明はこのくらいにしておきましょう。

では実際にHerokuにアプリケーションをデプロイしていきます!

システム構成

HerokuではDynoと呼ばれるコンテナにアプリケーションをデプロイすることができます。
コンテナといっても今まで開発してきたようにDockerfileを書いてdocker-compose.ymlを書いてというようなことは必要ありません。(似たようなファイルを書くことで意図した通りのデプロイをさせる方法などはありますが、今回はスコープ外とします。)
今まで作ってきたRailsアプリケーションは、Dyno上で動作させましょう。

また、ここまでPostgreSQLをDockerコンテナで起動させてきました。
こちらはHerokuのアドオンとして、Heroku Postgresが用意されているのでこちらを利用しましょう。
Heroku Postgresも容量の制約はありますが無料でも利用が可能です。

Herokuアカウントを作成する

さて、では実際にデプロイを始めていきましょう。
まずはHerokuアカウントを作成します。サインアップページからアカウントを作成してみてください。

Heroku CLIをインストールする

コマンドラインからHeroku操作をするために公式インストールサイトからHeroku CLIをインストールしましょう。

Heroku CLIでログインする

$ heroku login
heroku: Press any key to open up the browser to login or q to exit:

でサインインページがブラウザで開くと思うので、先ほど作ったアカウントでサインインしてください。
コマンドライン側に以下の表示が出ていればサインイン成功です!

Logged in as [アカウントのメールアドレス]

Gitを使えるようにしておく

Herokuにデプロイする際はHerokuで用意してくれるGitレポジトリにアプリをpushします。
なので、Gitを使える準備をしておく必要があります。もし現段階でGitリポジトリを作成していない場合は、ローカルレポジトリを作っておきましょう。

$ git init

Heroku Appを作成する

まずHerokuでAppを作ります。ワークスペースみたいなものですね。
Appの名前はサブドメインにも使われるので、お好みの名前を指定してあげるといいです。ただし、他のアカウントも含めて重複は許されないのでかぶっちゃった時は諦めましょう。

$ heroku create test-app

test-appがアプリ名です。アプリ名をつけないとHerokuが適当な名前をつけちゃうのでちゃんとつけてあげてくださいね。

Heroku Add-onsのPostgresを追加する

Railsアプリケーションが使うPostgresをHeroku Add-onsから追加します。
今回は無料で済ませたいのでhobby-devプランを使います。

$ heroku addons:create heroku-postgresql:hobby-dev

Herokuにアプリをデプロイする

先ほどもお話した通り、HerokuへのデプロイはHerokuのGitリポジトリにソースコードをpushするだけです。
リモートリポジトリの情報は先ほどheroku createをした時にherokuという名前で登録されています。

前回のソースコードからソースコードをダウンロードしている場合は、ローカルブランチがvol.14になっている思います。(これはgit branchコマンドで確認できます。)
Herokuのmasterブランチにpushするために、ローカルブランチもmasterに切り替えてあげましょう。

$ git checkout -b master

そして、pushします。

$ git add .
$ git commit -m "First Commit"
$ git push heroku master

Enumerating objects: 300, done.
Counting objects: 100% (300/300), done.
Delta compression using up to 8 threads
Compressing objects: 100% (191/191), done.
Writing objects: 100% (300/300), 305.11 KiB | 30.51 MiB/s, done.
Total 300 (delta 108), reused 241 (delta 82)
remote: Compressing source files... done.
remote: Building source:
remote:
remote:  !     Warning: Multiple default buildpacks reported the ability to handle this app. The first buildpack in the list below will be used.
remote:             Detected buildpacks: Ruby,Node.js
remote:             See https://devcenter.heroku.com/articles/buildpacks#buildpack-detect-order
remote: -----> Ruby app detected
remote: -----> Installing bundler 1.17.3
remote: -----> Removing BUNDLED WITH version in the Gemfile.lock
remote: -----> Compiling Ruby/Rails
remote: -----> Using Ruby version: ruby-2.6.5
remote: -----> Installing dependencies using bundler 1.17.3
remote:        Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment
remote:        The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
remote:        Fetching gem metadata from https://rubygems.org/............
remote:        Fetching rake 13.0.1
remote:        Installing rake 13.0.1
remote:        Fetching concurrent-ruby 1.1.6
...
remote: -----> Compressing...
remote:        Done: 92.2M
remote: -----> Launching...
remote:        Released v6
remote:        https://test-app.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/test-app.git
 * [new branch]      master -> master

なんかいろいろログが出てきますが、注目は『Ruby app detected』や『Compiling Ruby/Rails』ですね。
HerokuのGitレポジトリにpushした段階でビルドパックが作動しています。
ソースコードから勝手に「Ruby使ってますよね?Railsですよね?ビルドしてデプロイしときますね!」という感じで勝手にビルド&デプロイしてくれます。

最後の方に「https://test-app.herokuapp.com/ deployed to Heroku」とありますね。
このURLでデプロイしたよ、ということです。

デプロイされたところでDBをマイグレートしてあげます。

$ heroku run rails db:migrate

このようにheroku runコマンドをつけることでpushしたアプリを起動してコマンドを発行します。
正確にはOne-Off Dynosが使われているみたいなので、今WebからアクセスできるDynosとは別にコマンド発行用に一時的に起動されているみたいです。(なのでログファイルとかを見るようではない)

ここまで完了したら先ほどデプロイしたよと言われたURL(https://test-app.herokuapp.com/)にアクセスしてみましょう。

image.png

お、デプロイされとる。動く、動くぞ。
ちょっといろいろと触ってみましょう。今までコーディングしてきた機能がちゃんと動くなっているはずです。

デプロイできました。クソほど簡単でした。

まとめ

今回はここまでで終了です!
いままで作ってきたアプリをHerokuにデプロイすることができました!

そういえば、HerokuはGitHubとの連携がいい感じらしいです。GitHubにpushしたらHerokuに自動でデプロイするように設定したりできるってことですね。
GitHubにはCIツールのGitHub Actionsがあったりもするので、テストコードをパスしたらHerokuにデプロイみたいなことも意外と簡単にできるのかも(やったことない)。
もちろん他のGitサービスやCI/CDサービスでもできます。僕はGitlab CI使ってやってましたー。

ここまででDocker上でRailsアプリを開発する環境を作って、TDDでコーディングをして、Herokuにデプロイする、という一連の流れを体験できましたね!
あとは自分の作りたいものを作ってみるのが一番勉強になります!走り出す準備はできたはず!あとはひたすらに作って調べて作って調べてたまに記事とか書いてアウトプットして!開発を楽しみましょう!本業も忘れずに!

次回はチャレンジング!僕も勉強中なんですが、せっかくDockerをやってきたのでKubernetesだとどうやってデプロイ・公開できるの?というのを体験してみたいと思います!「こいつ、動くぞ!」

ではまた次回!

後片付け

今回はHerokuアプリをデプロイしたままになっちゃっているのでちゃんと後片付けしましょう。

まずHeroku Appを削除しちゃいます。

$ heroku apps:destroy --app test-app --confirm test-app

これでAdd-onsも含めて削除されました。
Herokuアカウントもいらない場合はWebサイトのダッシュボードから削除できます。詳しくは公式サイトを。

本日のソースコード

本日は特にソースコードを更新していないので、ないです。

Other Hands-on Links

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1