はじめに
7月に配属されたものの、10月までは暇を持て余している空きなので、業務時間中にごく個人的な趣味全開のシステムを作ることになりました。
今回は「汝は人狼なりや？」というゲームをGMなしでプレイするための支援ツールを作ります。
切りのいいところでいくつかの記事に分けて書こうと思うので、長い目で見守っていただければ幸いです。
想定する構成としては、
- Laravel
- Vue.js
- websocket
- MySQL
- bootstrap（余裕があれば）
という構成で作ろうと思っています。
主にLaravelとVue.jsの勉強のためです。
ホストOSはwin10です。なので、以下はWin10向けの記述となります。
Laravel Homestead
参考：Laravel Homestead
LaravelにはLaravel HomesteadというVagrantでお手軽環境構築セットがあるそうなので、これを使います。
vagrant upするだけで、以下のような環境が立ち上がります。
- Ubuntu 18.04 LTS
- PHP 7.2.5
- MySQL 5.7.22
- Nginx 1.14.0
- Node.js 8.11.2
- npm 6.1.0
vagrant sshでupしたゲストOSにログインします。
Laravelプロジェクト作成
Laravel Homesteadのデフォルト設定では、ゲストOS側の共有フォルダは/home/vagrant/codeになっています。
当然コーディングはホスト側で行いたいので、共有フォルダ上にLaravelのプロジェクトを作成します。
cd code
composer global update
laravel new {プロジェクト名}
これで自動的にLaravelがインストールされます。
composerの設定を何も気にせずにアップデートしたせいでLaravelのバージョンが5.6になってしまいましたが、あまり気にせずに続行します。
作成したプロジェクトがホスト上からでも確認できるはず！と思い、ホスト側から共有フォルダを確認したらファイルがありません。
プロジェクトを作成したら共有フォルダの指定が思っていた階層からズレたため、のようです。
なので共有フォルダ指定を変更します。
通常ではVagrantfileを直接書き換えますが、HomesteadのVagrantfileはHomestead.yamlというファイルを通して設定する必要があります。
folders:
- map: ../project/{プロジェクト名}
to: /home/vagrant/code/{プロジェクト名}
sites:
- map: {設定したいドメイン名}
to: /home/vagrant/code/{プロジェクト名}/public
このように書き換えました。
sitesを書き換えた場合は、C:\Windows\System32\drivers\etc\hostsに192.168.10.10 {設定したいドメイン名}を追記する必要があります。（編集権限に注意！）
これによってDNSより優先的にドメインを探してくれるようになるそうです。
共有フォルダやらの設定を変えたので、vagrant reloadしてから再度VMに接続します。
フォルダが共有されたので、最低限の準備はできました。
Vue.jsの準備
Laravelプロジェクトを作成した時点で、package.jsonが用意されています。
Vue.jsほか、Babelやらなんやら便利なものは一通りインストールできるようになっているみたいです。
なので、その場でnpm installすれば全部インストールできる！はずなのですが……
実はWindowsとの共有フォルダの関係で、共有フォルダ上でnpm installしても十中八九コケます。
いろいろ調べた結果、ホスト側でnpm installして共有させる方法が一番手っ取り早いようです。
なのでNode.jsとnpmのバージョンだけ確認して、ゲスト側と同じバージョンを用意してインストールしました。
見た目上は準備完了なんですけれども、npm run devをしてみると失敗します。
node-sassというモジュールが各OS用に用意されており、Windows用が入っているのにLinux上でビルドしようとしているため失敗しているようです。
なので、node-sassだけ改めてゲスト上でインストールしなおす必要があります。
npm install node-sass --no-bin-links
これでnode-sassだけインストールできました。
ちなみに、--no-bin-linksオプションをつけないとエラーを吐きます。めんどくさいですね。
準備完了！
ここまで行えば、ひとまず環境構築は終了です。
まだwebsocket関連のモジュールが入っていませんが、実装で必要になるまで後回しにしたいと思います。
今回は環境構築編ということで、Vagrantを中心の記事となりました。
次回はLaravel編を予定しています。