はじめに

皆さん、こんにちは。

本日よりRails勉強会を始めたいと思います。

学習前に必要な知識は?

本勉強会に参加していただく上で、Ruby on Railsの事前知識は不要です。

ただし、Rubyの基礎(変数の定義や型、条件分岐など)をある程度勉強していただくようお願いいたいします。

では始めていきましょう!

Cloud9を用意しよう

今回は、Clould9を使ってRailsのアプリを1から作る「環境構築」をやっていきたいと思います。

特にProgateなどからプログラミングの学習を始められた方は、自分の手で環境を構築するということをしていただきたいと思っています。

今まで環境構築をしたことがない方にとってはCluld9はとても便利なサービスなので、今回はこちらを使ってRailsのアプリを作っていきたいと思います。

Cluld9の導入

まずはClould9に登録するところから始めていきましょう。

まずはAWSのユーザー登録をしていきます。

AWSアカウントは登録してから12ヶ月の無料利用枠が用意されているので、こちらを利用していきます。
メールアドレスとパスワード、アカウントID、名前や住所などを登録していきます。

クレジットカードの登録もできれば行ってください。一部クレジットカードの登録がないと使えない機能があり、今回の教材にも含まれています。12ヶ月分の無料枠があるので課金の心配はございません。

登録した電話番号にSMSが送られてきます。SMSに書かれている認証番号を登録することで認証が完了し、サポートプランの選択画面に遷移します。

サポートプランの選択は、とりあえず無料の「ベーシックプラン」を選択していただければ問題ありません。

選択が完了したら、サインインをしましょう。AWSマネジメントコンソールの画面に遷移できればAWSに登録完了です。

Cloud9の環境構築

AWSのユーザー登録が完了したら、Cloud 9の導入をしていきましょう。

AWSにサインインすると、ページのヘッダー部分に「サービス」というメニューが出てきます。こちらをクリックしましょう。

クリックすると、サービス名が大量に出てきます。検索欄に「Cloud9」と入力して、Cloud9を見つけ出しましょう。

補足:
ヘッダーの右上に「東京」と書かれたメニューがあると思いますが、これはそのまま維持しておいてください。今後「本番環境」をAWSで作っていく上で重要になってきますので、そういうものだということを頭に入れておいてください。

黄色いボタンの「Create Environment」をクリックしましょう。

すると、Name environmentという画面にきたかと思います。新しい環境の名前を設定する画面です。

名前はお好きな名前を入れましょう。

Descriptionには説明文を入れる欄ですが、こちらは空欄で構いません。

Next Stepをクリックしてください。

Configure settingsでは環境設定を行いますが、このままで大丈夫です。

Next Stepをクリックしてください。

Review画面です。こちらが最後の画面です。

これで問題なさそうでしたら、「Create Environment」をクリックしましょう。

補足: 現場ではClould9はほぼ使いません。

Cloud9の初期設定

Cloud9の画面が開いたら、右上の歯車を押してください。

Project Settings画面が開きます。

こちらのCode Editor(Ace)にあるSoft Tabsを2に設定しましょう。

こちらはインデント(字下げ)機能です。2に設定すると字下げが2マス分に設定されるので、今回はこの設定で行います。

ちなみに、Cloud9は何かを設定すると即反映されるので、保存などは気にしなくて大丈夫です。

Ruby on Rails をインストール

Ruby on Rails をインストール

では早速Railsをインストールしましょう。

ターミナルに以下のコマンドを入力してください。以下のコマンドは、「Gemを使ってRailsをインストールしますよ」というおまじないです。Gemが何なのかは今後学習する中でわかってきますので、今はこのコマンドを実行するだけで大丈夫です。

$ printf "install: --no-document \nupdate: --no-document \n" >> ~/.gemrc

$ gem install rails -v 5.2.4

これでRailsが入りました。

Cloud 9 とは

Cloud9とは、IDEと呼ばれる統合開発環境の1つです。

統合開発環境とは、Webアプリケーションを開発する上で必要になる3つのものがあるのですが、それが1つにひとまとめにされた開発環境のことをいいます。

