Cloud9でRails6の準備

このレッスンでは、開発環境であるCloud9にRailsをインストールしてアプリの作成を行い、アプリ開発の為の環境を構築します。

吉田先生

Railsのインストール・サーバの起動や停止など、Cloud9で行うRailsアプリ制作の為に必要な基本を身につけましょう！

• Cloud9でRails5.2の準備
• Railsをインストールする

開発環境を作成する

最初に、environment(ワークスペース)というアプリの開発環境を作成してRailsをインストールします。

１．AWS Cloud9の場合は、Create environmentというボタンをクリックします。

environmentの設定に進みます。

２．environment（アプリ制作を行う作業場所）の設定を行います。

name（作業場所の名前）には「NewsableProject」Description（作業内容についての説明）には「ニュースを発信共有するサイトです」と入力します。

３．設定画面内の、Next stepをクリックします。

AWSの方では以下のような設定の画面が表示されます。Rails6の場合はUbuntuを選択するようにしてください。他のバージョンはデフォルトの状態です。Next stepをクリックしてください。

４．Create environmentというボタンをクリックします。

5. ワークスペースが立ち上がります。

以下のような画面の後にワークスペースが起動します。

これで、Cloud9を使う準備はOKです。

Rails6のインストールをする前の準備

次はいよいよRailsのインストールです。にRailsのインストールは、ターミナルにコマンドを入力して行います。Cloud9ではフォルダの作成や、文言の追加・削除などあらゆる指示にコマンドを使用します。

コマンドとはCloud9に対して「フォルダを作ってね」「削除してね」などの指示を伝える為の特別な呪文のようなものです。また、ターミナルとはコマンドを入力する場所です。Cloud9の画面のこの部分がターミナルです。

ちょっとインストールを早くする

railsをインストールするとけっこう時間がかかります。なので以下のコードをまず打ち込んでください。するとあまり必要ないドキュメントファイルがインストールされない分、インストール時間が早くなります。

echo "gem: --no-document" >> ~/.gemrc

これは環境ごとに1回だけ行えばよいです。Railsプロジェクトを作るたびにやるつ様はありませんよ。

いよいよRuby on Rails6のインストール

それではターミナルで以下コマンドを実行してRailsをインストールしましょう。このチュートリアルではRails 5.2.0というバージョンを使用します。

これからアプリを作成するにあたり、様々なコマンドが登場します。練習の為、コピー＆ペーストせずに直接入力するようにしましょう。入力時、半角スペースの有無に注意してください。Cloud9はとても賢い反面、融通が利かないので半角スペースが抜けているだけで正しくコマンドを認識できずにエラーになってしまいます。

例えば、【$ gem install rails -v 6.0.1】のrailsの後ろの半角スペースがないだけでこのようにエラーになってしまいます。

ERRORという文字を見ると慌ててしまうと思いますが、大丈夫です。Cloud9から、「今のコマンドはどこかが間違っているよ」というメッセージとしてERRORが表示されているのです。もし、ERRORの文字が出た場合は落ち着いて、コマンドを再入力してください。

では、入力に注意してRailsのインストールを行ってみましょう。

１．以下のコマンドを入力してEnterキーを押します。

$ gem install rails -v 6.0.1

すると、ズラズラっとターミナルに「今実行中の処理」が表示されます。

初めて見る人にとっては、「間違えたのではないか！？」と焦ってしまうような画面ですが、Cloud9へRailsのたくさんの機能がインストールされているという証なので、このような画面になっていれば成功です。

ちなみにコマンドを入力した後はEnterキー必ず押してください。コマンドの指示をEnterキーでCloud9に決定事項として伝えている、と考えておいてください。これによって、下記の処理が完了されます。

ターミナルに 【ec2-user:~/environment $ 】と表示されていればすべての処理が完了している証拠です。すべてのインストールが完了したので、Cloud9が次の指示を待っている状態です。

２．Railsアプリの新規作成を以下コマンドで行います。

$ rails new newsable

このようにcreateという表示からズラズラっと処理が並んでいきます。

途中でInstallという表示でいったんターミナルの動きが止まると思いますが、インストール時は少し時間がかかるものなので焦らずにしばらく待ちましょう。全ての処理が完了するとターミナルの表示はこのようになります。

また、ターミナルに 【ec2-user:~/environment $ 】と表示されていますね。newsableというアプリの作成が完了したのでCloud9が次の指示を待っている状態です。

３．作成したアプリのディレクトリに移動しましょう。

これからnewsableアプリに機能を追加したり、様々な操作を行うのですが、newsableに対しての操作はnewsableのフォルダに入ってからでないと実行できません。

例えばこの図のA-1-1のフォルダの中身を操作したいとき、通常はまずAのフォルダをクリックして中身を見て、A-1のフォルダをクリックして中身を見て、A-1-1のフォルダをクリックして開くと思います。

同じように、Cloud9でも操作したいフォルダに移動してからコマンドで指示を出していきます。しかし、ターミナルではクリックは使えません。ですので、ターミナル上でどこかのフォルダを移動する時は　$ cd というコマンドを使います。

cdとはchange directoryの略で、$ cd フォルダ名でフォルダをクリックして開くのと同じ操作になります。

# newsableに移動
$ cd newsable

ターミナルがこのような表示になっていれば、newsableのアプリに移動することに成功しています。

Rails6でyarnやwebpackを使えるようにする

Railsではもう少しやることがあります。パッケージマネージャとしてyarnが採用されましたので、そのインストールが必要です。yarnによるパッケージ管理とはJavascriptを管理する仕組みだと思っておいてください。

１．yarnのダウンロード

以下のコマンドを打ち込みます。このコマンドで必要なファイルのダウンロードまでを行ってくれます。

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

２．yarnをインストールする

以下のコマンドでyarnをインストールしてください。

$ yarn install --check-files

３． webpackerをインストール

webpackerとはRailsでwebpackを使えるようにするGemファイルです。と言ってもまぁ、今の時点ではピンと来ませんよね。今はそれで、いいんです。おいおい理解すれば良いと思います。まぁ、かんたんに言うとJavascriptやCSSなどを一つにまとめてくれて通信速度を上げるために使用すると思っておいてください。

$ rails webpacker:install
Done in 7.46s.
Webpacker successfully installed

４．開発環境サーバーにアクセス出来るようにする

Rails開発ではコードを書いてはブラウザで閲覧する。という流れがあります。通常はローカルの中で完結するのですが、Cloud9の場合だとローカルで開発したものを外からアクセスしないといけません。クラウドでの開発なのでローカル同士で完結しないのですね。なので以下のファイルを編集します。まずは見つけてください。

config/environments/development.rb

それを開いて以下を追記してください。

config.hosts.clear

これで動くようになるはずです！次のレッスンに進んでRailsを起動させてみましょう。