More than 5 years have passed since last update.

開発環境全般 Advent Calendar 2015

🔰初めての、クラウドを利用してRuby on Railsを動かすまで（Cloud9、GitHub、Heroku）

Last updated at 2015-12-26Posted at 2015-12-15

対象読者

初心者向け。HTMLが少し分かること。
クラウド(Paas)に興味がある。
WEBアプリケーションを簡単に作成したい。
Ruby on Rails のアプリケーションを作ってみたい。
少しPHP,classicASPなどのプログラム経験があるが初心者。

本記事の概要

本記事で紹介するのはWEBブラウザのみを利用してRuby on Railsのアプリケーション開発（超簡単なブログ）から本番環境の移行までを行うものです。
GitHubアカウトを作るところから、スマホで確認するまで、画像付きで細く手順を記載してます。多少知識のある方には退屈な内容かも知れません。

筆者環境

ブラウザ　Google Chrome バージョン 47.0.2526.106 (64-bit)
Mac OSX El Capitan
MacBook Pro (13-inch, Early 2011)
プロセッサ 2.3 GHz Intel Core i5
メモリ 4 GB 1333 MHz DDR3

※WEBブラウザのみを利用します。Safali、IEでも問題ないと考えてますが、検証しておりません。OSはあまり関係ないと考えてます。

ご挨拶

こんにちわ
普段はJavaEEやASP.netなどを中心にオンプレミス環境での企業向けの業務アプリケーション開発を行っている者です。業務でRedmineやGitを利用し始めた事をきっかけにRuby on RailsやGitHubに興味を持ちました。
初めてクラウド環境で自分の作りアプリケーションを動かすまでに断片的にいろいろな情報を調べて苦労しました。

私が利用している環境構築の手順を🔰初めての方向けに掲載します。ちょっと長いですが順番にやっていただければ自分で作ったアプリケーションをスマホなどで使えるようになるはずです。

ここで紹介するのはWEBブラウザのみを利用してRuby on Railsのアプリケーション開発（超簡単なブログ）から本番環境の移行までを行うものです。

Cloud9というクラウド上のIDE（統合開発環境）から簡単なRuby on Railsのアプリケーションを作成しGitHub（クラウド上のGitリポジトリ）の自分のリポジトリにPUSH（アップロード）してHeroku（クラウド上のアプリケーション実行環境、DBも。）にRuby on Railsのアプリケーション配置するまでを紹介します。

まだ不慣れなことが多く誤っているところがあるかも知れません。初心者です温かい目で見てあげてください。

完成図

ごちゃごちゃしてすみません大事なところは、蛍光ペンのクラウド部分と、赤ペンのGit部分です。こういうイメージですが間違ってるかもしれません。

1.GitHubのアカウントを作成する。

下記サイトにアクセスして、名前（HideakiSaitoなど）、メールアドレス、パスワード入れて[Sign up for GitHub]をクリック。
https://github.com/

サインアップができたら下記の画面に遷移するので、右端のアイコンからプロフィールへ移動。

自分のリポジトリ(プログラムの変更履歴のデータベースの様な感じ)が表示されます。最初は空っぽです。リポジトリを作成していくと下記のように表示されます。

2.Cloud9へGitHubアカウントでログインする。

下記サイトへ行って GitHubアカウントで入ります。　GitHubのマークをクリックしてください。
https://c9.io/

GitHubアカウントで入ることができます。最初は空っぽだと思います。これから[+]で新規のワークスペースを作っていきます。その前に。

左のサイドバーで「Repositories」をクリックするとGitHubのリポジトリ一覧が出てきてクローンを行う（プログラムに必要なファイルやフォルダと、変更履歴のデーターベースをローカル環境に作ってくれる）ことができます。Cloud9を利用するとMacやWinodwsのローカル環境で開発してるリポジトリがGitHubにあれば、どこでも、いつでも開発できます。（PCとネット環境が必要です。ipadやiPhoneでも無理すればできなくないですが。残念。）

3.Cloud9で新しいワークスペースを作る。

ワークスペースに戻り、[+]のボタんをクリックします。
ワークスペース名＝アプリ名が良いかと考えてます。とりあえずhelloworldとしてます。

次に開発するテンプレートを選択します。
Ruby on Railsをやりたいので下の段の左から２番目を選択します。目移りしたくなりますが、とりあえず「RAILS」をクリックしてください。

