【Cloud9】Rails + React + MySQL 環境構築

はじめに

ブラウザ上のIDEなんて使わないと思っていたのですが、いい使い方を思いついたのでCloud9を使うことになりました。
あくまで個別の例とはなりますが、自分がCloud9で環境構築した時の流れを載せます。

Cloud9 環境構築

Cloud9の環境を作成するところは、他に記載されている方も多いので割愛します。
以下は、Cloud9環境内で実施していきます。

yum アップデート

# yum アップデート
$ sudo yum update

Ruby インストール

Cloud9 では Ruby のバージョン管理ツールとしてrvmが使用されているので、こちらを使用してインストールと管理をします。

# Ruby インストール
$ rvm -v
$ rvm list
$ rvm install 2.6.0
$ rvm --default use 2.6.0
$ rvm list

Git ソースコードインストール

Git にてソースコードを取得します。

# Git ソースコードインストール
$ git clone <URL>
$ cd <project_name>

Rails ライブラリインストール

yumでmysql-develをインストールする必要があります。ここで、少し時間をとってしまいました。

# Rails ライブラリインストール
# bundler ver.2 を使用しているため
$ gem install bundler:2.1.4

# 少しはまりました。
$ sudo yum install mysql-devel
$ bundle install

MySQL セットアップ

ここで一番時間を取られてしまいました。
RailsとMySQLの連携がうまく取れなかったので、一旦MySQLをアンインストールをしてから再インストールすることにしました。

MySQL アンインストール（うまく立ち上がらないため。）

# MySQL をアンインストール（うまく立ち上がらないため）
$ sudo yum remove mysql
$ sudo yum remove mysql-server
$ sudo yum remove mysql-libs

MySQL(MariaDB) インストールおよび起動

# MySQL(MariaDB) インストールおよび起動
$ sudo yum --enablerepo=remi,epel,rpmforge install mysql-server
$ sudo service mariadb status
$ sudo service mariadb start

# MySQL(MariaDB) 接続確認
$ mysql -u root -p
-> exit

Rails DB情報（database.yml）調整

# Rails の DB情報（database.yml）書き換え
password: 
socket: /var/lib/mysql/mysql.sock

DB、テーブル作成、データ入力

# DB、テーブル作成、データ入力
$ rails db:create
$ rails db:migrate
$ rails db:seed

yarn インストール

ここからは、Reactなどwebpackerを使用しているプロジェクトのみ必要となります。
yarn をインストールします。

# yarn インストール
$ npm install --global yarn
$ yarn --version

package.json のライブラリインストール

# package.json のライブラリインストール
$ yarn install

# package.json 書き換え
    "start": "rails s -p $PORT -b $IP & bin/webpack-dev-server"

サーバー起動

Rails でサーバー起動するためにはrails sをするのが普通ですが、Cloud9ではrails s -p $PORT -b $IPを実行する必要があります。

# サーバー起動
$ yarn start

# ブラウザで確認
Preview -> Preview Running Application

まとめ

もしかしたら一般的な例ではないかもしれませんが、どなたかの役に立てればと思い書きました。