Cloud9の開発画面をみていただくと、以下の3つが表示されています。

  • 左側にファイルのツリー構造を表示する部分
  • 中央にエディターの画面(AWSのWelcome画面が見えているかもしれませんが笑 左側のタブからREADME.mdを開くと、文字を入力できる画面に切り替えることが出来ます)
  • 下側にターミナルの画面

この3点がWebアプリケーションを開発する上で必要になるものになります。特に初心者の方にとって、必要なものがすでに用意されているCloud9はおすすめの環境です。

では、アプリケーションを作っていきましょう。

Ruby on Railsのアプリを作ろう

アプリケーションを作る前に、「今どこのファイルにいるか」を一応確認をしておきましょう。

以下のコマンドで今いる場所がわかります。

 $ pwd

この結果が以下になっていることを確認してください。

 /home/ec2-user/environment

あまり無いかと思いますが、たまに以下の場所になっているパターンがあります。

 /home/ec2-user

もしそうなっている場合は、以下のコマンドでenvironmentに移動しましょう。

 $ cd でenvironment/

実行したら、以下のコマンドで正しい場所にいるか確認しましょう。

 $ pwd

確認できましたら、以下のコマンドを実行して新しいRailsプロジェクトを作成しましょう。

$ rails 5.2.4 new sample_app

このコマンドで色々実行されますが、Railsに必要なものを自動的に作成してくれています。

新しくコマンドを実行できる状態になったら、実行完了となります。

本当にRailsアプリを作成してくれたかどうかを確認するために、左側のファイルツリーにあるsample_appをクリックし、中身を見てみましょう。

中に「app」「bin」などのファイルがたくさんできていれば、アプリの基本的な部分が問題なく作成できているということになります。

それぞれのファイルがどんな役割を持つかは、これから少しずつ学んでいきます。

Gemfileとは

sample_appフォルダの中にあるGemfileというファイルを開きましょう。

たくさんの「gem」という文字と、色々な文字列、数字が並んでいるのが見れるかと思います。

こちらは「Gem(ジェム)」を管理するファイルとなります。

Gemとは、ざっくりいうと「便利機能」のようなものです。

「gem」の一番上をみていただくと'rails'になっていると思いますが、RailsもGemのひとつということになります。

そのほかにも'sqlite3'はデータベースを簡単に構築するための便利機能、'sass-rails'はscssというスタイルシートを管理する便利機能です。

そうした便利機能を一括して管理するファイルがGemfileです。

もう一度'rails'のGemを見ていただくと、'~> 5.2.4'という数字が振ってあります。こちらは、バージョンを管理しています。

最初に以下のコマンドを実行した際に、バージョンを指定しました。

 rails 5.2.4 new sample_app

こちらで指定したバージョンが、自動的にGemfileに反映されています。

一方で、'sqlite3'のようにバージョン番号が書かれていないものは、バージョンを指定しない設定となります。そうなると、最新のバージョンをとってきてくれます。

バージョン指定をする理由は、むやみに最新バージョンをとると今まで使えていた機能が使えなくなり、アプリが動かなくなることがあるからです。今の機能を維持したい、という場合は確実に動くバージョンを指定してあげます。

bundle installを実行

Gemfileのことについて説明をしましたが、実はまだこのGemはRailsアプリにインストールされていません。設定ファイルが作成されただけです。

これからインストールをしていきましょう。

まず、ファイルの確認をするために、ターミナルで以下のコマンドを実行してください。

$ ls

ここにsample_appというフォルダが表示されたら、以下のコマンドで移動します。

$ cd sample_app/

以下のコマンドを実行し、直下にGemfileというファイルがあるかどうか確認してください。
確認できましたら、以下のコマンドを実行してください。

$ bundle install

これでGemがインストールできました。

補足:
bundleとは、ひとつの機能です。この機能を使ってRailsのGemを管理し、インストールすることができます。

Gemをインストールする際はbundleを使ってインストールできる、というふうに覚えていただけると十分です。

補足:
GemのバージョンをGemfile上で変えた際、反映させるためのコマンドは以下です。

 $ bundle update