少し待つと、Ruby on Railsのプロジェクト（フォルダやファイル）が作成されIDE(統合開発環境）の画面が表示されます。ここまでの環境構築をMacのローカル環境で行うのは初心者の私には大変でした。GitHubのアカウント作って、Cloud9でテンプレート作るまではあっという間だと思います。

4.Cloud9でRuby on Railsのアプリケーションを作成し動かす。

とりあえず　Ruby on Railsのアプリケーション　を動かしてみる。

メニューバーの「Run Project」をクリックします。

「Ruby on Rails」ウィンドウが新しく開き、少し待つと下のようなメッセージが出力されてポップアップが表示されます。ポップアップのハイパーリンク（下記例だと https://hellowolrd-hideakisaito.c9users.io/ )をクリックします。

下の画面が出ればとりあえず「Ruby on Rails」動いたことになります。「Ruby on Rails」に何もコーディング（プログラミング、ソースコードを書くファイルを編集すること）していないと表示される画面です。iphoneなどでも確認することが可能です。

scaffold コマンドでなんちゃって日記アプリの雛形作る。

日記アプリケーションを作るとして。下記の仕様を考えます。

ユーザ１人に　対して　複数ぺージを持てること。
ユーザ情報は、名前（文字列）、性別（数字）、誕生日（日付）を持つ。
ぺージ情報は、タイトル（文字列）、本文(文字列)、登校日（日付＋時間）、公開設定（真偽値ーYes or No）を持つ。
ぺージ情報は、どのユーザのぺージかわかるようにする（ユーザから見たら1:多の関係）

まずは下記コマンドを「bash-"あなたの名前"」ウィンドウ（以下ターミナル）に打ち込んで実行してみてください。　※MVCやRailsの説明は割愛します申し訳ありません。

rails g scaffold user name:string gender:integer birthday:date

rails g scaffold article title:string body:text post_date:datetime is_public:boolean user:belongs_to

だだだとファイルが作成されます。ユーザ情報をDBへ作成するためのファイルや、ユーザ情報を扱うMVCのそれぞれのファイルが左のファイルツリーに表示され、ターミナルにログが表示されます。ユーザ情報を扱う基本的なファイルが全て作られました。

またファイルがだだだと作成されて同じようにぺージ情報を扱うarticleのファイルが作られました。※下記のスクリーンショットは誤字があります。上記のコマンドを打ってもらえば大丈夫です。

下記のようにscaffoldで作成された情報はそのモデル（情報？）の複数系の文字列をルート/model複数系　で参照するルール（決まり、レールの由来？）となってます。
https://hellowolrd-hideakisaito.c9users.io/users

早速みてみると赤い画面でエラーが表示されます。これはDB作成情報を実行してないからDBがないよう、 bin/rake db:migrate RAILS_ENV=development　してください。と書いてあります。そう思ってます。

下記コマンドを実行します。ターミナルに打ち込んでください。いろいろ端折ってますが大丈夫です。データベース及びテーブル間の関連も作成されます。

rake db:migrate　

そうすると先ほどのURLから一覧、詳細、登録、更新、削除が利用できるようになります。
https://hellowolrd-hideakisaito.c9users.io/users

追加してみる。

id は自動的に連番が付けらる。

記事の方も書いてみます。下記URLへ行って新規作成。userにはそのユーザ情報のidを入れてください。各テーブル間の関連はidで行うのがルールです。
https://hellowolrd-hideakisaito.c9users.io/articles

この記事のユーザ情報のモデルの参照が表示されています。これだとイマイチなので

ここでちょこっと作成したファイルを修正してみます。
app/views/articles/index.html.erb の　２４行目を

24: <td><%= article.user %></td>

↓

24: <td><%= article.user.name %>
        birthday Is <%= article.user.birthday %></td>

そうすると、この記事のユーザ情報から名前と誕生日を取得して表示します。＜％＝記事.ユーザ.名前％＞でH.Saitoが表示されるってことですね。ORマッピングのいいとろこです。他にもRubyはこう言った直感的でelegantな記述ができるプログラム言語として有名らしいです。他の言語と較べてクセがありますが

以上です。
Ruby on Rails についてはたくさん素晴らしいサイトがあるので別途調べてみてください。

ここまでにGitHubのアカウント作ってから、数回クリックして、３回コマンド叩いて、ソースを１行直しただけでできました。
私はタイプミスして何度かやり直してますけど。。覚えるのでコマンドは叩くことをお勧めします。

5.Cloud9でGitのリポジトリを作る。

ターミナルで次のコマンドを入力。 git init

ターミナルで次のコマンドを入力。 git add .
git commit -m "first commit"

とりあえず、gitのリポジトリはできました。
以上です。
Git についてはたくさん素晴らしいサイトがあるので別途調べてみてください。

6.GitHubでリモートリポジトリを作る。

手順1.で確認したGithubのYour profileを開きます。例えば下記です。
https://github.com/HideakiSaito/
右のアイコンの隣にある「＋」ボタンを押して[New repository]をクリックします。

リポジトリの作成画面が開くので、リポジトリ名を適当に「例ではhellowold」
説明欄を適当に「例では初めての・・・」Publicにすると全ての人に公開されます。
Privateは確か有料です。。必要事項が入力し終わったら「Create repository」ボタンをクリックします。

（空の）リポジトリが作成され、クイックセットアップ画面が表示されます。

この時点でGitHubにリポジトリができました。

7.GitHubへCloud9からプッシュする。

上記の３段目、下図の２行のコマンドをコピーします。ご自身のリポジトリパスをコピーしてください。下記ご参考

git remote add origin https://github.com/HideakiSaito/hellowolrd.git 
git push -u origin master

Cloud9のターミナルに張り付けます。間違うと面倒なので張り付けてください。

ユーザ名とパスワードが聞かれるので答えてください。うまくいくとプッシュが成功してGitHubのリモートリポジトリにソースが送信されます。

GitHubで先ほど作ったリポジトリをみてください。例えば
https://github.com/HideakiSaito/hellowolrd

Cloud9で作成したソースと同じものがGitHub上にも配置されました。

8.Herokuのアカウントを作成する。

下記サイトへ
https://www.heroku.com/
中央下の[SIGN UP FOR FREE]ボタンをクリック。

必要事項を入れて[Create Free Account]ボタンをクリックします。

若干手順が違うかもしれませんが、自分のダッシュボードを開きます。最初は空です。ここがアプリの本番環境として利用する場所です。５個まで無料でアプリを作れます。いろいろ制限ありますが、趣味の範囲でプログラムする分には十分です。

左のサイドバーにある四角が６個並んだボタンを押して「Docs]などで確認できますが、Herokuでは下記言語をビルド、デプロイができます。Cloud9側でもサポートしているものだとRuby on Rails以外にも、PHPやPython,Node.jsなどがあります。

