GitHub
Heroku
初心者
RubyOnRails
cloud9

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

More than 3 years have passed since last update.


対象読者


  • 初心者向け。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はあまり関係ないと考えてます。


ご挨拶

こんにちわ :smiley:

普段はJavaEEやASP.netなどを中心にオンプレミス環境での企業向けの業務アプリケーション開発を行っている者です。業務でRedmineやGitを利用し始めた事をきっかけにRuby on RailsやGitHubに興味を持ちました。:kissing_heart:

初めてクラウド環境で自分の作りアプリケーションを動かすまでに断片的にいろいろな情報を調べて苦労しました。 :weary:

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

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

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

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



完成図

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

dekiagari



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

下記サイトにアクセスして、名前(HideakiSaitoなど)、メールアドレス、パスワード入れて[Sign up for GitHub]をクリック。

https://github.com/

スクリーンショット 2015-12-08 21.47.02.png

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

スクリーンショット 2015-12-08 22.39.39

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

自分のリポジトリ



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

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

https://c9.io/

cl9start

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

cl9workspac

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

cl9repo



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

ワークスペースに戻り、[+]のボタんをクリックします。

ワークスペース名=アプリ名が良いかと考えてます。とりあえずhelloworldとしてます。

img

次に開発するテンプレートを選択します。

Ruby on Railsをやりたいので下の段の左から2番目を選択します。目移りしたくなりますが、とりあえず「RAILS」をクリックしてください。

img

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

img



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


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

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

img

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

img

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