何か変更を加えたい際はこちらを実行して下さい。

補足:
エディター上での保存は、初期設定では自動保存はされません(設定で自動保存にすることが出来ます)。
ファイルタブに●が表示されていると、保存されていない変更があることを示しています。
これを保存するには、Mac OSでは ⌘ + Sキー、 WindowsではCtrl + Sキーで保存することが出来ます。

ブラウザで確認

Railsアプリをブラウザから見てみましょう。

以下のコマンドを実行し、サーバーを立ち上げます。

$ rails server

最後にUse Ctrl-C to stop という文字が返ってきたら、サーバーが立ち上がっているということになります。

この状態で、実際に見てみましょう。

Cloud9の画面上部にある「Preview」をクリックし、「Preview Running Application」をクリックしてください。

そうすると、ターミナルの横にブラウザ画面が出てきます。
接続が拒否されましたという画面になっていると思いますが、これはこここのタブでは表示できないよ、という仕様になっています。
ブラウザ画面の右上にある拡張ボタン(右斜め上の矢印ボタン↗️)をクリックしてみましょう。

ブラウザの新しいタブにRailsのブラウザ画面が表示されたかと思います。
そこに「Yay! You're on Rails!」と表示されたら、Railsがうまく立ち上がったことになります。おめでとうございます!

Git・GitHub

Gitとは

これからGitを導入して使っていきますが、まずはGitとは何かについてお話しします。

Gitとは、ひとことで言うとセーブ機能です。
開発をする際、コードを書いたり、消したり、変更を加えていきます。

開発していくにつれ、例えばエラーが起きてしまい、エラーが起きる前のコードに戻りたい場面が出てきます。

手動でコードを修正して元に戻すこともできるかもしれませんが、完璧に元に戻せる自信はないのではないでしょうか?

そういう時に、例えばゲームでいうとセーブポイントに戻れる機能があると便利ですよね。

ポケモンに例えると、伝説のポケモンを捕まえる前や四天王戦の前はセーブをしませんでしたか?

仮に伝説のポケモンを捕まえられなかったり、四天王戦に負けてしまった場合に、直前の状態に戻れるようにセーブをしていた方が多いのではないかと思います。

なにか失敗をする可能性があることをする前にセーブする機能がWeb開発でも使えたら便利ですよね。

何かコードを書く前に一旦今までの変更点をセーブしておくと、エラーが起きても戻れるし、実験的に実装してみることも出来ます。

ということから、Web開発では「セーブ」することが必須になってきます。

Web開発においては、このセーブ機能を「Git」を使って行っています。

では、このGitはどのよう使うことができ、どのような仕組みになっているかを見ていきましょう。

Gitの使い方

Gitの導入

最初にGitを導入するところから、初期化をしていきます。

半分おまじないですが、ターミナルで以下のコマンドを打ちます。

$ git init

以下のように表示されたら、初期化成功です。

Initialized empty Git repository in …/…/

以下のように表示された場合は「すでに初期化は終わっているけど、もう一回初期化したよ」という意味です。今までのGitの操作が全部初期化されてしまったわけではないのでご安心ください。

Reinitialized existing Git repository in …/…/

セーブをする

次に「いま何がセーブされていて、何がセーブされていないか」といった状況を確認するコマンドを紹介いたします。

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

$ git status

そうすると、Untracked filesという項目の中に、赤い文字で書かれているファイルの名前が並んでいると思います。

このファイルたちはアプリを作成するときに生成されたファイルです。赤字で表示されているのは、セーブされていないからです。

git addコマンド

これを全部セーブいたします。
ここは一旦こういうものだという風に覚えていただきたいのですが、以下のコマンドを打ちます。

$ git add  -A

これでどうなったかを見てみましょう。先程使った状況をを確認するコマンドを打ちます。

$ git status

緑色に変わっていればうまくいっています。一度メッセージを確認してみましょう。
 
git addを打つ前のログから見てみると、Untracked filesという項目のなかにファイル名が並んでいます。