9.Herokuで新しいアプリケーションを作成する。

ダッシュボードの右上「＋」ボタンをクリックします。

名前を決めますが、Heroku上でカブらない名前である必要があるので適宜考えてください。こだわりなければアカウント＋連番とか。[Create App]をクリックします。

10.Herokuの設定をする。Githubに接続しリポジトリを参照する。

アプリが作成されると下記の「デプロイ」管理画面が表示されます。真ん中の「GitHub]をクリックします。

接続されると２段目にGitHubのリポジトリ検索画面が出るのでとりあえず「Search」ボタンをクリックします。先ほど作ったリポジトリを選んで「Connect」ボタンをクリックします。

接続されるとこんな感じです。

自動デプロイ設定を有効化します。[Enable Automatic Deploys]ボタンをクリックします。下図は押した後です。

接続設定は以上です。

11.Heroku上でデプロイする。

デプロイ画面の一番下に「Deploy Branch」ボタンがあるのでクリックします。

少し待つとエラー画面が出て失敗します。Herokuで稼働できるように設定や、修正が必要です。ここではSqlite3がサポートできないと言ってます。Postgresql に利用するDBを変更します。

12.Cloud9からHerokuで稼働させるための準備をする。

Cloud9で下記行います。若干ややこしくなりますが頑張ってください。

ファイル /Gemfile を開きます。７行目をコメントアウトにします。　#　がRubyではコメントアウトです。
#gem 'sqlite3'
ファイル /Gemfile の８行目あたりに下記コピペします。pgがPostgreSQLを利用するgem(宝石、Rubyのライブラリ)になります。

### H.saito Add >>>>>>>>>>>>>>>>>>>>>>>>>>>>
gem 'pg'
gem 'rails_12factor', group: :production
gem 'puma'
### H.saito Add <<<<<<<<<<<<<<<<<<<<<<<<<<<<

