AWS上のRailsでFullCalendarを使うまで

以下のサイトを参考に、AWSのEC2上で環境構築してみたので手順を残す。
Ruby on Railsとfullcalendar pluginでGoogleカレンダークローンを作る(1)

1. EC2の設定＆起動

• こちらの記事などを参考に、EC2インスタンスを作成し起動する。
• 上記セキュリティグループの設定（≒ファイアウォールの設定）で、"inbound"に以下を設定しておくこと。

Protocol	Type	Port range	Source
SSH	TCP	22	Anyware[0:0:0:0]
Custom TCP Rule	TCP	3000	Anyware[0:0:0:0]

2. yum update及び、必要パッケージの追加

yum updateしておく。

$ sudo yum update

あとで必要となるパッケージ一式をインストールしておく。

$ sudo yum install ruby ruby-devel gcc gcc-c++ sqlite-devel

3. bundlerのインストール

SSHクライアントの画面で以下のコマンドを実行する。

$ gem install bundler

4. railsプロジェクトの作成

新規プロジェクトフォルダ(calendar)を作成し、初期化しておく。

$ mkdir calendar $ cd calendar $ bundle init

Gemfileが作成されるので、これを開き下記の変更(2行)を行う。

Gemfile

# A sample Gemfile
source "https://rubygems.org"

gem "rails"              <--コメントを外す
gem "io-console"         <-- 追加する

gemをインストールする。

$ bundle install --path vendor/bundle

以下のコマンドを実行する。

$ bundle exec rails new .

参考：システムのgemにrailsをインストールせずrails newする

5. fullcalendarプラグインの導入

Gemfileに、以下の２つの変更を行う。

• therubyracerのコメントアウトを外す

gem 'therubyracer', platforms: :ruby

• io-console,fullcalendar-railsの追加

gem 'io-console' gem 'fullcalendar-rails'

gemのインストール

$ bundle install

以下のメッセージが出る場合は、bundle updateを実行する。

:(省略) Running `bundle update` will rebuild your snapshot from scratch, using only the gems in your Gemfile, which may resolve the conflict.
　↓
$ bundle update

6. カレンダーを表示させる

bundle exec rails g controller calendar index

生成されたテンプレートにカレンダー表示の行(1行)を追記する。

app/views/calendar/index.html.erb

<h1>Calendar#index</h1>
<p>Find me in app/views/calendar/index.html.erb</p>

<div id=calendar></div>        <-- 追記する

以下のファイルを新規に作成する。

app/assets/javascripts/calendar.js

$(document).ready(function() {
    $('#calendar').fullCalendar({
    })
});

以下のファイルに行を追加する。

app/assets/javascripts/application.js

　：（省略)
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require fullcalendar　　　　<-- この行を追加（挿入)
//= require_tree .

以下のファイルに行を追加する。

app/assets/stylesheets/application.css

　：（省略)
 *
 *= require fullcalendar　　　　<-- この行を追加（挿入)
 *= require_tree .
 *= require_self
 */

アプリケーションの起動

bundle exec rails s

以下のサイトにアクセスする。

http://(EC2のURL):3000/calendar/index

おしまい。

動作確認時のバージョン

• Amazon Linux

Amazon Linux AMI 2014.03.2

• ruby

ruby 2.0.0p451 (2014-02-24 revision 45167)

• gems (bundle listの結果)

`Gems included by the bundle:

• actionmailer (4.1.5)
• actionpack (4.1.5)
• actionview (4.1.5)
• activemodel (4.1.5)
• activerecord (4.1.5)
• activesupport (4.1.5)
• arel (5.0.1.20140414130214)
• builder (3.2.2)
• bundler (1.7.0)
• coffee-rails (4.0.1)
• coffee-script (2.3.0)
• coffee-script-source (1.7.1)
• erubis (2.7.0)
• execjs (2.2.1)
• fullcalendar-rails (1.6.4.0)
• hike (1.2.3)
• i18n (0.6.11)
• io-console (0.4.2)
• jbuilder (2.1.3)
• jquery-rails (3.1.1)
• json (1.8.1)
• libv8 (3.16.14.3)
• mail (2.5.4)
• mime-types (1.25.1)
• minitest (5.4.0)
• multi_json (1.10.1)
• polyglot (0.3.5)
• rack (1.5.2)
• rack-test (0.6.2)
• rails (4.1.5)
• railties (4.1.5)
• rake (10.3.2)
• rdoc (4.1.1)
• ref (1.0.5)
• sass (3.2.19)
• sass-rails (4.0.3)
• sdoc (0.4.1)
• spring (1.1.3)
• sprockets (2.11.0)
• sprockets-rails (2.1.3)
• sqlite3 (1.3.9)
• therubyracer (0.12.1)
• thor (0.19.1)
• thread_safe (0.3.4)
• tilt (1.4.1)
• treetop (1.4.15)
• turbolinks (2.2.3)
• tzinfo (1.2.2)
• uglifier (2.5.3)
  `