git addを打った後のログを見ると、Changes to be committedという項目の中に、先ほどと同じファイルが並んでいます。
行数が変わっていると思いますが、ファイルの中身を展開しているためです。

例えばgit addを打つ前のログにapp/と表示されているファイルは、git addを打ったのちに表示されているログにはapp/の中身を全て表示しています。つまり同じものです。

git commitコマンド

また、git addを打った後のログに出ているChanges to be committedという文字は、これからコミット(commit)ようとしているよという意味です。

commitについて説明いたします。

commitとは、セーブコマンドです。
それに対してgit addは、このファイルたちをこれからセーブするよと宣言するコマンドです。

二度手間な感じはしますが、先に「これからこのファイルをセーブするよー!」と宣言した後に、にセーブコマンドを打つ流れになります。

では、実際にセーブしていきましょう。ターミナルで以下のコマンドを打ちます。

$ git commit -m "initial commit"

セーブできたかどうかを確認してみましょう。ターミナルで以下のコマンドを打ちます。

$ git status

ログにnothing to commit, working tree cleanと表示されると成功です。

このログの意味ですが、今セーブポイントにいるよ、セーブポイントからはなんのファイルも変更していないですよという意味になります。

これでセーブポイントができました。

セーブの状態を確認する

セーブの状態を見てみましょう。ターミナルで以下のコマンドを打ちます。

$ git log

先ほど1回セーブしたので、initial commitというメッセージが出ていると思います。

これでgitにコードをセーブ(commit)するという一連の流れが完了しました。

コミットメッセージとは

先程のgit commitコマンドを打つ際に入っていた-m "initial commit"という文字について説明します。

こちらはコミットメッセージと呼ばれるものです。

コミットメッセージとは、コミットする際に貼り付けるメッセージのことです。

ゲームでセーブをする際は特にメッセージは残さないことがほとんどだと思いますが、gitの場合はここにメッセージをつけることで「このセーブポイントはなにをした時のものなのか」というのをメモとして残すことができます。

今回initial commitというメッセージを残しましたが、これは最初のコミットという意味です。initial commitはよく使われるメッセージです。

この一連の流れはよく使う流れなので、ぜひ覚えてきましょう。ただ、コマンドまで細かく覚えようとしなくても大丈夫です。コマンドを忘れても検索すれば出てくるので、流れを覚えることが大切です。

ブランチの切り替え方

ブランチとは何かについては、gitについて他のところで学ばれている方が多いと思うので今回はあまり詳しく説明しません。

ここではブランチの切り替え方について説明をします。

まずは現在いるブランチを確認します。ターミナルで以下のコマンドを打ちましょう。

$ git branch

masterと出たかと思います。masterブランチにいるようですね。

このmasterブランチは、git initした際に作成されたブランチです。

では、試しに別のブランチを切ってみましょう。

developmentブランチを作成し、切り替えます。ターミナルで以下のコマンドを打ちましょう。

$ git checkout -b development

switched to a new branch 'development'というログが出てきましたら、新しくブランチが作成され、かつ切り替わったことがわかります。

現在いるブランチを確認してみましょう。

現在developmentブランチにいることがわかると思います。ここからはこのブランチで作業をします。

ブランチを分けるメリットとは

ブランチを分けて作業するとどんないいことがあるか補足いたします。

Gitのいいところはセーブができることの他に、複数で同時並行に開発することができるところがあります。

個人と複数人の開発のイメージを、ポケモンで例えます。

個人ですと、以下の流れを1人で行います。

ジム戦クリア → セーブ → 伝説のポケモンの直前 → セーブ → 伝説のポケモンGET → セーブ →四天王戦に行く → クリア → セーブ

複数人ですと、以下の流れができます。

ジム戦クリア → セーブ →
自分: 伝説のポケモンを捕まえに行く → GET → セーブ
友達: 四天王戦に行く → クリア → セーブ

ゲームですと自分のセーブデータと友達のセーブデータを合体させることはできませんが、GitではGitHubを使うことで合体することができます。

複数人で開発する共同開発では強力なツールになるという説明をしましたが、今回は共同開発はしないので、イメージだけ持っていただければ大丈夫です。