こんな感じです。

ターミナルで下記コマンドを打ちます。
bundle install
こんな感じで。

うまくいくとこんなです。

ターミナルで下記コマンドを打ちます。
sudo su - postgres
createuser ubuntu -dslP
パスワードが２回聞かれるので、とりあえず下記入力します。ちゃんとしたパスワードを入れてください。
password
ターミナルで下記コマンドを打ちます。
exit
こんな感じです。ここが失敗すると厄介です。

ファイル /config/database.yml を開いて全部消します。sqlite3を利用すための定義に成ってるので、下記コピペしてください。

default: &default
  adapter: postgresql
  encoding: SQL_ASCII
  pool: 5
  username: ubuntu
  password: password
  
development:
  <<: *default
  database: hellowolrd_development
  
test:
  <<: *default
  database: hellowolrd_test

production:
  <<: *default
  encoding: unicode
  database: hellowolrd

最初はこうなってますが、全部消します。

こうなります。パスワードは適宜。

ターミナルで下記コマンドを打ちます。
rake db:create
rake db:migrate
PostgreSQLにデータベースを作り、テーブルなどを構築します。うまくいくと下図のような感じです。

Run Project ボタンをクリックしてアプリケーションの確認します。
https://hellowolrd-hideakisaito.c9users.io/
データベースを切り替えたので、以前作ったデータはありません。

ターミナルで次のコマンドを入力。 git add .
git commit -m "change db postgresql"
git push -u origin master

こんな感じです。

GitHubのユーザ名、パスワードを聞かれるので入力してプッシュが成功するとこんな感じ。

GitHubを見てみます。コミットの履歴を参照します。
先ほどのデータ変更の詳細を確認します。

コミット時の -m "コメント"ではソースの変更内容がわかるようにします。

「change db postgresql」をクリックすると下記のように前回のコミットとの変更差分が表示されます。

Herokuを見てみます。自動デプロイが動いていれば少し待ちます。Build Succededのメッセージの他にいろいろ出てますが正常終了するはずです。お疲れまでした！
Heroku側でもPostgrSQLの初期設定が必要なので、、、もう一息です。

13.Cloud9からHerokuコマンドを使いRailsの初期設定等を行う。

**ここは自分のHerokuのアプリケーションのリポジトリのURLです。ご注意ください。**下記はサンプル。
Herokuのステータス画面からGit URLを調べて下記のようなコマンドをCloud9のターミナルで打ちます。

git remote add heroku https://git.heroku.com/hidepon3110c.git

画面の下の方のハイライトしているところです。

下記コマンドをターミナルで打ちます。
git remote -v
こんな感じです。

リモート先に、origin heroku　を確認したら。
下記コマンドをターミナルで打ちます。herokuコマンドを使うための準備が始まります。
heroku
こんな感じです。少しインストールするので時間がかかります。

下記コマンドをターミナルで打ちます。
heroku login
herokuアカウント作成で使ったメールアドレス、パスワードが聞かれますので答えてください。

下記コマンドをターミナルで打ちます。heroku run の後ろは普段ローカルで使うコマンドだと考えて大丈夫だと思います。
heroku run rake db:migrate

これでHeroku側にもデータベースの準備ができました。

14.iphoneやMacからHerokuに配置したアプリケーションの稼働確認。

Herokuを確認して、右上の・・・を縦にしたアイコンから[Open app]ボタンをクリックします。

ルーティングエラーが発生してます。

ローカル環境と違って設定しない場合はエラーが出るようですので。/usersをつけて再度確認します。例えば
https://hidepon3110c.herokuapp.com/users

でました！
新規追加して確認してみます。

HelloWolrd!

iphoneなどで下記のサイトにアクセスして、hidepon3110cの部分を自分のアプリケーション名に変えてみてください。
https://hidepon3110c.herokuapp.com/users

見れましたか？お疲れさまでした！

終わりに

いかがでしたか？
この記事ではプログラムの重要な部分や、仕組みについては割愛させていただきました。

実際にちゃんとしたアプリケーショんを作成するには
Ruby on Rails、Ruby、Git、HTML、CSS、JavaScript、unix/linuxのシェル(bash)、オブジェクト指向やMVCの考え方、RDB(PostgreSQL,MySQL,,,)とSQLなどの知識が適宜必要ですね。。。