img


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

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



  • ユーザ1人に 対して 複数ぺージを持てること。


  • ユーザ情報は、名前(文字列)、性別(数字)、誕生日(日付)を持つ。


  • ぺージ情報は、タイトル(文字列)、本文(文字列)、登校日(日付+時間)、公開設定(真偽値ー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のそれぞれのファイルが左のファイルツリーに表示され、ターミナルにログが表示されます。ユーザ情報を扱う基本的なファイルが全て作られました。

img

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

img

下記のようにscaffoldで作成された情報はそのモデル(情報?)の複数系の文字列をルート/model複数系 で参照するルール(決まり、レールの由来?)となってます。

https://hellowolrd-hideakisaito.c9users.io/users

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

img

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

rake db:migrate 

img

そうすると先ほどのURLから一覧、詳細、登録、更新、削除が利用できるようになります。

https://hellowolrd-hideakisaito.c9users.io/users

img

追加してみる。

img

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

img

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

https://hellowolrd-hideakisaito.c9users.io/articles

img

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

img

ここでちょこっと作成したファイルを修正してみます。

app/views/articles/index.html.erb の 24行目を

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

↓

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

birthday Is <%= article.user.birthday %></td>

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

img

以上です。

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

ここまでにGitHubのアカウント作ってから、数回クリックして、3回コマンド叩いて、ソースを1行直しただけでできました。 :grin:

私はタイプミスして何度かやり直してますけど。。覚えるのでコマンドは叩くことをお勧めします。 :laughing:



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

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

img

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

git commit -m "first commit"

img

とりあえず、gitのリポジトリはできました。

以上です。

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



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

手順1.で確認したGithubのYour profileを開きます。例えば下記です。

https://github.com/HideakiSaito/

右のアイコンの隣にある「+」ボタンを押して[New repository]をクリックします。

img

リポジトリの作成画面が開くので、リポジトリ名を適当に「例ではhellowold」

説明欄を適当に「例では初めての・・・」Publicにすると全ての人に公開されます。

Privateは確か有料です。。必要事項が入力し終わったら「Create repository」ボタンをクリックします。

img

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

img

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



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

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



git remote add origin https://github.com/HideakiSaito/hellowolrd.git

git push -u origin master



img

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

img

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

img

GitHubで先ほど作ったリポジトリをみてください。例えば

https://github.com/HideakiSaito/hellowolrd

img

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



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

下記サイトへ

https://www.heroku.com/

中央下の[SIGN UP FOR FREE]ボタンをクリック。

img

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

img

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

img

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

img



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

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

img

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

img



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

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

img

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

img

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

img

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

img

接続設定は以上です。



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

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

img

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

img



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

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

ファイル /Gemfile を開きます。7行目をコメントアウトにします。 # がRubyではコメントアウトです。

#gem 'sqlite3'

ファイル /Gemfile の8行目あたりに下記コピペします。pgがPostgreSQLを利用するgem(宝石、Rubyのライブラリ)になります。

### H.saito Add >>>>>>>>>>>>>>>>>>>>>>>>>>>>

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

こんな感じです。

img

ターミナルで下記コマンドを打ちます。

bundle install

こんな感じで。

img

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

img

ターミナルで下記コマンドを打ちます。

sudo su - postgres

createuser ubuntu -dslP

パスワードが2回聞かれるので、とりあえず下記入力します。ちゃんとしたパスワードを入れてください。

password

ターミナルで下記コマンドを打ちます。

exit

こんな感じです。ここが失敗すると厄介です。

img

ファイル /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

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

img

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

img

ターミナルで下記コマンドを打ちます。

rake db:create

rake db:migrate

PostgreSQLにデータベースを作り、テーブルなどを構築します。うまくいくと下図のような感じです。

img

Run Project ボタンをクリックしてアプリケーションの確認します。

https://hellowolrd-hideakisaito.c9users.io/

データベースを切り替えたので、以前作ったデータはありません。

img

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

git commit -m "change db postgresql"

git push -u origin master

こんな感じです。

img

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

img

GitHubを見てみます。コミットの履歴を参照します。

先ほどのデータ変更の詳細を確認します。

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

img

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

img

Herokuを見てみます。自動デプロイが動いていれば少し待ちます。Build Succededのメッセージの他にいろいろ出てますが正常終了するはずです。お疲れまでした! :laughing:

Heroku側でもPostgrSQLの初期設定が必要なので、、、もう一息です。:sweat_smile:

img



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

ここは自分のHerokuのアプリケーションのリポジトリのURLです。ご注意ください。下記はサンプル。

Herokuのステータス画面からGit URLを調べて下記のようなコマンドをCloud9のターミナルで打ちます。

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

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

img

下記コマンドをターミナルで打ちます。

git remote -v

こんな感じです。

img

リモート先に、origin heroku を確認したら。

下記コマンドをターミナルで打ちます。herokuコマンドを使うための準備が始まります。

heroku

こんな感じです。少しインストールするので時間がかかります。

img

下記コマンドをターミナルで打ちます。

heroku login

herokuアカウント作成で使ったメールアドレス、パスワードが聞かれますので答えてください。

img

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

heroku run rake db:migrate

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

img



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

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

img

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

img

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

https://hidepon3110c.herokuapp.com/users

img

でました!

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

img

HelloWolrd!

img

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

https://hidepon3110c.herokuapp.com/users

見れましたか?お疲れさまでした! :grin:


終わりに

いかがでしたか?

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

実際にちゃんとしたアプリケーショんを作成するには

Ruby on Rails、Ruby、Git、HTML、CSS、JavaScript、unix/linuxのシェル(bash)、オブジェクト指向やMVCの考え方、RDB(PostgreSQL,MySQL,,,)とSQLなどの知識が適宜必要ですね。。。 :scream:

いっぱい覚えることはありますが、自分で作ったアプリケーションがスマホで動くところまで出来れば楽しいものですよね。 :relaxed:


まとめ


  • GitHub と Cloud9があればとりあえずWEBアプリケーションを作って動かせる。

  • Herokuを本番環境として利用するにはデータベースをPostgreSQLに変更する。

  • 手順通りでWEBアプリケーションを構築できるが、ちゃんとしたものを作るには他にもいろいろ覚えることがある。

  • 2回目以降は簡単にアプリケーションをアップできるようになる。はず。


参考記事

Ruby on Rails 関係

http://techacademy.jp/magazine/5910

http://railstutorial.jp/

http://railsdoc.com/

Ruby 関係

https://www.ruby-lang.org/ja/

Git 関係

http://www.backlog.jp/git-guide/


:smile: Tips


Rails自体の環境構築の勉強や、Vimというテキストエディタに慣れるためMacのローカル環境でRuby on Railsの開発を行うことも多いです。


:smile: Tips


Macでスクリーンショットは、[コマンドキー] + [シフトキー] + [4]

選択範囲を選ぶとデスクトップにトリミングされた形でPNGが作成される。この記事作成で必要になり初めて知りました。便利。


:sweat_smile: Tips


画像のアップロード先として https://www.flickr.com/ を利用してます。