Cloud9でLaravel6 + MySQL + node.jsな開発環境を最短で構築するTips

# Cloud9でLaravel6(PHP7.3) + MySQL + node.jsな開発環境を最短で構築する


このパートではLaravelの開発環境を構築するために、Cloud9でPHPとMySQLが動作するように環境構築をします。


## 環境構築のゴール

 - Laravelのトップページが確認できる
 - MySQL上に初期テーブルが確認できる
 - npmコマンドが使える
 
 といった内容をゴールとします。


[![Image from Gyazo](https://i.gyazo.com/01d331208363736af867d151c95f5ab2.png)](https://gyazo.com/01d331208363736af867d151c95f5ab2)

いずれもCloud9のコンソールからコマンドで順番にインストールをしていきます。

ではさっそく環境の構築を進めていきましょう。

## Cloud9とは
Cloud9はアプリケーション開発やデータベースなどをクラウド環境で利用できるサービスです。Cloud9を使えば、簡単にプログラミング開発環境を構築できます。

## AWSアカウントを取得

Cloud9を使うためにはAWSアカウントが必要になります。

AWSアカウントを既にお持ちの場合は、[AWS](https://aws.amazon.com/jp/)にログインしてください。

AWSのアカウントを持っていない場合は、下記のリンクからAWSアカウントを作成してください。

- [AWSアカウントの作成](https://portal.aws.amazon.com/billing/signup#/start)

AWSアカウント作成の流れに関しては公式のリンクが非常に分かりやすいのでこちらを参考にしてください。

- [AWS アカウント作成の流れ](https://aws.amazon.com/jp/register-flow/)
## AWSにログイン
AWSアカウントを作成したら、AWSにログインしてください。

ログインは下記のリンクからログインできます。

[AWSコンソール](https://console.aws.amazon.com/)

ログインができたら下記のような画面に遷移します。

[![Image from Gyazo](https://i.gyazo.com/9fbabcc130e3f6468ded99086cc45d74.png)](https://gyazo.com/9fbabcc130e3f6468ded99086cc45d74)

もし右上の **東京** と書かれている部分が別の物になっていた場合は赤い囲いの部分をクリックして **東京** を選択するようにしてください。

[![Image from Gyazo](https://i.gyazo.com/a739a60bc6ee75bc219f8f224a6e09d4.png)](https://gyazo.com/a739a60bc6ee75bc219f8f224a6e09d4)

> この選択肢はリージョンと呼ばれる物になり、物理的なサーバーが置いてある位置を指定する内容です。日本で使う前提であれば、距離的に近い東京リージョンを選択しておくことをおすすめしています。


次に、画面中央付近にある検索ボックスから「Cloud9」と入力すると、Cloud9の開発環境を作成するためのページに遷移します。

[![Image from Gyazo](https://i.gyazo.com/5113acd4ac1aff7da4a76090d0d305d0.png)](https://gyazo.com/5113acd4ac1aff7da4a76090d0d305d0)

Cloud9の開発環境を作成
ではCloud9の開発環境を作成していきます。下記の画面にある「Create environment」をクリックしてください。

[![Image from Gyazo](https://i.gyazo.com/5b16a46df8c73bf5d53f0d4df4de1a40.png)](https://gyazo.com/5b16a46df8c73bf5d53f0d4df4de1a40)

次にNameのフォームの箇所にアプリ名を入力します。任意の名前を入力して、 **Next step** をクリックしてください。

[![Image from Gyazo](https://i.gyazo.com/92508f67014b46ac21beca0a28d90c60.png)](https://gyazo.com/92508f67014b46ac21beca0a28d90c60)

次に下記の画像のような画面に遷移します。この画面ではそのまま「Next step」を入力してください。

[![Image from Gyazo](https://i.gyazo.com/92a6359ac4d5724af5dc00dfad665a07.png)](https://gyazo.com/92a6359ac4d5724af5dc00dfad665a07)

次に下記の画像のような画面に遷移します。この画面ではそのまま「Create environment」を入力してください。

[![Image from Gyazo](https://i.gyazo.com/ff07ddca75011e45acbb1b169218db4d.png)](https://gyazo.com/ff07ddca75011e45acbb1b169218db4d)

すると下記の画像のように表示されていればCloud9の環境構築ができています。（下記の画面が表示されるまでに1~2分かかることがあります。）

[![Image from Gyazo](https://i.gyazo.com/d87dbb9682028baebf322a74452f0e46.png)](https://gyazo.com/d87dbb9682028baebf322a74452f0e46)

### Cloud9のインデントを設定

LaravelはインデントをTabに設定するのが基本ルールなので、Cloud9の設定を変更していきます。

インデントの設定を変更するには、右上の歯車アイコンをクリックし、「Soft Tabs」のチェックを外しておきましょう。

[![Image from Gyazo](https://i.gyazo.com/ec50e6b17b4426581af0f80b093ab076.png)](https://gyazo.com/ec50e6b17b4426581af0f80b093ab076)

## 1. php7.3のインストール

まずはターミナルからガンガンコマンドを打つので、以下の場所にどんどん入力していきましょう！

[![Image from Gyazo](https://i.gyazo.com/e657486ac552534cecc71cd38b18a4ec.png)](https://gyazo.com/e657486ac552534cecc71cd38b18a4ec)

### パッケージのアップデート

```
$ sudo yum -y update
```

### PHP7.3および、拡張機能のインストール

PHP7.3と共にPHPからデータベースに接続するための機能や日本語を扱うための機能など、本記事の開発に必要な拡張機能も同時にインストールしますので、下記コードを全てコピーして実行してください。

```
$ sudo yum -y install php73 php73-cli php73-common php73-devel php73-mysqlnd php73-pdo php73-xml php73-gd php73-intl php73-mbstring php73-mcrypt php73-zip
```

### PHPバージョンの切り替え

Cloud9にはデフォルトでPHP5.6が入っていますので、先ほどインストールしたPHP7.3にバージョンを切り替えるコマンドになります。

```
$ sudo alternatives --set php /usr/bin/php-7.3
```

### PHPバージョンの確認

以下の画像のように

```
$ php -v
```
を入力した際に PHP7.3.* といった7.3系のバージョンが返ってくればPHPのインストールは完了です。

[![Image from Gyazo](https://i.gyazo.com/1929118c3ee271b811e5bbe4f00692d3.png)](https://gyazo.com/1929118c3ee271b811e5bbe4f00692d3)




## 2. MySQL5.5の削除
Cloud9にはデフォルトでMySQL5.5がインストールされていますが、2019年時点では最新のMySQLと比較して文法などが古いため,MySQL5.7のインストールの準備として、MySQL5.5を削除していきます。

### MySQL5.5の停止

```
$ sudo service mysqld stop
```

画像のように **Stopping mysqld: OK**と返ってくればOKです。

[![Image from Gyazo](https://i.gyazo.com/8425ee70338aa461a79b9c76fcbd46ba.png)](https://gyazo.com/8425ee70338aa461a79b9c76fcbd46ba)


### MySQL5.5のアンインストール

まずはアンインストールコマンドをターミナルに入力します。

```
$ sudo yum -y erase mysql-config mysql55-server mysql55-libs mysql55
```

次に以下のコマンドを入力して、アンインストールができていることを確認しましょう。

```
$ mysql --version
```

以下のように

```
bash: /usr/bin/mysql: No such file or directory
```

と返ってくれば上手くアンインストールができています。

[![Image from Gyazo](https://i.gyazo.com/896389065b8e88b6e0932acecd08f432.png)](https://gyazo.com/896389065b8e88b6e0932acecd08f432)

## 3. MySQL5.7のインストールと初期設定
2項で古いMySQLを削除したので、続いて新しいMySQLをインストールします。ターミナルから以下のコマンドを入力してください。

### インストール

```
$ sudo yum -y install mysql57-server mysql57
```

インストールが終わり次第以下のコマンドでMySQL5.7を起動します。

```
$ sudo service mysqld start
```

起動が完了したら、バージョンがアップデートされていることを以下のコマンドでご確認ください。

```
$ mysql --version
```

画像のように5.7と出ていればインストール完了です。

[![Image from Gyazo](https://i.gyazo.com/9cc4625cf671c41ba07ea1a0db52cac6.png)](https://gyazo.com/9cc4625cf671c41ba07ea1a0db52cac6)

### 初期設定

では続いてMySQL5.7の初期設定を行いましょう。

以下のコマンドで初期設定がスタートします。

```
$ mysql_secure_installation
```

コマンドを実行すると対話式で設定が進みます。（ターミナル側から色々聞いてくる）

まずは **y** (yes)を入力します。
[![Image from Gyazo](https://i.gyazo.com/de39fd4cf22a6ca4d28fa01e0bb4e38f.png)](https://gyazo.com/de39fd4cf22a6ca4d28fa01e0bb4e38f)

次にパスワードポリシーでパスワード強度を設定しますが、開発用なので一番緩い0を指定しましょう。

[![Image from Gyazo](https://i.gyazo.com/0382822d19baa52085ae1cf9ea96c18b.png)](https://gyazo.com/0382822d19baa52085ae1cf9ea96c18b)

そうすると、rootユーザーのパスワードを聞かれますので、覚えやすいパスワードを入力してください。

*入力しても反応がありませんが、ちゃんと入力できています。

> このパスワードは後々使用するため、忘れないようにメモしておいてください。

[![Image from Gyazo](https://i.gyazo.com/72cbd949d0d4df08fc51cc208c8c928c.png)](https://gyazo.com/72cbd949d0d4df08fc51cc208c8c928c)

確認用の入力と合わせて2回入力してください。

[![Image from Gyazo](https://i.gyazo.com/f1d7e0b532e25232b963c970cb8aaef1.png)](https://gyazo.com/f1d7e0b532e25232b963c970cb8aaef1)

### 残項目の設定
残りの項目については全てyesで良いため、yを入力してenterを押していきます。

[![Image from Gyazo](https://i.gyazo.com/91a0d77565b334436c68211b66fd94ae.png)](https://gyazo.com/91a0d77565b334436c68211b66fd94ae)

[![Image from Gyazo](https://i.gyazo.com/6962deba495306f8558e360869ec3858.png)](https://gyazo.com/6962deba495306f8558e360869ec3858)

[![Image from Gyazo](https://i.gyazo.com/c96fba344a22b6fc4687fd304c522c0b.png)](https://gyazo.com/c96fba344a22b6fc4687fd304c522c0b)

[![Image from Gyazo](https://i.gyazo.com/904a287de7eddc4a50c996c1973196d5.png)](https://gyazo.com/904a287de7eddc4a50c996c1973196d5)

[![Image from Gyazo](https://i.gyazo.com/967a4bab9f9d2ced59d78449211edf81.png)](https://gyazo.com/967a4bab9f9d2ced59d78449211edf81)

以下の画像のように **All done!** と表示されれば初期設定の完了です。 

[![Image from Gyazo](https://i.gyazo.com/8d0b3b9cf9c5bba0e5cf80240d765fc2.png)](https://gyazo.com/8d0b3b9cf9c5bba0e5cf80240d765fc2)

### MySQL5.7へのログイン

では最後に初期設定の終わったMySQLへログインしてみましょう。

```
$ mysql -uroot -p先ほど決めたパスワード
```

とコマンド入力していきます。 **-pのあとはスペースを入れずに** パスワードを入力します。

コマンド入力後、このように **$** が **mysql>** に変わればMySQLにログインできたことになります。
[![Image from Gyazo](https://i.gyazo.com/34fa9f28672e2e7e28151de94d35be0a.png)](https://gyazo.com/34fa9f28672e2e7e28151de94d35be0a)

MySQLにログインしたので、次章以降使用するデータベースを作成しておきましょう。

以下のコマンドを実行してください。

```
mysql> CREATE DATABASE laravel CHARACTER SET utf8mb4;
```

こちらのコマンドで **laravel** という名称で文字コードutf8mb4（マルチバイト日本語対応）データベースができました。

それでは以下のコマンドでデータベースが作成されているか確認してみましょう。

```
mysql> show databases;
```

データベースリストの中に **laravel**データベースを目視できれば作成が無事できています。


最後に以下のコマンドでMySQLから抜けましょう。

```
mysql> exit;
```

## 4. composerのインストール

### composerとは？
composerとは、PHPのパッケージ管理ツールです。利用するパッケージ（ライブラリ）間の依存関係も解決してくれます。

今後Laravelで開発を進めるにあたり、ライブラリを導入することも多々あるかと思います。

ライブラリなどを導入した際にプロジェクトメンバーとの共有やライブラリ同士の依存関係（ライブラリAがないとライブラリBが動かない等）を管理してくれるパッケージマネージャーと呼ばれるものです。

### インストール

以下のコマンドでcomposer本体をダウンロード・インストールしましょう。

```
$ curl -sS https://getcomposer.org/installer | php
```

続いてどこのパスからでもcomposerコマンドを使えるようにしておきます。

```
$ sudo mv composer.phar /usr/bin/composer
```

これにてcomposerのインストールが完了したので、動作を確認していきます。

```
$ composer -v
```
でバージョンを確認し、以下のようにcomposerのアスキーアートが確認できればインストール完了です。


[![Image from Gyazo](https://i.gyazo.com/e2016218f4a59e4bc151684187527554.gif)](https://gyazo.com/e2016218f4a59e4bc151684187527554)



## 5. Laravel6のインストール
ではここからcomposerを使ってLaravelをインストールしていきます。

### インストール

本記事ではLaravel6.0を使っていきますので、ターミナルから以下のコマンドを打ってください。

```
$ composer create-project "laravel/laravel=6.*" --prefer-dist laravel6
```

本記事では `laravel6`という名前のディレクトリでlaravelをインストールします。

ターミナルに緑の文字で **successfully** と表示され、左のファイル管理の部分に **laravel6** というフォルダが生成されていればインストールが完了しています。



### 初期設定

このセクションではLaravelのトップページを表示させるために必要な初期設定を行っていきます。 

ではまず以下のコマンドでLaravelディレクトリに移動します。

```
$ cd laravel6
```

ではまずデータベース接続設定を変更していきましょう。

環境設定ファイルは隠しファイルなので、以下のように隠しファイルを表示していきます。

[![Image from Gyazo](https://i.gyazo.com/05cfea5cd089183c12242872c6068f94.gif)](https://gyazo.com/05cfea5cd089183c12242872c6068f94)

このように **.env** ファイルが見えれば **.env** ファイルをクリックして開きます。

以下のように 
 - DB_DATABASE : laravelに
 - DB_PASSWORD : MySQL初期設定時に決定したもの
 
 に変更していきます。

[![Image from Gyazo](https://i.gyazo.com/81b146ce36f52bb22b4138053d898f68.png)](https://gyazo.com/81b146ce36f52bb22b4138053d898f68)

変更が終わったら **Ctrl + s** もしくは**⌘ + s** で忘れずに保存しましょう。


次にディレクトリの書き込み権限付与を変更してbootstrapとstorageディレクトリにログファイルやキャッシュファイルを書き込めるようにしましょう。

以下のコマンドを実行してください。

```
$ sudo chmod -R 0777 bootstrap/
$ sudo chmod -R 0777 storage/
```

このコマンドを実行する理由としては、自分以外（ターミナル操作以外）でもディレクトリ内にファイルを書き込めるようにする必要があるからです。

Laravelは独自のログ（アプリの動作履歴）を `storage/logs/` に書き込んでいくのですが、書き込みユーザーはapache（Webサーバー）なので、自分以外もファイルの書き込みをできるようにしておく必要があるためです。

### 動作確認

以下のコマンドを打つと開発用のサーバーが起動します。

```
$ php artisan serve --host=$IP --port=$PORT
```

> 注意点として、php artisan コマンドはlaravelのディレクトリ以外で使う事ができません。（laravel6ディレクトリに移動して使う必要があります）

[![Image from Gyazo](https://i.gyazo.com/53c657b01a0792c0012b0270ca1c2bb8.gif)](https://gyazo.com/53c657b01a0792c0012b0270ca1c2bb8)

## 6. テーブルの作成

マイグレーションとはデータベースの履歴管理の仕組みになり、PHPファイルでテーブルの定義を行うことができます。

デフォルトでいくつかのマイグレーションファイルが準備されているので、実行してみましょう。


### マイグレーションの実行

マイグレーションファイルの編集が終わりましたら、保存してターミナルに以下のコマンドを入力してください。

```
$ php artisan migrate
```

php artisanコマンドとはLaravelが用意しているコマンドでLaravelに関わる便利な機能を簡単に使うことができます。

migrateはマイグレーションファイルの内容を実行するコマンドになるので、以下のような反応が返ってくればOKです。

```
ec2-user:~/environment/laravel6 $ php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (0.03 seconds)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (0.03 seconds)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (0.01 seconds)
```


## 7. 作成したテーブルの確認
最後にマイグレーションで作成したテーブルが本当に存在するのか確認していきましょう。まずはMySQLに接続します。
```
$ mysql -uroot -p先ほど決めたパスワード
```

とコマンド入力していきます。 **-pのあとはスペースを入れずに** パスワードを入力します。

MySQLにログインしたら、まずデータベースを選択します。

```
mysql> use laravel;
```

次にマイグレーションで作ったreviewsテーブルの構造を確認してみましょう。以下のコマンドを実行してください。

```
mysql> SHOW FULL COLUMNS FROM users;
```

このようにテーブルの構造がターミナルに返ってくれば無事に作成できています。



また、マイグレーションが成功している時点で、PHPからMySQLへの接続ができている証拠なので、環境設定も上手くできています。

以上です！

## 8. node.jsのインストール

### インストール

```
$ curl -sL https://rpm.nodesource.com/setup_8.x | sudo bash -
```

コマンドでnode.jsをインストールするので、下記コマンドを実行してください。

```
sudo yum -y install nodejs
```

### 動作確認
 
最後にnode.jsとそのパッケージマネージャーであるnpmが正しくインストールされているか確認していきます。

```
$ node -v
$ npm -v
```
これらのコマンドでバージョンが返ってくればOKです。

### node.jsをインストールした理由

Node.jsをインストールした理由は**vue.js**や**react.js**の台頭によって、Node.jsを使うことが圧倒的に増えたからです。

おそらく言語プログラミングを勉強していく皆さんはこういったモダンな JavaScript フロントエンド開発も行うこととなります。そのためすぐに使えるようにあらかじめnode.jsをインストールしておきました。

また、 Laravel6のフロントエンドにはデフォルトでvue.jsが設定されていることもあり、モダンなWebアプリケーション開発においてはnode.jsは必須でしょう。

以上でCloud9上にLaravel開発環境を構築する方法を記述しました。皆さん良きプログラミングライフを。


## 補足
 
- ipadでエラーが出た方はこちら [SafariでCloud9を使う時にCookieエラーが出た時の対処方法](https://qiita.com/propeller/items/0347d4df64cbc85e96c9)