Crostini + Laradock でChromebookのPHP開発環境をつくる

ChromebookでPHP開発環境を作ります
Chrome OSのLinux環境（Crostini）を使います
PHPフレームワークLaravelの開発をお手軽にしてくれるLaradockをインストールして動かします。
「Laradockは、Docker用の完全なPHP開発環境（公式サイトより）」


# Crostiniの基本的な環境構築

- 日本語化
- npm などのインストール
- Docker、Docker Compose のインストール

などはたくさん有益でわかりやすいな情報があるので、それぞれ参考にしてください。（参考になったサイトを下の方にまとめました）

# Laradockのインストール

[Laradock公式サイト](https://laradock.io/)
公式サイトで丁寧に解説してくれているので、この通りでインストールできます。

適当な場所にて

```sh:ターミナル
git clone https://github.com/Laradock/laradock.git
```

環境ファイルを作成（いったんそのまま）

```sh:ターミナル
cp env-example .env
```

起動

```sh:ターミナル
docker-compose up -d nginx mysql phpmyadmin redis workspace
```

**起動時にエラーになった場合**
自分は初回の起動時に「worksspaceのSSHポートが使われている」という感じのエラーがでましたので、ポートの指定を変更して回避しました。

```sh:laradock/.env
# WORKSPACE_SSH_PORT=22
WORKSPACE_SSH_PORT=50022
```

初回は結構長い時間かかりますが、これで起動までできるはず。

## 起動ご確認

デフォルトだとlaradockディレクトリと同じ階層の `public` が公開ディレクトリになっているので
以下のような `public/index.html` を適当な内容で保存する

```
∟ laradock/
∟ public/
　∟ index.html
```

Chrome OS 側の Chromeブラウザから `penguin.linux.test` のURLにアクセスして、index.htmlの内容が表示されれば成功。
`penguin.linux.test` は Crostiniに割り振られたアドレスになります。

# Laravelのインストール

立ち上げたLaradockの中でLaravelをインストールします。
基本は公式の通り

https://laravel.com/docs/8.x/installation
https://readouble.com/laravel/8.x/ja/installation.html

Laradockのコンテナ内でインストールするときなどに `docker-compose exec` コマンドでコンテナに接続する必要があるのですが

```sh:ターミナル
docker-compose exec --user=laradock workspace bash
```

というようににユーザーを指定する必要があります。
`--user` オプションを指定しないで接続すると、コンテナ内部から作成したファイルの所有者が `root` になってしまい編集できなくなってしまいます。
普段はmacOSなどでやっていると、ここらへん無頓着になっていて、ハマってしまいました。。

ユーザー名は、laradock を指定してあげれば、自分のユーザーが割り当てられて、ファイルなども自ユーザー所有として作成されます。とても便利です。

あとは、自分の使いたいバージョンをドキュメントにそってインストールするだけです。

```sh:ターミナル(コンテナ内）
composer global require laravel/installer
laravel new example-app
```

## Laradockで複数プロジェクトを管理

https://laradock.io/getting-started/
Setup for Multiple Projects:
の項目にあるように、Laradockで複数のプロジェクトを立ち上げて開発することができます。

ただし、Chromebookでは、`/etc/hosts` の編集ができないため少し工夫が必要です。

詳しい手順は公式で見ていただくとして、大事な部分のみ。
Laradockでは、複数プロジェクトを管理するときは以下のような構成になります。

```sh:ターミナル
∟ laradock
∟ project1
  ∟ public
  ∟ laravelの各種ファイル
∟ project2
  ∟ public
  ∟ laravelの各種ファイル
```

このようにファイルを配置したら
あとは `nginx` で振り分けます。

```sh:ターミナル
cd laradock/nginx/sites
cp laravel.app.example project1.conf
cp laravel.app.example project2.conf
```

設定ファイルをプロジェクトごとに設定

```conf:project1.conf
#server_name laravel.test;
server_name project1.test;
#root /var/www/laravel/public;
root /var/www/project1/public;
```

```conf:****.conf
#server_name laravel.test;
server_name ****.test;
#root /var/www/laravel/public;
root /var/www/****/public;
```

こんな感じで設定したら、本来は `/etc/hosts` を書き換えるだけ。。なんだけど、残念ながら Chrome OS はhostsの書き換えができない。
（デベロッパーモードにしたりすればできるらしいんだけど、そこまではしたくない）

というわけで、どうしようか色々調べたところ Crostiniに簡易DNSサーバーを立ててしまう。という解決方法を見つけた。
ちょっと大変そうだけど興味もあったのでチャレンジしてみました。


# Crostini で簡易DNSサーバを立てる

基本的にこちらを参考
とても詳しく書いてあり、とても勉強になりました。
https://qiita.com/arakaki_tokyo/items/c17e07220b8f7c465564

## Dnsmasq のインストール

Dnsmasqはお手軽DNSサーバとして情報も多くちょうどよい感じのようです。まずはインストール

```sh:ターミナル
sudo apt-get install dnsmasq
```

次に設定をします。
上記の参考サイトのをまるっと参考にさせていただきました。

```text:/etc/dnsmasq.conf
listen-address=[CrostiniのIPアドレス]
interface=eth0
log-queries
log-facility=/var/log/dnsmasq.log
port=53
no-resolv
address=/test/[CrostiniのIPアドレス]
```
これで、`**.test` というドメインを全部Crostiniに向けます。 


ちなみにCrostini のIPアドレスの確認方法

```sh:ターミナル
ip addr show
```
eth0のあたりです。
参考）
https://stackoverflow.com/questions/53215483/how-do-i-find-out-the-ip-address-of-my-crostini-container

## DNSサーバの起動

```sh:ターミナル
# 起動
sudo systemctl start dnsmasq
# 毎回自動的に起動するように設定
sudo systemctl enable dnsmasq
```

で、DNS立ち上げたら、あとはChromeブラウザからURLを見に行くときにCrostiniのDNSを見に行くようにします。
ただ、自分は立ち上げるときにうまく行かなくてもうひと手間かけました。

※2つのChromebookで設定しましたが、そのうち1つでは下記対応が必要でした。もう一つはすんなり起動できたので環境とかによると思います。

## Dnsmasqの起動でエラー

自分の場合はここで、Dnsmasqを立ち上げるときにエラーがでてしまいました。

**解決方法**
systemd-resolvedのstub listenerというのがおなじく53番ポート使っていて被ってしまっているようだったので、それを無効にするオプションと、無効にしたせいか外部との通信ができなくなってしまったので、代わりの外部DNSを設定（今回はChromeということもありおなじみのGoogleさんの8.8.8.8）

```sh:/etc/systemd/resolved.conf
[Resolve]
DNS=8.8.8.8 8.8.4.4
DNSStubListener=no
```

これで、全部再起動

```sh:ターミナル
sudo systemctl restart systemd-resolved
sudo systemctl restart dnsmasq
```

## sudoしたらホスト名が解決できません

sudoするとホスト名が解決できないというエラーがでるようになってしまった。
hostsに追記する必要があるみたいです。
hostnameを調べる

```sh:ターミナル
cat /etc/hostname
penguin
```

以下を追記

```sh:/etc/hosts
127.0.0.1  pengine
```

で、なんとか動きました。
この部分は、ほんとうに手探りです。ローカルだし開発できればいいか。。的な感じで。。ネットワーク関連をちゃんと勉強せねばと心に誓いつつとりあえず対処療法的にやっつけた次第です。
この方法だとまずいとか、もっといい方法あるとかあれば教えて下さい。

## Chrome OS にネームサーバの設定

1. Chrome OS の設定画面 → ネットワーク → Wi-Fi
2. 今接続しているWi-FiのSSIDを開く
3. 設定項目が表示されるのでネットワークを開く
4. [ネームサーバー]の欄を見る → 多くの人が自動ネームサーバーになっていてそこに現在のネームサーバーが表示されている
5. カスタムネームサーバーを選択
6. 一番上をCrostiniのIPアドレス、2番めを自動ネームサーバーに表示されていたIPアドレスに設定

これで、Laradockからさきほど設定した `project1.test` などのtestu用ドメインをChromeブラウザで開く。
`project1/public/` 内に保存した内容が表示されれば成功です。

以上で、Chromebook上のLaradockで複数プロジェクトを管理できるようになりました。

動かすまでの流れと詰まったポイントをざっくり書きました。抜けなどあるかもしれません。
こまかな設定などはそれぞれの公式サイトや他の皆さんの記事を参考にしてください。

ありがとうございました。

# さいごに

自分は地方のプログラマーです。都会のお仕事をさせていただくときは、JSやGoに触る機会が増えてきてPHPは減っているように思いますが、地元ではPHPはまだまだ元気です！
レンタルサーバーへのウェブ周りの機能追加やWordPressのカスタマイズなどを依頼されたときなど、空いた時間にサクッと書ける感じの案件が多いです。そんなわけで、いつも持ち運べるChromebookで、打ち合わせの合間とか空いた時間にちょこっとコードかけるスタイルが、PHPととてもあっているように思います。
Laradockがあれば、Laravelだけでなく、他のCMSやWordPressなど、PHPerにおなじみな環境に必要なものが一通り揃っているのでとりあえずこれがあれば何でもできるありがたいツールです。
まだ、とりあえず立ち上げたという段階ですが、これから、いろいろ使ってみたいと思います。

# 追記

https://qiita.com/shin1kt/items/acf44cb7e8112e2b6a18

こちらに日本語設定から環境構築までChromebookでの開発環境周りをまとめた記事を書きました。
よろしければご一緒にどうぞ。


# 参考
## Crositni日本語化
- [Chromebook Crostini の有効化と日本語化](https://zenn.dev/igac/articles/84d1f377bcd9d698ee8d)
- [Crostini導入編: 健康で文化的な最低限度の生活のためのChromebook設定](https://scrapbox.io/hada/Crostini%E5%B0%8E%E5%85%A5%E7%B7%A8:_%E5%81%A5%E5%BA%B7%E3%81%A7%E6%96%87%E5%8C%96%E7%9A%84%E3%81%AA%E6%9C%80%E4%BD%8E%E9%99%90%E5%BA%A6%E3%81%AE%E7%94%9F%E6%B4%BB%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AEChromebook%E8%A8%AD%E5%AE%9A)

## Dockerインストール
- [Docker公式サイト](https://docs.docker.com/engine/install/debian/)
- [ChromebookのLinux(crostini)にdockerとdocker-composeをインストールする](https://chromebooker.net/topics/s99iy0xz2j/)

## 必要な言語のインストール
- [Chromebookに各種プログラミング言語をインストールする](https://chromebooker.net/topics/s1tjcartr9/)
- [ChromeOSでGit, VSCode, Dockerをインストールして開発](https://qiita.com/pyama2000/items/90b189964f71def53b19)
- [ChromebookのLinux開発環境構築](https://qiita.com/suzuki_sh/items/adead0fd9adefec112af)

## DNSサーバー関連
- [-pオプションと決別する](https://qiita.com/arakaki_tokyo/items/c17e07220b8f7c465564)
- [Dnsmasqでお手軽ご家庭DNSサーバーを作ろう](https://www.infiniteloop.co.jp/blog/2015/04/how_to_use_dnsmasq/)
- [dnsmasqを使った内部用DNSサーバの構築](https://qiita.com/icebird009/items/b90df257fb1f7c8c9bdf)

## DNS関連のエラー解決の参考
- [resolved: add an option to disable the stub resolver](https://github.com/systemd/systemd/pull/4061)
- [Ubuntu 18.04 の systemd-resolved で local DNS stub listener の利用をやめる](https://qiita.com/shora_kujira16/items/31d09b373809a5a44ae5)
- https://kernhack.hatenablog.com/entry/2015/05/05/133203
- https://www.it-swarm.jp.net/ja/systemd/dnsmasq%E3%81%A8systemdresolved%E3%81%AE%E9%96%93%E3%81%AE%E7%AB%B6%E5%90%88%E3%82%92%E5%9B%9E%E9%81%BF%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%AF%EF%BC%9F/962510074/
- https://forums.ubuntulinux.jp/viewtopic.php?id=16925