共同開発をするときに「そういえばGitってみんなのセーブデータを合体することができるんだっけ」「それってどうやるんだっけ」と思い出していただけると幸いです。

共同開発でのGitの使い方に関する記事はたくさんあるので、調べる足がかりなるかと思います。

GitHub

GitHubとは

GitHubとは、Webサービスのひとつです。Gitの情報をネット上に保存することができるサービスです。

GitHubを使うと、Gitのデータをバックアップすることができます。

現在、GitにcommitしているコードはCloud9だけの話になります。なので、もしCloud9が壊れたりしてデータが消えてしまった場合、書いたコードも無くなります。

ゲームでいうとセーブデータが全部消えてしまったようなものなので、1からやり直ししなければなりません。それは辛いですよね。

GitHubにデータを残しておくと、手元のデータがなくなってもGitHubからデータを引っ張り、復活させることができます。

まずはバックアップをしてみたいので、GitHubを導入していきます。

GitHubのアカウントを作成

まずはブラウザでGitHub検索しましょう。

github.co.jpと出ているサイトをクリックします。

GitHubのトップページに入れたかと思います。
まずはアカウントを作成したいので、ヘッダーにあるサインアップもしくは画面中央のGitHubに登録するボタンをクリックしてください。

Create your accountページが出てきたと思うので、順次メールアドレスやパスワードを登録をしましょう。

登録に成功すると、次はWelcome to GitHub ページが出てきました。
ここはアンケートのようなものなので、説明を省きます。

GitHubアカウントが作成されると、登録したメールアドレスにVerify your accountボタン付きメールが送信されたかと思います。 

そちらのボタンをクリックし、GitHubのページに遷移するとアカウントの認証が完了します。

これでアカウント作成は完了です。

GitHubでリポジトリを作成

GitHubアカウントが作成できたので、プロジェクトを作成していきましょう。

このGitHub上でもリポジトリを作成していきます。

ページの右上にアイコンをクリックしてください。すると「Your repositories」というメニューが出てくるので、こちらをクリックしてください。

次の画面でNewボタンをクリックしてください。

これで、新しいリポジトリを作成する画面であるCreate a new repositoryページが出てきます。

Repository nameにはプロジェクトの名前を入力します。今回はRailsアプリの名前と同じくsample_appと記入しましょう。

Railsアプリの名前と同じにしておけば見間違いが起きづらいですね。

Descriptionは説明文を記入する欄ですが、空欄で構いません。

PublicとPrivateの違いですが、公開するか非公開にするかの違いです。どちらでもいいですが、今回はPrivateにしてみます。

Initialize this repository withの部分は、何もチェックしなくてOKです。

最後にCreate repositoryボタンを押すと、リポジトリが作成されます。

ローカルリポジトリとGitHubのリポジトリをつなげる

ローカルリポジトリとGitHubのリポジトリをつなげていきましょう。

リポジトリが作成された画面で、HTTPSが選択されていることを確認してください。

HTTPSが選択されている横の欄にURLが表示されていると思いますが、このURLを使ってローカルとGitHubのリポジトリをつなげていきます。

ただ、GitHubはとても親切なので、リポジトリを繋げるための必要なコマンドをすでに用意してくれています。それがその下の…or create a new repository on the command lineというところです。

ここに載っているコマンドのうちgit branch -M masterのところまでは実行してあるので、git remote add origin URL部分から実行していきましょう。こちらのコマンドをコピーしてください。

Cloud 9に戻り、ターミナルで実行してください。

$ git remote add origin URL(URL部分は人によって異なります)

ログは何もないですが、問題ありません。

確認する手段としては、以下のコマンドで行えます。

$ git remote -v

ログにGitHubリポジトリのURLが表示されていれば完了です。

originとは

originとは、ローカル環境に対してGitHubのようにインターネットにアップロードされている場所のことです。

先ほどURL込みのコマンドを打ちましたが、毎回URLを指定してコマンドを打つのは大変ですね。

しかし、先程のURL付きのコマンドによってURLがoriginに代入され、次回からはoriginだけでコマンドを打つことができるようになります。

