LoginSignup
10
11

More than 5 years have passed since last update.

[初心者向け]Cloud9で五分でできる、"Yay! You’re on Rails!"

Posted at

はじめに

この記事でも書いたんですけど、1からローカルで環境を構築するの、結構大変なんです。
例えばRailsの場合、Rubyをダウンロードしたり、パスを通したり…。コードを書くまえに面倒なことが多い!自分は早くRailsを触って見たいのに…
そんな時に使えるのが、総合開発環境、IDEです!

五分で"Yay! You’re on Rails!"まで行く!多分!(AWSアカウントは持っている前提で)

総合開発環境とは

  • IDE(Integrated Development Environment)と呼ばれる。
  • 開発する時に必要な道具を、一式揃えてくれている。
    • ターミナル
    • エディター(実際にコードを打ち込むところ)
    • 実行結果の画面
    • などなど
  • 環境がすでに作られているものをブラウザ上で操作できる。
    • やったことある人はProgateをイメージするといいかもしれません。
  • 初心者がコードを書き始める時に便利!
    • ただし、その分自分でいじれない部分もあるので、慣れてきたらローカルで動かせるようになろう。

Cloud9とは?

スクリーンショット 2018-03-25 16.34.26.png

  • 総合開発環境(IDE)の一つ。
  • 現在はAWSの中に組み込まれている。
  • Railsチュートリアルに出てきたので、使ってみることに
    • 参考記事

さっそく使ってみよう!

AWSのアカウントを作ろう。

  • 画面の指示に従って作りましょう。(既に持っている人はもちろん大丈夫です)
  • 公式サイトはこちら
  • 作成時にクレジットカード番号が必要ですが、うっかりハイスペックなサーバーを長時間動かしたりしなければ、無料枠の範囲でで済みます。
    • AWSに「請求」という項目があってここで自分がいくら分使用しているか見ることが出来ます。

Cloud9にチャレンジ!

AWSの検索窓からCloud9と検索してCloud9のページへ。

ダッシュボードに行けたら"Create environment"で新たに環境を作りましょう。
スクリーンショット 2018-03-25 17.53.36.png

Nameに自分の好きな名前をいれて…スクリーンショット 2018-03-25 17.56.21.png

ここら辺の設定はデフォルトのままでOK
スクリーンショット 2018-03-25 17.56.58.png

最後に確認画面で"create environment"を押して、ちょっとだけ待つと…
スクリーンショット 2018-03-25 18.10.07.png

統合開発環境が作れました〜!

Cloud9でRailsアプリを起動させよう。

さて、さっそくRailsのアプリを作成して起動させてみましょう。
現在の画面の下の方にある枠がターミナルの部分です。ここにコマンドを打ち込めます。
まず、Railsの新しいアプリケーションを作成します。

$ rails new test_app

もう既にRubyやRailsは入っているので、これでappやconfigなど、いつものRailsファイルが作成されます。

あとはアプリのディレクトリに移動してサーバーを起動すれば…

$ cd test_app
$ rails s
=> Booting Puma
=> Rails 5.1.5 application starting in development 
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.11.3 (ruby 2.4.1-p111), codename: Love Song
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:8080
Use Ctrl-C to stop

このように表示されれば成功!サーバーが起動しました。

アプリが起動していることを確認しよう。

上の方にある"Preview"のボタンを押してください。
スクリーンショット 2018-03-25 18.19.27.png

すると、右下にブラウザが表示されます。ここでこのブラウザを新しいウィンドウで表示させてあげましょう。
下記のボタンです。
スクリーンショット 2018-03-25 18.21.50.png

すると(わくわく)…

スクリーンショット 2018-03-25 18.23.17.png

出来ましたね!Yay! You’re on Rails!

最後に

ここまでくればコードを書き始めることができます。
楽しいRails開発ライフを!!

10
11
4

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
10
11