2018-08-09

【AWS】CodeStar + Cloud9でRuby on Railsの開発環境を構築するまとめ

AWS Ruby on Rails

ども。久しぶりの更新です。年始にprogateってサービスでプログラミング学んでから、気が向いたときにRuby on Railsで遊んでるのですが、開発環境作りに結構手間取ったのでAWSのCodeStar+Cloud9でRuby on Railsを動かす方法についてまとめておきたいと思います。同じように悩む人が少しでも少なくなれば嬉しいです。

なお、この記事は2018年6月17日に書いたものであり、その後のAWS側の変更次第では以下の通りに実施しても動かない可能性があるのでご了承ください。

１．AWS上でCodeStar,Cloud9登録
２．Cloud9の設定
３．その他の注意点
- ３－１．EC2インスタンスは自動で停止しないことがある
- ３－２．ディスク使用料が無料枠を超えていないか注意
４．最後に

１．AWS上でCodeStar,Cloud9登録

１－１．Cloud9利用可能リージョン選択

まずは、Cloud9が利用可能なリージョンを選択します。残念ながら日本(東京、大阪)リージョンは利用不可なので、ここではオレゴンリージョンを選択します。

対応しているリージョンは以下を参照していただければと思います。

リージョン - グローバルインフラストラクチャ | AWS

f:id:gattsu09:20180617091934p:plain

１－２．CodeStarで新規プロジェクト作成

続いて、サービスを選択して、「開発者用ツール」の「CodeStar」を選択します。

f:id:gattsu09:20180617091939p:plain

AWS CodeStarの画面が表示されるので「新規プロジェクトの作成」を選択します。

f:id:gattsu09:20180617091942p:plain

１－３．Ruby on Rails(EC2)選択

そのあと、いろいろ開発環境の候補が出てくるので、ここでは「Ruby on Rails,Amazon EC2」を選択します。

f:id:gattsu09:20180617091946p:plain

１－４．プロジェクト名とソース保存レポジトリ選択

プロジェクト名（ここでは「RubyProject」と入力）を決めて、ソース保存レポジトリを選択します。アカウントを持ってる場合は、日経曰く「設計図共有サイト」らしいGitHubを選択すればよいと思います。僕は持ってないのでAWS CodeCommitを選択しました。

f:id:gattsu09:20180617091950p:plain

で、「プロジェクトを作成する」ボタンを押しましょう。

f:id:gattsu09:20180617091955p:plain

１－５．キーペア選択

ログインに利用する、キーペアを選択します。過去にキーペアを作成したことない場合は、サービスから「EC2」－「N個のキーペア」－「キーペアの作成」を選べば作成できます。

f:id:gattsu09:20180617091959p:plain

１－６．コード編集方法選択

コードの編集方法をせんたくします。ここでは当然「AWS Cloud9」を選択します。

f:id:gattsu09:20180617092003p:plain

１－７．EC2のタイプ選択

EC2のタイプを選択しましょう。無料枠で納めたい場合は「t2.micro」を選択します。

f:id:gattsu09:20180617092009p:plain

１－８．待ち

ようやく登録が完了して、セットアップが始まります。青色の２つの丸がくるくる回っているので15分くらい待ちましょう。そのうち緑色に変わればセットアップ完了です。

f:id:gattsu09:20180617092013p:plain

１－９．サンプルアプリ表示

緑色になったら、「アプリの表示」をクリックすると、サンプルアプリが表示されます。

f:id:gattsu09:20180617092017p:plain

なんか凄い

f:id:gattsu09:20180617092022p:plain

１－１０．Cloud9表示

横の「コーディングの開始」を選択するとCloud9の画面に遷移します。ブラウザだけでここまでできるとか、この先の世の中ネイティブアプリとか無くなるんじゃないのって思っちゃいますね。

f:id:gattsu09:20180617092026p:plain

CodeStar + Cloud9の登録は以上となります。

２．Cloud9の設定