git pushコマンド

それでは、GitHubにアップロードしていきましょう。ターミナルで以下のコマンドを打ちます。

$ git push - u origin master

もしかしたら Username for 'https://…'といったログが出てきたかもしれません。ターミナル上でGitHubのログインを求められています。Usernameを入力しましょう。

GitHubのページのプロジェクト、もしくはアイコンのところをクリックするとアカウントのユーザーネームが出てくるかと思います。そちらを入力してください。

次に、パスワードを入力してください。パスワードの入力中はターミナルには表示されませんが、しっかり入力されています。入力し終わったらEnterをクリックしてください。

うまくいくとログが表示され、ログにremote: Resolving deltas: 100%, doneなどと表示されていればアップロード(プッシュ)が完了したことになります。

パスワードの入力失敗などで失敗した場合は、もう一度git pushコマンドを打ち直してください。

GitHubのページをリロードするとローカルリポジトリのファイルが反映されているかと思います。

これで完了です。

ここまででアプリの土台を作成し、GitHubにセーブすることができました。

補足: リポジトリとは

リポジトリとは、コードの保管場所のことで、フォルダのようなものです。

リポジトリにはローカルとリモートの2種類あります。ローカルリポジトリはこの場合Cloud 9のことで、リモートリポジトリは主にGitHub上に保存している場所のことです。

ローカルリポジトリのコミット情報をGitHub上にアップロードすることで、バックアップし保存することができます。

本番環境にデプロイ

本番環境へのデプロイとは

本番環境へのデプロイについて解説していきます。

本番環境へのデプロイとは、世界中のどこからでもアクセスできる状態にすることをいいます。

先程表示できるようにした、"Yay! You're on Rails!"と書かれたサイトは、このCloud 9上でしか表示させることができません。ためしにAWSにログインしていないPCでこのURLを検索しても表示されません。

現在は開発環境で動作させているため、自分しか見ることができません。しかし、最終的な目標としては自分が作ったウェブページを全世界に公開して他の人に使っていただくことになります。

今回はこの本番環境のデプロイのやり方についてご紹介いたします。今回使うサービスはHerokuというウェブサービスです。

Herokuとは、本番環境に簡単にデプロイができる環境を無料で用意してくれているサービスです。このHerokuにデプロイする際はGitを使います。

下準備

それでは本番環境へデプロイするための下準備を行います。

まず、現在の"Yay! You're on Rails!"と書かれたページを変更する必要があります。

実はこのページは開発環境でしか表示されません。本番環境で見ようとするとエラーが出てしまいます。

なのでここに"hello, world!"と書かれた仮のページを作成します。今回はコードの理解まではせず、写すだけで大丈夫です。コードの解説は次回以降に行います。

app/controllers/application_controller.rbを開いてください。このファイルの中を以下のように記述してください。

class ApplicationController < ActionController::Base
  def hello
    render html: "hello, world!"
  end
end

上書き保存してください。次にcongig/routes.rbを開いてください。このファイルの中を以下のように記述してください。

Rails.application.routes.drow do
  root 'application#hello'
end

これで先程の"Yay! You're on Rails!"と書かれたページを更新すれば、"hello, world!"と書かれたページが表示されるようになります。これで本番環境で表示できる画面を作ることができました。

Gemfileを修正する

次はデータベースのGemの修正を行います。sample_appの下の方にあるGemfileを開いてください。

この中でデータベースについて書かれたgem 'sqlite3'を変更していきます。このsqlite3は開発環境でしか使うことができません。なので本番環境で使える別のgemを用意していきます。それがpgと呼ばれるものになります。

Gemfileの下の方に以下のようなコードがあります。

group :test do
  gem ・・・
end

この下に以下のコードを追加してください。

group :production do
  gem 'pg'
end

これでproduction(本番環境)のgemを追加します。

さらにもともと書いてあるgem 'sqlite3'の場所も変更します。現在gem 'sqlite3'と書かれているコードを切り取り、下記のgroupに貼り付けてください。

group :development, :test do
  gem ・・・
  gem 'sqlite3'
end

