HerokuにWebアプリを公開する方法

 

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 を選択します。


Tip_07_01_001a

 

Repository nameに「railssample」と入力します。

Descriptionはこのリポジトリの説明を入力します。空欄でも構いません。

入力が完了したら Create repositoryボタンを押してください。


Tip_07_01_001b

 

次に、新規作成したリポジトリにアプリを登録します。

ここでは、私が作ったサンプルアプリを使います。

以下の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のリポジトリにアプリが登録されていることを確認します。


Tip_07_01_001c

 

Step3:Herokuの環境設定:

次はHeroku側の環境構築です。

以下のサイトにアクセスして、Sign upをします。

名前とE-mailを入力し、

Pick your primary development language で Ruby を選びます。


Tip_07_01_001d

 

Sign upが完了したら、Sign inします。

画面右上の Newボタンを押して Create new appを選択します。


Tip_07_01_001e

 

App Nameに適当な名前を入力します。

この名前は、Heroku上でユニークである必要があります。

なので、自分のユーザー名+アプリ名とするのがいいでしょう。

あと注意としては、先頭に数字はダメで、大文字は使えません。全体の長さは30文字を超えるとダメです。

入力が完了したら、Create Appボタンを押してください。


Tip_07_01_001f

 

次はパイプラインを作成します。

先ほど作成したNew Appの名前で Deployタブあることを確認し、

New Pipelineボタンを押します。

Pipline Nameに適当な名前を入力し、Create Piplineボタンを押します。

Tip_07_01_001g

 

Deployment method で GitHub を選択します。

Connect to GitHub の Search for a repository to connect toで

GitHubに登録したユーザー名が表示されていることを確認し、Searchボタンを押します。

先ほど作成したリポジトリ railssampleを選択してください。


Tip_07_01_001h

 

ここまで設定すると、Deployment method の GitHub の箇所に Connected と表示され、

Connect to GitHub の Search for a repository to connect toに、

先ほど選択したリポジトリ railssampleが表示されていることを確認してください。

後は、Enable Automatic Deploysボタンを押してください。


Tip_07_01_001i

 

パイプラインの作成が完了しました。

パイプラインの設定画面を表示して、以下のように

PRODUCTION に Herokuで新規作成したアプリ名が表示されていることと、

指定したGitHubのリポジトリが表示されていることを確認し、

Connect to GitHubボタンを押してください。


Tip_07_01_001j

 

再度、Connect to GitHub の Search for a repository to connect toで

GitHubに登録したユーザー名が表示されていることを確認し、Searchボタンを押します。

先ほど作成したリポジトリ railssampleを選択してください。


Tip_07_01_001k

 

ここまで完了したら、画面上のメニューボタンを押して、Dashboard画面へ移動します。


Tip_07_01_001l

 

Dashboard画面から、先ほど作成したパイプラインを選択してください。


Tip_07_01_001m

 

パイプライン画面のPRODUCTIONの箇所に表示されているアプリの名前をクリックします。


Tip_07_01_001n

 

画面右上の Open appボタンを押します。するとブラウザが開きます。


Tip_07_01_001o

 

以下のように The page you were looking for doesn’t exist. と表示されますが、

私が作成したサンプルアプリがそのように作っているからです。

起動時のURLの末尾に以下を追加してみてください。

/hello/index


Tip_07_01_001p

 

Hello World !!! と表示されます。


Tip_07_01_001q

 

以上です。

Open appの直後に、The page you were looking for doesn’t exist. が表示されるのが気持ちわるい場合は、

publicフォルダに適当なindex.htmlファイルを置いておけば、起動時にそのページが表示されます。

 

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です