続いて、Cloud9の設定に移ります。Cloud9のRuby on Railsは何故か以下の問題を抱えているので、こちらで設定してあげないと動きません。環境変数はともかく、他はマジでなんでなんだろう。

・gem listコマンドの結果とGemfileの内容が一致しない。

・Ruby on Railsプロジェクトのディレクト配下にbinフォルダが存在しない。

・SECRET_KEY_BASE環境変数の設定がされていない。

２－１．Gemfileの内容にgem listを合わせる

[2018/8/9追記]

以前はGemfileの内容とgem listとでrailsバージョンの表示結果が異なっていたのですが、本日確認したところ両方とも5.2.0になっており解消されていました。代わりに何故かSqliteのバージョンが異なっているため、bundle installはどのみち必要みたいです。

つーわけで、一つづつ解消していきます。Gemfileってのはgem(rubyのパッケージを管理するツール)の依存関係を管理するファイルらしいです。ジェムって読むらしいですね。ずっとゲムだと思ってた。

Cloud9はデフォルトでGemfileのパッケージ内容と実際に導入されているパッケージに差分があるためコマンドとかが上手く動きません。本当になぜなんだ…。

この問題を解消するために、Cloud9の下側にあるターミナル画面で「bundle install」コマンドを実行します。その前に、プロジェクトのフォルダに移動するのを忘れないでください。エラーになります。

ec2-user:~/environment $ cd rubyproject
ec2-user:~/environment/rubyproject (master) $ bundle install

The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Fetching gem metadata from https://rubygems.org/.........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies.....
Fetching rake 12.3.1
Installing rake 12.3.1

＜略＞

なお、Rails系のコマンドはプロジェクトフォルダ内で実行しないと概ねエラーになります。ターミナルを新規起動する度移動する必要があるので注意しましょう。

２－２．binフォルダ作成

続いて、以下コマンドでbinフォルダを作成します。

ec2-user:~/environment/rubyproject (master) $ rake app:update:bin

できた。

ec2-user:~/environment/rubyproject (master) $ ls -ltr bin
total 20
-rwxr-xr-x 1 ec2-user ec2-user 782 Jun 17 05:03 update
-rwxr-xr-x 1 ec2-user ec2-user 920 Jun 17 05:03 setup
-rwxr-xr-x 1 ec2-user ec2-user 90 Jun 17 05:03 rake
-rwxr-xr-x 1 ec2-user ec2-user 141 Jun 17 05:03 rails
-rwxr-xr-x 1 ec2-user ec2-user 129 Jun 17 05:03 bundle

２－３．SECRET_KEY_BASE環境変数設定

このままだと、rails起動に必要な「SECRET_KEY_BASE」という環境変数が設定されていないため、プレビュー画面を見ても以下のエラーが発生してしまいます。

Puma caught this error: Missing `secret_key_base` for 'development' environment, set this value in `config/secrets.yml` (RuntimeError)

というわけで設定していきましょう。以下のコマンドを実行すると「SECRET_KEY_BASE」環境変数に値が入って、ちゃんと起動するようになります。

$ rake secret > ~/.taskapp_secret_key_base
$ cat ~/.taskapp_secret_key_base
＜長い文字列が表示される＞
$ export SECRET_KEY_BASE=`cat ~/.taskapp_secret_key_base`

毎回実行するのがめんどくさい場合は、「.bash_profile」にexportコマンドを登録してあげればよいです。

$ vi ~/.bash_profile

以下を登録して保存。

export SECRET_KEY_BASE=`cat ~/.taskapp_secret_key_base`

２－３．Ruby on Rails起動

以下コマンドでRailsを起動します。progateの時と違って開発環境ではバインドするIPを指定するフラグが必要らしいです。

rails s -b $IP

２－４．動作確認

以上でCloud9の設定は完了です。では、progateででてきた「rails generate controller home top」コマンドをプロジェクトフォルダ(ここでは「rubyproject」)配下で実行して表示を確認してみます。