これで開発環境(development)とテスト環境(test)ではsqlite3を使用し、本番環境(production)ではpostgresをしようする設定ができました。

バージョンとGemfile.lockの活用

他のgemを見ると、バージョンを指定しているのもがありますが、sqlite3にはバージョン指定がされていません。

なるべくバージョンは指定するようにしてください。バージョンを指定していない場合、bundle installをしたタイミングで最新版に変更されることがあります。gemによっては最新版になることで元々動作していたコードが動かなくなることがあります。

このような問題を避けるために、バージョンはなるべく固定して開発を進めていきましょう。現在使用しているバージョンは、Gemfile.lockを開くと見ることができます。

Gemfile.lockの中からsqlite3のバージョンを探し、Gemfileの中で以下のように指定していきます。

group :development, :test do
  gem ・・・
  gem 'sqlite3', '1.4.2'
end

他のバージョン指定についても少し紹介します。

以下のように書いてある場合、バージョン1.1.0以上を使用しているという意味です。

gem 'bootsnop', '>= 1.1.0

以下のように書いてある場合、バージョン3.0.5以上3.2未満を使用しているという意味です。

gem 'listen', '>= 3.0.5', '< 3.2'

以下のように書かれてある場合、ある程度のバージョンアップは許すという少し特殊な指定になります。

gem 'spring-watcher-listen', '~> 2.0.0'

bundle installを実行

ターミナルで以下のコマンドを実行してください。

$ bundle install

もしかすると、エラーが出た方もいるかもしれません。その場合、下記コマンドを実行してください。

$ bundle install —without production

これは、開発環境で使用しない本番環境(production)に関するgemはインストールしない、という意味です。このコマンドを実行することでうまくインストールができると思います。

Gitにコミット

変更した内容をGitにコミットしましょう。

まず、以下のコマンドで変更したファイルを確認します。

$ git status

変更するファイルを確認したら、以下のコマンドを実行してください。

$ git add -A

$ git commit -m "本番環境用の設定"

Herokuを導入

(Herokuコマンドが動かない場合は、補足を御覧ください)

それではCloud 9にHerokuの導入を行います。

まだこのCloud 9にはHerokuが導入されていないと思います。以下のコマンドで確認できます。

$ heroku --version

もしHerokuが導入されていれば、Herokuのバージョンが表示されます。表示されなければ導入されていません。

Cloud 9にHerokuを導入するには、以下のコマンドを実行してください。

