【環境構築】無料でクライアントサーバー型のゲームを制作する２

# はじめに
私用のPCでクライアントサーバー型のゲームを制作したかったので、環境構築からはじめました。
クライアントサイドはUnity/C#を使います。
サーバーサイドはMAMPでローカルサーバーを構築し、PHP/Laravelを使います。
MAMPではなくAWSが使えるとよかったのですが、無料でできなくなるので諦めました。
ローカルサーバーなので、公開はできず、自分用になります。

# 動作環境
Mac OS Catalina 10.15.7

# クライアントサイドの環境構築
unityとvscodeをインストールします。
これらはすでにインストールしていたので手順を省きます。
バージョンは以下のものを使いました。
Unity 2020.1.8f1

# サーバーサイドの環境構築
## MAMPの導入
[こちら](https://qiita.com/tsukishimaao/items/cab4caa065d901608856)の記事を参考に進めます。
まずはMAMPをインストールします。MAMP PROは使いません。
MAMPを立ち上げ、Preferences>Portsを確認するとデフォルトで8888になっていると思います。
右上のStartを押下してサーバーを立ち上げ、`http:://localhost:8888`にアクセスできれば成功です。

このリンクはデフォルトで`/Applications/MAMP/htdocs/`をローカルディレクトリとして開くようになっています。
複数のローカルホストを管理したいので、その設定をしていきます。

### httpd.confの設定
`/Applications/MAMP/conf/apache/httpd.conf`を開きます。
以下のような記述があると思います。
```
# Virtual hosts
#Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
```
2行目のコメントアウトを解除し、以下のようにします。
```
# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
```

### httpd-vhosts.confの設定
`/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf`を開きます。
一番下に、追加したいローカルホストの分だけ以下のように記述します。
```
Listen （任意のポート番号１）

<VirtualHost *（任意のポート番号１）>
    DocumentRoot "（ローカルディレクトリのパス１）"
    <Directory "（ローカルディレクトリのパス１）">
        AllowOverride All
    </Directory>
</VirtualHost>

Listen （任意のポート番号２）

<VirtualHost *:（任意のポート番号２）>
    DocumentRoot "（ローカルディレクトリのパス２）"
    <Directory "（ローカルディレクトリのパス２）">
        AllowOverride All
    </Directory>
</VirtualHost>

...
```
これで`http:://localhost:（任意のポート番号）`にアクセスできるようになるはずです。
MAMPのPreferences>Portsは8888のままで問題ないですが、Startは忘れないようにしましょう。

例えば、私はホームディレクトリに今回のサーバーサイド用のSample_Apiというローカルディレクトリを作成していて、ポート番号8002を使いたかったので以下のように記述しました。
```
Listen 8002

<VirtualHost *:8002>
    DocumentRoot "/Users/（ホームディレクトリ名）/Sample_Api"
    <Directory "/Users/（ホームディレクトリ名）/Sample_Api">
        AllowOverride All
    </Directory>
</VirtualHost>
```
これで`http:://localhost:8002`にアクセスできるようになります。

## Laravelの導入
Laravelは流行りのPHPのフレームワークです。
[こちら](https://grune.co.jp/blog/laravel-create-local-environment/)と[こちら](https://snome.jp/framework/laravel-install-mac/)を参考に進めます。

ターミナルを使います。

### Homebrewのインストール
Homebrewがインストールされているか確認します。
```
brew -v
```
入っていなければ、以下のコマンドでインストールします。
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

### composerのインストール
以下のコマンドでHomebrewでComposerが提供されていることを確認します。
```
brew search composer
```
提供されていればインストールします。
```
brew install composer
```

### Laravelインストール
Laravelを入れたいディレクトリに移動します。
```
cd Sample_Api
```
任意のディレクトリ名を設定して、そこにLaravelのプロジェクトを入れます。
```
composer create-project --prefer-dist laravel/laravel （任意のディレクトリ名）
```
私はlaravelというディレクトリに入れたかったので、以下のように入力しました。
```
composer create-project --prefer-dist laravel/laravel laravel
```

`/Users/（ホームディレクトリ名）/Sample_Api/laravel`にインストールされたと思います。
`http://localhost:8002/laravel/public`にアクセスし、Laravelのページがでれば成功です。

### LaravelのDB接続設定
#### .envの設定
`laravel/.env`を開きます。
以下のような記述があると思います。
```
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
```
これを以下のように変更します。
```
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=Sample_Game
DB_USERNAME=root
DB_PASSWORD=デフォルトならroot
```

#### database.phpの設定
`laravel/config/database.php`を開きます。
mysqlのところに以下のような記述があると思います。
```
'port' => env('DB_PORT', '3306'),
'database' => env('DB_DATABASE', 'forge'),
'user_name' => env('DB_USERNAME', 'forge'),
'password' => env('DB_PASSWORD', ''),
```
これを以下のように変更します。
```
'port' => env('DB_PORT', '8889'),
'database' => env('DB_DATABASE', 'Sample_Game'),
'user_name' => env('DB_USERNAME', 'root'),
'password' => env('DB_PASSWORD', 'デフォルトならroot'),
```
これでDB接続できるようになりました。

# 【おまけ】便利ツールのインストール
ここからは必ず必要ではないですが、あると便利なものたちの準備です。

## GitHubとSouretree
### リポジトリの作成
GitHubのアカウント作成は省きます。
今回はクライアント用とサーバー用のリポジトリをそれぞれ用意します。
まずはクライアント用です。
Repositories>Newより新規リポジトリを作成できます。
以下のように設定し、Create repositoryを押下します。
```
Repository name: Sample_Client ※リポジトリ名
Description: サンプルゲームのクライアント用 ※リポジトリの説明
Public  ※公開範囲 Public...公開する/Private...公開しない
Add.gitgnore: Unity ※無視するものの設定
```

次はサーバー用です。
以下のように設定しました。
```
Repository name: Sample_Api
Description: サンプルゲームのサーバー用
Public
```

### Souretreeのインストールと設定
[こちら](https://www.yokoweb.net/2020/04/22/sourcetree-install-macos/)を参考にインストールします。
[こちら](https://syslog.life/2022/01/21/github-sourcetree-alignment-access-token/)を参考に、トークンでGitHubとSouretreeを連携させます。
GitHubのアカウントメニューからSettings>Developer settings>Personal access tokensへ移動し、Generate new tokenを押下します。
以下のように設定し、Generate tokenを押下します。
```
Note: Souretree ※トークン名
Expiration: 30days ※トークンの期限（No expirainで無期限の更新いらずを設定できるが非推奨）
repo: チェック
user: チェック
```
トークンが生成されます。
これ以降トークンは確認できなくなるので、コピーは大事にとっておきましょう。

Scurcetree>環境設定を開きます。
一般>アカウント>追加で以下の設定でGitHubのアカウントを保存します。
```
認証タイプ: Basic
ユーザー名: GitHubのユーザー名
パスワード: 先ほど生成したトークン
プロトコル: HTTPS
```

### クローンとコミット、プッシュ
設定できたので、Scurcetreeでリポジトリをクローンします。
リモートタブにリポジトリがあればそこからクローンを押下で良いです。
なければGitHubのリポジトリを確認し、CodeからHttpsのリンクをコピーしてきます。
Scurcetreeの「新規...」のプルダウンメニューから「URLからクローン」を選択し、ソース URLにHttpsのリンクを貼り付けてクローンします。
デフォルトの保存先なら以下のディレクトリに保存されると思います。
`/Users/（ホームディレクトリ名）/Sample_Client`
`/Users/（ホームディレクトリ名）/Sample_Api`

Scurcetreeでコミット、プッシュしてみます。
Unityで2Dゲームを新規作成し、プロジェクトの中身を全てSample_Clientにコピーします。
Unity HubにSample_Clientをプロジェクトフォルダとして登録しなおしましょう。

ScurcetreeのローカルタブからSample_Clientを開くと、コミットに差分が溜まっています。
コミットをクリックし、差分をステージングへあげます。
「初回コミット」とコミットメッセージを記入し、コミットを直ちにプッシュにチェックをつけてコミットを押下します。
パスワードを聞かれたらトークンを入力しましょう。
キーチェーンアクセスに保存されるので、パスワードの入力が求められるのは初回のみです。
これでプッシュができました。

## Sequel Pro - Nightly buildのインストールと設定
Sequel Proはデータベース管理ツールです。
MAMPだと`http:://localhost:8002/phpMyAdmin`でデータベースを触れるので必須ではないですが、私はSequel Proが好きなのでこちらを使います。

現在は以下の3種類が出ています。
・Sequel Pro
・Sequel Pro - Nightly build
・Sequel Ace
個人的に2番目のSequel Pro - Nightly buildが使いやすいのでこれをインストールします。

[こちら](https://qiita.com/may-solty/items/a481b77d082f254de6af)を参考にSequel Pro - Nightly buildをインストールします。

MAMPのPreferences>PortsよりMySQLのポート番号を確認しておいてください。
デフォルトなら8889のはずです。

Sequel Pro - Nightly buildを立ち上げ、以下のように設定します。
```
Name: MAMP ※任意の設定名
Host: 127.0.0.1
Username: root
Password: デフォルトならroot
Database: ※デフォルトの接続DB（空でOK）
Port: デフォルトなら8889
```
Test Connectionで成功したらSave changesで設定を保存し、Connectで接続します。
Choose DatabaseからAdd Databaseで今回のゲーム用のDBを新規作成します。
Sample_Gameという名前にしました。
先ほどの接続設定のDatabaseにSample_Gameを設定しておくと、接続時にデフォルトでSample_Gameが選択された状態になっているので便利です。

## POSTMANの設定
POSTMANをインストールします。
サインインはGoogleがおすすめです。

WorkspaceからMyWorkspaceを選択します。
Create New Collectionから新規作成し、Sample_Gameと名付けておきます。
Add a requestからリクエストを登録します。
リクエストURLは`http://localhost:8002/laravel/public/api/(laravel/routes/api.phpで設定したパス）`になります。
APIを作成したらSendして実行してみましょう。

# さいごに
環境構築が完了しました。
後々思い立って書き始めたので、不備があったら申し訳ないです。
[次回はサーバーサイド](https://qiita.com/kappysan/items/a0e7d0f928797d569e72)をやります。