$ rails generate controller home top
create app/controllers/home_controller.rb
route get 'home/top'
invoke erb

＜略＞

Cloud9の「Preview」から「Preview Running Application」を選択します。

f:id:gattsu09:20180617143758p:plain

何故か真っ白なプレビュー画面が表示されるので、左上のボタンをクリックします。

f:id:gattsu09:20180617143942p:plain

ブラウザの別タブにRailsのプレビュー画面が表示されるので、アドレスの後ろに「/home/top」と入力します。

f:id:gattsu09:20180617144246p:plain

デフォルトでcssの設定がされてあるので、色ついてますが表示されました。設定は以上になります。

３．その他の注意点

その他、CodeStar+Cloud9を使用する際の注意点を書いてみます。主に料金系ですね。その他、思いついたら追記していきます。

３－１．EC2インスタンスは自動で停止しないことがある

Cloud9は30分操作しないとEC2インスタンスを自動で停止する機能があるのですが、なぜかたまに停止してくれないことがあります。起動したままにしておくと、思わぬ料金が発生することがあるので注意しましょう。

３－２．ディスク使用料が無料枠を超えていないか注意

CodeStar+Cloud9で環境を作るとEC2インスタンスが自動で２つ作成されます。それぞれのインスタンスに8GBのディスクが割り当てられており、それだけで16GB使ってしまいます。無料で使用できるディスクは30GBまでなので、無料内で納めたい場合は、作る環境は一つまでにしておきましょう。

４．最後に

以上でこの記事は終わりです。一応、初めての方でもわかりやすいように書いたつもりなのですが、「わからない」「書いてる通りにやっても動かない」とかあれば見直すので教えていただければと思います。

また、有識者の方々におきましては、誤っている点や、もっと良い手順があれば優しく指摘していただければ嬉しいです。

ではでは、サクッと環境を作ってプログラミングを楽しみましょう！

2018-06-27

AWS Cloud9でTwitter認証(omniauth)ログインをテストした際にハマった点と解決方法

ども。引き続きRuby on Railsで遊んでるのですが、今回はTwitter認証によるログインでハマった点と、その解決策について書いていきます。

そもそもTwitter認証とは

Webサービスにログインするときに、昔はメールアドレス＆パスワードを入力してログインしてましたが、昨今はTwitterやFacebook経由でログインできるアレです。

Twitterの場合、↓のような画面を経由してログインできます。サービス利用者側はいちいちメルアドとパスワード入れなくてもログインできて楽というものがありますが、作る側としてはメルアドみたいな個人情報を保持しとかなくても良いっていうのは結構メリット大きいなと感じてます。
f:id:gattsu09:20180627225027p:plain

Ruby on Railsでの設定方法

2018年6月27日現在、以下Qiita様の記事の通り設定すれば後述するエラーが発生した箇所以外はうまく行きました。感謝。
qiita.com

ハマった箇所

そんで、先述したQiita様の記事に従い設定し、いざTwitterログインのリンクをクリックしたところ、以下エラーが発生しました。

調べたところ、Twitter開発用のページでアプリ登録を行う際に設定する際のコールバック用URLが誤っているときに出るエラーの模様。