$ source <(curl -sL https://cdn.learnenough.com/heroku_install)

導入されたかどうかを確認しましょう。以下のコマンドを実行してください。

$ heroku --version

Herokuのバージョンが表示されたら成功です。

Herokuアカウントを作成

次は、Herokuのアカウントの作成を行います。

GoogleでHerokuと検索し、Herokuの公式ページを開きます。右上の新規登録からアカウントの作成を行いましょう。

確認メールのURLからパスワードの設定をすると、アカウント作成は完了です。

heroku login を実行

Herokuのアカウントが作成できたら、Cloud 9に戻ります。

Cloud 9からHerokuにログインするために、以下のコマンドを実行してください。

$ heroku login

以下のようなメッセージが出てきたら、q以外のキーをなんでもいいので入力し、Enterを押してください。

heroku: Press any key to open up the browser to login or q to exit: 

そうすると画面がブラウザに切り替わり、Herokuのページに遷移します。あとはLog inボタンを押すと、ログインが完了します。

動作が止まって動かない場合は、Ctrl + cで実行を止め、下記コードで実行しなおします。

$ heroku login —interactive

次に、アカウント作成で登録したemailとパスワードを打ってください。

ログインが成功しましたら、下記コマンドを実行してください。

$ heroku create

これで本番環境の作成ができました。実行結果に載っているURLにの末尾がherokuapp.com/となっています。このURLが世界中のどこからでもアクセスできる本番環境のURLになります。

デプロイ

以下のコマンドを実行し、Herokuの情報が追加されていることを確認しましょう。

$ git remote -v

確認したHerokuの情報に向かってpushをします。以下のコマンドを実行してください。

$ git push heroku master

これで先程sample_appを編集してGitに保存した内容がHerokuにpushされます。

以下のコマンド実行するとHerokuにデプロイしたアプリを開くことができます。もし開けない場合は、URLをコピーして検索してみてください。

$ heroku open

"hello, world!"と書かれたページが表示されると成功です!

補足: Cloud9の便利機能「Got to Anything」

Cloud9の便利機能を一つ紹介します。

ファイルがどこにあるかわからないときは、画面左上のGot to Anythingから検索することができます。

heroku rename

最後にURLの変更方法をご紹介します。以下のコマンドで好きなURLに変更してみてください。ただし、半角英数字で記入してください。記号も使用できますが、アンダーバー( _ )は使用できません。

$ heroku rename (任意)

renameのあとは任意の文字を入力してください。

URLが他の人とかぶっていたり、文字が長すぎると変更はできません。
またmURLの変更に成功すると今まで使用していたURLは使えなくなります。

私は以下のように変更してみました。

$ heroku rename rails-sample-app-by-tatty

以下のコマンドで、新しいURLになっていることを確認してみましょう。

$ heroku open

Cloud9トラブル解決集

Cloud9で作業する際の困りごとを2つ解決していきます。

ターミナル画面の出し方

1つ目は、cloud9を開いたとき、画面下半分にターミナルが出ていない場合です。

この状態でもファイルを開くことはできますが、ターミナルを画面分割したほうが作業しやすい方もいると思います。

画面分割は、エディター左上部分にあるハンバーガーメニューを押すと分割方法が出てきます。今回は、左から2番目の縦2分割で作業を進めていきます。

画面分割ができましたら、下側の画面で+ボタンを押し、New Terminalを開いてください。これでターミナルを画面分割することができました。

別画面にフルスクリーンでターミナルを出す方法

一度画面下半分のターミナルを閉じ、フルスクリーンの状態に戻してください。

この状態でも+ボタンを押し、New Terminakを開くと、ターミナルを開けます。

また、画面分割をすることもできます。+ボタンの左に並ぶファイルやターミナルをドラックしてみてください。お好みの画面で作業を行っていきましょう。

VFS connection does not exitと表示される

2つ目の困りごとは、正しいrailsコマンドを打ち、ファイルも正しいにも関わらず、Preview Running Applicationを開くと "VIS connection does not exist"が表示される場合です。

これは、AWS側に問題がある場合があります。その場合、EC2と呼ばれるサーバーを再起動させましょう。以下の手順で行います。

  1. Cloud9で必要なファイルはすべて保存し、一度タブを閉じてください。
  2. AWSの公式ページを開き、画面右上のコンソールにサインインを押します。
  3. AWSマネジメントコンソールと書かれたページに移動できましたら、EC2と検索して開いてください。
  4. EC2のページが開けましたら、画面左側にあるインスタンスを押します。
  5. 現在EC2のインスタンスが1つあり、インスタンスの状態がrunningになっていると思います。これを再起動します。
  6. 左側のチェックが選択されている状態にして、アクション→インスタンスの状態→停止を押してください。確認画面が表示されますが、停止を押してください。
  7. インスタンスの状態がstoppedになります。
  8. 先程作業をしていたCloud9を開いてください。


これで再起動することができます。

動作確認

ターミナルを開き、以下のコマンドを実行し、Preview Running Applicationを開きましょう。

$ cd sample_app/

$ rails server

Cloud9のファイル上ではうまく表示ができないのでファイル右上の別タブで表示するボタンを押してください。正しく表示されたと思います。

他にも作業をしていてエラーが出ることはたくさんあるかと思います。

エラーを解決する方法の基本は、Googleで調べることです。おそらくあなたと同じ悩みを持っていた人が解決方法を投稿していると思いますので、色々調べながら解決していきましょう。

おわりに

今回はCloud9を使用したRuby on Railsの環境構築から、Hello Worldを表示するアプリの作成し、デプロイするところまで行いました!

次回はアプリの構造について説明します!

今回の勉強会はここまでです。お疲れ様でした!

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事