Cloud9でRails+React環境構築(1.下準備)

はじめに

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

codezine.jp

qiita.com

手順

Cloud9でworkspaceを作成

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

f:id:sprink:20171113202933p:plain

workspace情報を設定

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

f:id:sprink:20171113204503p:plain

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

ここらでいったんgithub

gitignoreに下記を追加

/vendor/bundle

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

TOP画面で「New repository」をクリック f:id:sprink:20171113214538p:plain

「Repository name」を入力し、「Create repository」をクリック f:id:sprink:20171113214958p:plain

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」をクリック(初回のみ) f:id:sprink:20171113220406p:plain

ページが表示される f:id:sprink:20171113220607p:plain