DIVE INTO CODE

プロのエンジニアになるために挑戦する人が、チャンスをつかめる場をつくる。

Rails03

Herokuとは

クラウド環境でカスタムアプリケーションを開発、導入、運用するための PaaS ( Platform - as - a Service ) です。
デプロイや管理を容易にするためのツール、拡張性とフォールトトレランスを実現するマネージドランタイム、プラットフォームの拡張を可能にする標準的なアドオンエコシステムを備えています。 (salesforce.comより)

ユーザ登録

herokuに新規登録「Sign up」する

【手順】 HerokuのWebサイト( https://www.heroku.com/ )にアクセスして、「Sign up for Free」をクリックする

https://diveintocode.gyazo.com/01b3e8a49b5a9c11d06f0c8029600dd8

Herokuは無料で登録ができます。

【手順】 氏名とメールアドレスを入力する(Company nameは不要です) 、Pick your development language:欄で「Ruby」を選択して、Create Free Accountをクリックする

https://diveintocode.gyazo.com/4578ae7ed35997015592e7ba4ec8114f

登録したアドレスとパスワードは後の手順で使います。覚えておきましょう。

メールでユーザ認証する

https://diveintocode.gyazo.com/59d2aac4dcfc7dd6d2c47da212885889

【手順】 Herokuに登録したメールの受信トレイを開き、Herokuから送付されてきた登録認証用のメール内の認証用URLをクリックする

https://diveintocode.gyazo.com/09e0ccc0cf48e40f5dc2d740c3ac9723

認証用URLを押下すると正式にユーザ登録がされます。

ログイン用のパスワードを登録する

【手順】 ログイン用に再度任意のパスワードと確認用に再入力をして、Set Password and log inをクリックする

https://diveintocode.gyazo.com/e272c26100e3cfd811b0559b929aca4b

パスワードは今後使うことがあります。忘れないようにしてください。

はじめてのログイン

【手順】 Click here〜を押下する

https://diveintocode.gyazo.com/131e713d7696caf432dabbf6c6824840

Herokuのサイトからもログインできるようになっています。

【手順】 ログイン直後に表示された画面を見る

※下図は、サンプルです。初期の状態では、画面上には何も表示されていません。

https://diveintocode.gyazo.com/42071da46602f160bc7c19a4d66ea0e4

この画面が表示されればHerokuへの新規ユーザ登録は終わりです。

Cloud9へログイン

※Cloud9の画面を既に表示している場合は、飛ばしてください。
【手順】Cloud9のIDE画面を表示する

https://diveintocode.gyazo.com/2066a850b5945f4166019ee1094cfd4c

疎通確認

Cloud9からHerokuへの接続を確認する

【手順】 herokuへログインできるか確認する

[コマンド]

heroku login

https://diveintocode.gyazo.com/a9b4950701e442187e26e4a7836fb41d

【手順】 Email:の行には、herokuに登録したメールアドレスを入力し(”“は不要)、エンターキーを押す

https://diveintocode.gyazo.com/15b6ee91069d95be6218c6140a1d8440

メールアドレスは、”“は不要です。直接アドレスを入力してください。

【手順】 「Password (typing will be hidden):」と聞かれるので、”heroku”に登録したパスワードを入力し、エンターキーを押下する

セキュリティ対策上、画面上に文字は表示されません。しかしちゃんとキーボードを押せば入力は裏側でされています。

https://diveintocode.gyazo.com/2686b4ee812f11767f34b2711e332994

【手順】 Cloud9からHerokuへの疎通が成功したことを「Logged in as メールアドレス」の文言で確認する

Heroku内アプリを作成

Cloud9上でheroku上にお試しアプリを格納する箱を作成する

【手順】 Heroku上にCloud9から送付したファイルを入れるための「Application枠」を作成する

[コマンド]

heroku create

https://diveintocode.gyazo.com/6a0e13b70bbed3537303b955d47fc8ac

heroku内にランダムな名称でアプリケーションを格納する箱が作られます。「heroku create 任意の名前」と入力すると任意の名前で登録ができます。全世界で唯一の名である必要があります。

CSS反映設定

herokuに送付する本番環境の設定情報を修正する

【手順】 achieve/config/environments/production.rbファイルを開き26行目あたりの「config.assets.compile = false」の記述を見つける

https://diveintocode.gyazo.com/261f0d6f0ed04c0d022c871fdca80109

【手順】その行のみ false を true に書き換えて、ファイルを保存する

1
config.assets.compile = true

herokuに送付するCSSファイルを事前にコンパイルする

【手順】 Cloud9内のCSSファイルをHeroku内で反映されるようにコンパイルする

[コマンド]

rake assets:precompile RAILS_ENV=production 

CSSを編集した上でherokuに送付する際は、必ず行うコマンドです。この仕組みを深く理解するためには、アセットパイプラインというRailsの仕組みを学びましょう。

https://diveintocode.gyazo.com/6432e13edc39c6e10abcac6f0ebbd5f9

バージョン管理

CSSファイル等の更新をGitに登録する

【手順】 ファイルを編集した内容をGitに検知させる

[コマンド]

git add .

【手順】ファイルを編集した内容をGitに覚えさせる

[コマンド]

git commit -m "Add precompiled files"

"”内のコメントは、何のファイルの変更分だったのかを後からわかるように書けば何でも構いません。

https://diveintocode.gyazo.com/5fc09ed06203581423024e64d4f5c779

Herokuへ送付

コミットされたDB設定ファイルをherokuに送る

【手順】 Gitに登録された内容をHerokuに送る

[コマンド] ※完了まで数分かかります

git push heroku master

https://diveintocode.gyazo.com/b3f102d7cb3e4dc3c789d2cdfd7d8e64

git push heroku masterコマンドは、ソースコードをherokuに反映させる都度、実行するコマンドです。

【手順】 「remote: Verifying deploy…. done.」と表示され、送付が完了したことを確認する

https://diveintocode.gyazo.com/4a2c6e08e249fe7e20bc8bf82717059c

Heroku用テーブル作成

Heroku内(本番環境)データベースにテーブルを作成する

【手順】 Heroku内のPostgreSQL内データベースにテーブルを作成する

[コマンド]

heroku run rake db:migrate RAILS_ENV=production

Heroku内には push した時点で自動的にデータベースが作成されます。そのため、db:createは必要ありません。

【手順】 エラーが発生することなく「CreateBlogs: migrated」と表示されたことを確認する

https://diveintocode.gyazo.com/667a31d763aa4c082bed8c922fbe6299

起動確認

お試しアプリケーションを表示する

【手順】 WebブラウザからHerokuにログインし、ダッシュボード上でブラウザを再読込みを「1回以上」して、以前の手順で作成したAppの名前を見つけ、そのAppを選択してください。

https://diveintocode.gyazo.com/588082bd4ece1faa91eba2ac06837664

※表示されていない場合は、ブラウザを何度も再読込してください。Heroku上にはアプリを入れる箱をいくつでも作成ができます。ただし、同時に動かせる数は限られています。

【手順】右上の「OpenApp」ボタンをクリックする

https://diveintocode.gyazo.com/660e3be8712778eab311a02a6e0669b8

クリックすると下記の画面が新しいタブで表示されます。これが表示されればOKです。

https://diveintocode.gyazo.com/a5e6bcd395b52718c79c11e4a2931ef1

【手順】 URLの末尾に /blogs を追記してブラウザを再読込する

[URLに追記する文字列]
/blogs

https://diveintocode.gyazo.com/bb6a1901afeaf06c7ecde9850e2ac761

この段階では、ルーティング設定がされていないため「The page you were looking for doesn’t exist.」とエラーのような画面が表示されてしまいますが、構いません。

お試しアプリケーションをさわってみる

【手順】achieveのblog一覧画面が表示されたら、facebookなどで友人にシェアして、他の人がアクセスして触れられるかどうかを確認する

https://diveintocode.gyazo.com/e5dd3d3445088c3693d35d15f4f62741

次のステップへ

Cloud9でブログ画面を整える

DIVE INTO CODEの無料説明会を開催中

プロのエンジニアになるために挑戦する人を応援します.

無料説明会はこちら