LoginSignup
112

More than 5 years have passed since last update.

🔰初めおの、クラりドを利甚しおRuby on Railsを動かすたでCloud9、GitHub、Heroku

Last updated at Posted 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はあたり関係ないず考えおたす。

ご挚拶

こんにちわ :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をやりたいので䞋の段の巊から番目を遞択したす。目移りしたくなりたすが、ずりあえず「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 コマンドでなんちゃっお日蚘アプリの雛圢䜜る。

日蚘アプリケヌションを䜜るずしお。䞋蚘の仕様を考えたす。

  • ナヌザ人に 察しお 耇数ぺヌゞを持おるこず。
  • ナヌザ情報は、名前文字列、性別数字、誕生日日付を持぀。
  • ぺヌゞ情報は、タむトル文字列、本文(文字列)、登校日日付時間、公開蚭定真停倀ヌ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: <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のアカりント䜜っおから、数回クリックしお、回コマンド叩いお、゜ヌスを行盎しただけでできたした。 :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からプッシュする。

䞊蚘の段目、䞋図の行のコマンドをコピヌしたす。ご自身のリポゞトリパスをコピヌしおください。䞋蚘ご参考

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

若干手順が違うかもしれたせんが、自分のダッシュボヌドを開きたす。最初は空です。ここがアプリの本番環境ずしお利甚する堎所です。個たで無料でアプリを䜜れたす。いろいろ制限ありたすが、趣味の範囲でプログラムする分には十分です。
img

巊のサむドバヌにある四角が個䞊んだボタンを抌しお「Docs]などで確認できたすが、Herokuでは䞋蚘蚀語をビルド、デプロむができたす。Cloud9偎でもサポヌトしおいるものだずRuby on Rails以倖にも、PHPやPython,Node.jsなどがありたす。
img


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

ダッシュボヌドの右䞊「」ボタンをクリックしたす。
img

名前を決めたすが、Heroku䞊でカブらない名前である必芁があるので適宜考えおください。こだわりなければアカりント連番ずか。[Create App]をクリックしたす。
img


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

アプリが䜜成されるず䞋蚘の「デプロむ」管理画面が衚瀺されたす。真ん䞭の「GitHub]をクリックしたす。
img

接続されるず段目に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 を開きたす。行目をコメントアりトにしたす。 # がRubyではコメントアりトです。
#gem 'sqlite3'
ファむル /Gemfile の行目あたりに䞋蚘コピペしたす。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
パスワヌドが回聞かれるので、ずりあえず䞋蚘入力したす。ちゃんずしたパスワヌドを入れおください。
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アプリケヌションを構築できるが、ちゃんずしたものを䜜るには他にもいろいろ芚えるこずがある。
  • 回目以降は簡単にアプリケヌションをアップできるようになる。はず。

参考蚘事

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でスクリヌンショットは、[コマンドキヌ]  [シフトキヌ]  []
遞択範囲を遞ぶずデスクトップにトリミングされた圢でPNGが䜜成される。この蚘事䜜成で必芁になり初めお知りたした。䟿利。

:sweat_smile: Tips

画像のアップロヌド先ずしお https://www.flickr.com/ を利甚しおたす。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
112