Ruby on Rails をcloud9上に環境構築してアプリケーションを立ち上げるまでの手引書

# Ruby on Rails とCloud9
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/0e420644-1c9e-0259-8891-7961767d1d80.png)

Ruby on Rails は、RubyでWebサービスを簡単に開発するためのフレームワークです。

またAWSのCloud9(クラウドナイン)での開発というのは、ネット上のもう一つのパソコンでプログラミングをするようなイメージです。

Cloud9のメリットは複数人でプログラミングができるとか、サーバーさえあればどこでもプログラミングができるとかいろいろあります。

個人的に思ったメリットとして、環境構築がとても簡単に終わるので初心者の方にもおすすめです。

この記事ではクラウド9の環境を新たに作成するところから、Ruby on Rials の環境構築までの手順を簡潔にまとめましたので、細かい説明はいらないから手順だけ知りたいという方はご覧ください。

筆者は備忘録として使っていこうと思います。

# 参考にしたサイト

今回はこちらのサイトを参考にしました。細かい解説はこのサイトに載っていますので、気になる方はご覧ください。

https://railstutorial.jp/chapters/beginning?version=6.0#fig-cloud9_gemfile

# 準備

前提条件として、AWSのアカウントは作成しているものとします。

AWSにログインして、cloud9の画面まで行ってください。(AWSのホーム画面の検索欄で「cloud9」と検索すれば出てくると思います。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/0c6ff7c8-ec6a-59c9-4a68-7babd005331c.png)

# Cloud9 の新規環境作成

Cloud9の画面からCreate environmentをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/3bff535c-ad2c-0cc2-5882-ebc1b71258f5.png)

プロジェクトの名前を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/1f50c300-bf6f-addc-9d3c-8604f51c6303.png)

PlatformをUbuntuに設定してまたNaxt step
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/69dceb3c-1469-f9d2-1621-671c5a3fd86a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/0fd6d93e-3221-b02f-d275-e8cba687dab0.png)

最後にCreate  environment
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/5e6f738e-c2eb-e3f5-3ecb-7aaf3f712f07.png)

# Ruby on Rails の環境構築

次にCloud9でRuby on Railsを導入します。
Cloud9のターミナルの、environmentディレクトリでコマンドを打っていきます。
まずインストール時間を短縮するため、Rubyドキュメントの設定を追加します。
~~~:ターミナル
echo "gem: --no-document" >> ~/.gemrc
~~~
バージョンを指定してRailsをインストールします。
~~~:ターミナル
gem install rails -v 6.0.4
~~~
bundlerのバージョンを指定してインストールする
~~~:ターミナル
gem install bundler -v 2.2.17
~~~
Cloud9環境のディスク容量アップと、クラウドIDEへのYarnインストール
~~~:ターミナル
source <(curl -sL https://cdn.learnenough.com/resize)
~~~
続けて
~~~:ターミナル
source <(curl -sL https://cdn.learnenough.com/yarn_install)
~~~
~~~:実行結果
========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================
~~~
もし上記のような警告が出たら言われた通りに
~~~:ターミナル
yarn install --check-files
~~~
を実行しましょう。

ではここから新たなアプリケーションを立ち上げます。今回はtokuposuというアプリケーションを作成します。
~~~:ターミナル
rails _6.0.4_ new tokuposu
~~~
作成が終わるまで待ちます。

作成できたらGemfileの内容を一新させ、Rubyのバージョン番号を削除します。
~~~:Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

gem 'rails',      '6.0.4'
gem 'puma',       '4.3.6'
gem 'sass-rails', '5.1.0'
gem 'webpacker',  '4.0.7'
gem 'turbolinks', '5.2.0'
gem 'jbuilder',   '2.9.1'
gem 'bootsnap',   '1.10.3', require: false

group :development, :test do
  gem 'sqlite3', '1.4.1'
  gem 'byebug',  '11.0.1', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  gem 'web-console',           '4.0.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.1.0'
  gem 'spring-watcher-listen', '2.0.1'
end

group :test do
  gem 'capybara',           '3.28.0'
  gem 'selenium-webdriver', '3.142.4'
  gem 'webdrivers',         '4.1.2'
end

# Windows ではタイムゾーン情報用の tzinfo-data gem を含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
~~~
ここからは作成したtokuposuディレクトリでコマンドを入力していきます。
~~~:ターミナル
cd tokuposu
~~~
bundle installを実行してgemをインストールします。
~~~:ターミナル
bundle update
~~~
~~~:ターミナル
bundle _2.2.17_ install
~~~
Yarnを使ってWebpackerをインストールします。
~~~:ターミナル
rails webpacker:install
~~~
何回か聞かれるoverwriteは全て「y」で答えましょう。

最後にローカルWebサーバーへの接続を許可します。config/environments/development.rbファイルの最後に次のコードを追加します。
~~~ruby:config/environments/development.rb
# Cloud9 への接続を許可する
  config.hosts.clear
~~~

# 接続確認

ローカル環境で接続できるかを確認します。
画像の順番でクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/c6e3f702-09f3-45d4-e5de-414a107d41a4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/ec94ff22-7c8e-b8fa-ccca-363c0f24edac.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/1f761d5f-51e1-4545-bd55-f5ff5e9c2ef8.png)
これが表示されたら接続成功です！