More than 3 years have passed since last update.

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

Last updated at 2021-03-30Posted at 2021-03-16

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

Crostiniの基本的な環境構築

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

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

Laradockのインストール

Laradock公式サイト
公式サイトで丁寧に解説してくれているので、この通りでインストールできます。

適当な場所にて

ターミナル

git clone https://github.com/Laradock/laradock.git

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

ターミナル

cp env-example .env

起動

ターミナル

docker-compose up -d nginx mysql phpmyadmin redis workspace

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

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 コマンドでコンテナに接続する必要があるのですが

ターミナル

docker-compose exec --user=laradock workspace bash

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

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

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

ターミナル(コンテナ内）

composer global require laravel/installer
laravel new example-app

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

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

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

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

ターミナル

∟ laradock
∟ project1
  ∟ public
  ∟ laravelの各種ファイル
∟ project2
  ∟ public
  ∟ laravelの各種ファイル

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

ターミナル

cd laradock/nginx/sites
cp laravel.app.example project1.conf
cp laravel.app.example project2.conf

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

project1.conf

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

****.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サーバとして情報も多くちょうどよい感じのようです。まずはインストール

ターミナル

sudo apt-get install dnsmasq

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

/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アドレスの確認方法

ターミナル

ip addr show

eth0のあたりです。
参考）
https://stackoverflow.com/questions/53215483/how-do-i-find-out-the-ip-address-of-my-crostini-container

DNSサーバの起動

ターミナル

# 起動
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）

/etc/systemd/resolved.conf

[Resolve]
DNS=8.8.8.8 8.8.4.4
DNSStubListener=no

これで、全部再起動

ターミナル

sudo systemctl restart systemd-resolved
sudo systemctl restart dnsmasq

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

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

ターミナル

cat /etc/hostname
penguin

以下を追記

/etc/hosts

127.0.0.1  pengine

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

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

Chrome OS の設定画面 → ネットワーク → Wi-Fi
今接続しているWi-FiのSSIDを開く
設定項目が表示されるのでネットワークを開く
[ネームサーバー]の欄を見る → 多くの人が自動ネームサーバーになっていてそこに現在のネームサーバーが表示されている
カスタムネームサーバーを選択
一番上を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におなじみな環境に必要なものが一通り揃っているのでとりあえずこれがあれば何でもできるありがたいツールです。
まだ、とりあえず立ち上げたという段階ですが、これから、いろいろ使ってみたいと思います。

追記

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

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

Crostiniの基本的な環境構築

Laradockのインストール

起動ご確認

Laravelのインストール

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

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

Dnsmasq のインストール

DNSサーバの起動

Dnsmasqの起動でエラー

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

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

さいごに

追記

参考

Crositni日本語化

Dockerインストール

必要な言語のインストール

DNSサーバー関連

DNS関連のエラー解決の参考