Cloud9でRails+React環境構築（1.下準備）

はじめに

下記を参考に構築してみた。

codezine.jp

qiita.com

手順

Cloud9でworkspaceを作成

Dashborad画面で「Create a new workspace」をクリック

workspace情報を設定

1. 「Workspace name」を入力
2. 「Rails Tutorial」を選択
3. 「Create workspace」をクリック

Rubyインストール

$ rvm install 2.4.1

Bundlerインストール

$ gem install bundler

nodeインストール

$ nvm install v7.10.0

npmのアップデート

$ npm update -g npm

yarnインストール

npm i -g yarn

Rails5.1環境構築

フォルダ作成&移動

$ mkdir react_sample
$ cd react_sample

Bundler

$ bundler init

Gemfileのrailsのコメントアウトを外す

# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem "rails"

bundle installを実行

パスをvendor/bundle配下に、gemインストールを並行して行う数を4で実行

$ bundle install --path vendor/bundle --jobs 4

rails new

実行中にGemfileの更新を求められるのでYで更新

$ bundle exec rails new . --webpack=react

Overwrite /home/ubuntu/workspace/react_sample/Gemfile? (enter "h" for help) [Ynaqdh] Y

gitignoreに下記を追加

/vendor/bundle

ここらでいったんgithubへ

Githubにリモートリポジトリを登録

TOP画面で「New repository」をクリック

「Repository name」を入力し、「Create repository」をクリック

Githubへプッシュ

$ git add .
$ git commit -m "Initial commit"
$ git remote add origin git@github.com:(アカウント名)/react_sample.git
$ git push origin master

サンプル画面作成

コントローラ生成

$ bin/rails g controller pages index

ルートを定義 config/routes.rb

  root to: 'pages#index'

いったん起動確認

$ bin/rails s -b $IP -p $PORT

Cloud9メニューから「Preview」〜「Preview Running Application」を選択 さらにページ上の「Open the App」をクリック（初回のみ）

ページが表示される