403 Forbidden
Extracted source (around line #236):
             
    self.token_request(http_method, uri.path, token, request_options, arguments)
  when (400..499)
    raise OAuth::Unauthorized, response
  else
    response.error!
  end

解決方法

元記事では、ローカルで動かす場合はWebsite、及びCallbackには「172.0.0.1:3000」と書く必要があるとの記載があり、この通りに設定していました。が、これが良くなかった模様。（まぁ、後から考えてみればローカル環境ではないので、あたりまえなのですが…）

https://apps.twitter.com/app/new で設定をする。ローカルで動かすときのためにWebsiteにはhttp://localhost:3000 ではなく、http://127.0.0.1:3000 と書かないとうまく行きません。
あと、Callback URLはhttp://127.0.0.1:3000/auth/twitter/callback にしておく。
ここで取得できるAPI KeyとAPI Secretは後々使うのでメモしておく。

具体的には、「http://localhost:3000」の部分をCloud9のプレビュー画面に表示されるURLに置き換えて設定すればTwitter認証ログインに成功しました。

・以下赤枠部分をコピーし、
f:id:gattsu09:20180627231806p:plain

・Twitterのアプリ登録画面の「Website」と「Callback」に張り付ける。「Callback」にはURLの後ろに「/auth/twitter/callback」を記入する。
f:id:gattsu09:20180627233351p:plain

で、うまく認証画面が表示されました。些細なことなのですが、色々調べても同じ事象の記事がみつからず3時間ほど試行錯誤してようやく認証画面に辿り着きました…。同じように迷っている方の参考になれば幸いです。

2018-06-24

合格体験記　応用情報技術者試験

ども。３度目の正直になるのですが、ようやく応用情報技術者試験に合格しました。これから受けられる方は、かっこよく一発合格した体験記の方が参考になるかと思いますが、まぁ、２回落ちたからこそ書けることもあるだろうと、受かるまでのアレコレを残しておこうと思います。

受験日

2018年4月15日

スコア

１回目（不合格）：
午前：68
午後：48

2回目（不合格）：
午前：72
午後：58

3回目（合格）：
午前：77.5
午後：68

勉強時間

120時間くらい（概算）

使用テキスト・アプリ

応用情報技術者　合格教本
 応用情報技術者　一門一答問題集
 応用情報技術者試験　午後の重点対策
 IPA 独立行政法人情報処理推進機構：過去問題

勉強方法

１回目

不合格となった１回目ですが、勉強期間は１か月くらい。過去問と解説書である「応用情報技術者　合格教本」を使用し、過去２年分（４回）の過去問をひたすら解き、わからないところ（大体わからない）は、解説を読む。それでも理解できない場合はWebで調べるを繰り返しました。それを３周くらい行い繰り返した上で、IPAで公開されている直近の過去問を解いたところ午前については７，８割程とれました。

問題の午後についてですが、同じく「応用情報技術者　合格教本」を使用し過去問を解くを繰り返しました。しかし、選択問題である午前問題と違い、午後問題は「○○について30文字以内で答えよ」というような問題が多く、答え合わせしたところで「テキストの解答とニュアンスは有ってるんだけど正解もらえるかわからない」といった感じが多かったです。まぁ、なんとかなるかなーと思って試験に挑みましたが上述の通り撃沈。

２回目

同じく不合格となった２回目の勉強期間は２週間くらい。午後に特化して勉強したかったので、新たに「応用情報技術者試験　午後の重点対策」を購入。またスマホアプリである「応用情報技術者　一門一答問題集」をiphoneに入れました。午前の問題は出勤時間(往復３時間くらい…）にひたすらスマホアプリで解き、仕事が終わった後２時間くらいは机の前でしっかりと午後問題を解くを繰り返しました。

「応用情報技術者試験　午後の重点対策」は、題名の通り午後に特化した問題集で、問題の解き方、時間をかけるべき問題、そうでない問題が懇切丁寧に説明されています。特に上述した「○○について30文字以内で答えよ」というような問題に対しては、問題文の用語を用意ること、文字数にあまり固執しないこと等、目からうろこな感じの解説が多く、大変参考になりました。…が、午後２点不足で不合格。単純に勉強時間不足でしたね。

３回目

ようやく合格した３回目は、２回目と同じことを追加で２週間行いました。午後問題は受ける年によって、結構難易度がかわるのですが今回は特に簡単な方だったかなと思います。なんにしても、受かってよかった。

所感

今から振り返ると、勉強期間はしっかり２か月とる。午後は最初から「応用情報技術者試験　午後の重点対策」を使って勉強する。を実施していれば１発合格できたかなーと思います。（期間が長いとなかなか、やる気スイッチが入らないんですよねぇ。）

肝心の試験内容についてですが、ネットワークやデータベース、プログラミングにセキュリティと広く、そこそこ深い内容となっています。ただし、概念や用語の内容が主になっており、この試験に合格したところで、実際にサーバを立てれるようになったり、プログラミングで何か作れるようになるわけでは無く、そこらへんは、ネットワークならCCNA、LinuxならLPIC等々ベンダー試験の方が強いなーと感じました。

ただ、いわゆるIT業界についての知識を横断的に学習できるのはこの試験くらいなので、視野を広げる意味でよい勉強になりました。これから受験を考えている方も、普段は専門に特化した勉強、および実務を行っているかと思いますが、自分の裾野を広げる意味でもチャレンジする価値はあるかと思います。

2018-06-21

【Ruby on Rails】Checkboxの値を配列としてコントローラに渡し、チェックがついている値だけDBに保存する方法

AWS Ruby on Rails

ども。最近、趣味で毎晩Ruby on Railsで遊んでいます。twitterの100日間なにかしらコード書いていこうぜっていう趣旨の#100DaysofCodeという企画に乗っかってて、なんとか100日間継続してやっていきたい感じです。んで、本日は6日目になるのですが、振り返りも大事だろうということで、直近で学んだことをまとめておきたいと思います。

なお、この記事は最初にこの記事を知ってればもっと楽だったのにな…という観点で3日前の僕(progateのRuby on Railsを一周したレベル)を想定読者として書いています。

Checkboxのチェックがついている値だけを取得する

というわけで、記事タイトルで書いてますが、Cehckboxのリストに対し、チェックがついている値だけをDBに保存する方法について書いていきます。

Checkboxの値を配列に格納する

では、早速ですがCheckboxの値を配列に格納していきます。Ruby on Railsでチェックボックスを使う場合、check_boxというタグを使います。（ほかにもcheck_box_tagというのもありますが、ここでは説明を割愛します。）

check_boxの書式は以下の通りです。他オプションとか詳しいことはrailsドキュメントとかを見てください。

<%= check_box "オブジェクト名","プロパティ名" %>表示名

んで、オブジェクト名に指定した文字列へ、二次元配列として「"プロパティ名"、"チェック状況(0 or 1)"」が格納されます。具体例として、以下のように記述すれば…

<%= form_tag("/posts/like") do %>
  <ul>
    <li><%= check_box "gamelist", "マリオ" %>マリオ</li>
    <li><%= check_box "gamelist", "ゼルダ" %>ゼルダ</li>
    <li><%= check_box "gamelist", "カービィ" %>カービィ</li>
  </ul>
  <input type="submit" value="投稿">
<% end %>

「gamelist」という配列に、「マリオ」「ゼルダ」「カービィ」とそれに対応するチェック状況が格納されます。

f:id:gattsu09:20180621000441p:plain

上記状態だと、以下のように、それぞれのタイトルに対しチェック無しの場合は「０」、有りの場合は「1」が二次元配列に格納されます。

＜gemelist配列内容＞
　マリオ,0
　ゼルダ,1
　カービィ,0

コントローラでチェックがついている値だけDBに格納

後は、form_tagで定義している/posts/likeeに対するコントローラファイルを以下の通りに定義し、チェックがついている値だけを取り出します。（ルールファイルの定義は適切にされているものとします。）

def like
  # params:[gamelist]で配列の値を取得可能。
  # 二次元配列の場合、受取先の変数を2つ宣言する。下記例では、
  # di1がタイトル、di2がチェックボックスの状態(0 or 1)が格納される。
  params[:gamelist].each do | di1,di2 |

    # チェックボックスにチェックがついている場合
    if di2 == "1"
      # DBのtitleカラムにタイトルを格納し保存
      @get_game = GetGame.new(title:di1)
      @get_game.save
    end
  end 
  redirect_to("/posts/index")
end