HerokuにWebアプリを公開する方法 -Ruby on Rails-
Update on July 09, 2016
Ruby on RailsでWebアプリを作ってみました。
せっかくなので、これを公開できるサーバーがないか探してみたところ
Heroku（ヘロク）がフリーで使えて、いい感じだったので、そちらにアップデートしてみました。
手順を整理して、メモしておきます。
大まかな手順:
Step1:ローカルにRuby on Rails環境を作成
Step2:GitHubにアプリ登録
Step3:Herokuの環境設定
Step1:ローカルにRuby on Rails環境を作成:
MacでRuby on Railsを動かすためには、環境構築するのが、結構ひと苦労ですが、めげずにいきましょう。
以下のサイトに、Ruby on Railsの環境構築の手順がきれいにまとまって紹介されています。
まずは、この通り自分のPCの環境を構築していきます。
Rubyの現時点での最新バージョンは2.3.1なので、インストールの際、そこだけ変更してください。
参考までに、私が、Ruby on Railsの環境構築した時点での環境は以下の通りです。
確認環境：
Max OS X El Capitan 10.11.2
Xcode 7.3
Command Line Tools for Xcode 7.3
Homebrew 0.9.9
Ruby 2.3.1
Step2:GitHubにアプリ登録:
GitHubとは、アプリのソースコード管理サービスです。
HerokuはGitHubとの連携機能を備えています。
この機能使うために、先にGitHubの設定を行っておきましょう。
以下のGitHubのサイトにアクセスして、Sigh upをします。
Sigh up時に、プランを聞かれますので、無料で使えるFreeプランを選択してください。
Sigh upが完了したら、Sign in してください。
Sign inをしたら、新規にリポジトリを作成します。
画面右上の「＋」ボタンを押して、New reposiory を選択します。
Repository nameに「railssample」と入力します。
Descriptionはこのリポジトリの説明を入力します。空欄でも構いません。
入力が完了したら Create repositoryボタンを押してください。
次に、新規作成したリポジトリにアプリを登録します。
ここでは、私が作ったサンプルアプリを使います。
以下のURLにアクセスして、Clone or downloadボタンを押してください。
Download ZIP ボタンを押して、ローカルにサンプルアプリを取り込んでください。
ここからは、ターミナルで操作していきます。
macでターミナルを起動し、先ほど取り込んだサンプルアプリを解凍した場所に移動します。
そして、以下のコマンドを入力してください。
$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin https://github.com/(Githubのユーザー名)/(Githubのリポジトリ名 今回は、「railssample.git」)
上記のコマンド後、Githubのリポジトリにアプリが登録されていることを確認します。
Step3:Herokuの環境設定：
次はHeroku側の環境構築です。
以下のサイトにアクセスして、Sign upをします。
名前とE-mailを入力し、
Pick your primary development language で Ruby を選びます。
Sign upが完了したら、Sign inします。
画面右上の Newボタンを押して Create new appを選択します。
App Nameに適当な名前を入力します。
この名前は、Heroku上でユニークである必要があります。
なので、自分のユーザー名＋アプリ名とするのがいいでしょう。
あと注意としては、先頭に数字はダメで、大文字は使えません。全体の長さは30文字を超えるとダメです。
入力が完了したら、Create Appボタンを押してください。
次はパイプラインを作成します。
先ほど作成したNew Appの名前で Deployタブあることを確認し、
New Pipelineボタンを押します。
Pipline Nameに適当な名前を入力し、Create Piplineボタンを押します。
Deployment method で GitHub を選択します。
Connect to GitHub の Search for a repository to connect toで
GitHubに登録したユーザー名が表示されていることを確認し、Searchボタンを押します。
先ほど作成したリポジトリ railssampleを選択してください。
ここまで設定すると、Deployment method の GitHub の箇所に Connected と表示され、
Connect to GitHub の Search for a repository to connect toに、
先ほど選択したリポジトリ railssampleが表示されていることを確認してください。
後は、Enable Automatic Deploysボタンを押してください。
パイプラインの作成が完了しました。
パイプラインの設定画面を表示して、以下のように
PRODUCTION に Herokuで新規作成したアプリ名が表示されていることと、
指定したGitHubのリポジトリが表示されていることを確認し、
Connect to GitHubボタンを押してください。
再度、Connect to GitHub の Search for a repository to connect toで
GitHubに登録したユーザー名が表示されていることを確認し、Searchボタンを押します。
先ほど作成したリポジトリ railssampleを選択してください。
ここまで完了したら、画面上のメニューボタンを押して、Dashboard画面へ移動します。
Dashboard画面から、先ほど作成したパイプラインを選択してください。
パイプライン画面のPRODUCTIONの箇所に表示されているアプリの名前をクリックします。
画面右上の Open appボタンを押します。するとブラウザが開きます。
以下のように The page you were looking for doesn't exist. と表示されますが、
私が作成したサンプルアプリがそのように作っているからです。
起動時のURLの末尾に以下を追加してみてください。
/hello/index
Hello World !!! と表示されます。
以上です。
Open appの直後に、The page you were looking for doesn't exist. が表示されるのが気持ちわるい場合は、
publicフォルダに適当なindex.htmlファイルを置いておけば、起動時にそのページが表示されます。