2018年11月17日土曜日

ChromebookでWeb開発するためにやっていること

nginxとPHP、そしてDropbox内にあるソースファイルを使ってWeb開発をよくやるのですが、実はChromebookだけでも作業は完結します。

これはChromebookの shell がほぼほぼLinuxだからですが、流れ作業とはいえ初期設定はコピペで完結させたいので、自分用のメモということで手順を公の場に残しておきます。Qiitaとかによくあるレシピみたいなやつです。

chromebrewのインストール

公式のインストール手順どおりです。

$ curl -Ls git.io/vddgY | bash
$ crew update; crew upgrade

最後の行は念のためなので本来は要らない(はず)です。

Dropbox (ヘッドレス版)のインストール

Dropboxは /etc/sysctl.conf に必要な設定があるかを固定で見てしまうので、どうしても rootfs verification を切る必要があります。

CloudReadyなら……

$ sudo disable_verity

または、Chromebookなら……

$ sudo /usr/libexec/debugd/helpers/dev_features_rootfs_verification

──としてから sudo reboot で再起動させます。

そして /etc/sysctl.conf を、Chrome OSの本来の位置からシンボリックリンクで読めるようにします。あとついでにDropboxが必要とする行も追記しておきます。

$ sudo mount -o rw,remount /
$ sudo ln -s /etc/sysctl.d/00-sysctl.conf /etc/sysctl.conf
$ echo fs.inotify.max_user_watches=100000 | sudo tee -a /etc/sysctl.conf; sudo sysctl -p

公式手順どおりにDropboxのヘッドレス版をインストールします。

$ cd ~ && wget -O - "https://www.dropbox.com/download?plat=lnx.x86_64" | tar xzf -

が、そのままではChrome OSのサンドボックスに引っかかって動作しません。/usr/local/ の下で動くようにします。

$ cd /usr/local/bin/
$ cp ~/.dropbox-dist/dropbox-lnx.x86_64-61.4.95/dropbox ./
$ cp ~/.dropbox-dist/dropbox-lnx.x86_64-61.4.95/dropboxd ./

$ mkdir /usr/local/lib64/dropbox/
$ cd /usr/local/lib64/dropbox/
$ cp -r ~/.dropbox-dist/dropbox-lnx.x86_64-61.4.95/* ./

そして、Chrome OSのファイラーから読める ~/Downloads/ 内にDropboxフォルダを置きつつ、ヘッドレス版が読み書きできるようにシンボリックリンクを作ります。

$ mkdir ~/Downloads/Dropbox
$ ln -s ~/Downloads/Dropbox ~/Dropbox

dropboxd を起動して初期設定を行います。

$ dropboxd

初期設定が終わったら ctrl-C でいったん抜けて、改めて dropbox を開始させます。

$ dropbox start

なお、本文内 61.4.95 のあたりは導入したバージョンで変わるので適宜置き換えてください。

Android Debugging Bridgeのインストール

Chrome デベロッパーツールでのリモートデバッグのため、ADBのインストールもしておきます。

$ curl -Ls https://raw.githubusercontent.com/nathanchance/chromeos-adb-fastboot/master/install.sh | bash

Chromebookだとデフォルトで入ってたりするんですが、権限周りでコケたりするやつなので、このスクリプトで公式の最新へ置き換えておくと便利です。

nginxとPHPのインストール

Chromebrewから入れます。

$ crew install nginx
$ crew install php5

php5 パッケージに php-fpm も含まれているので、この2つだけでいいです。

Dropboxから各種設定ファイルのコピー

ぼくはDropboxの /_env/CxOS というフォルダにChrome OS用の各種設定ファイルを固めておいてあり、それをコピーするだけです(Dropboxの同期は終わっている前提)。

$ cp ~/Dropbox/_env/CxOS/bashrc ~/.bashrc
$ cp ~/Dropbox/_env/CxOS/nginx.conf /usr/local/share/nginx/conf/
$ mkdir /usr/local/share/nginx/conf/snippets
$ cp ~/Dropbox/_env/CxOS/fastcgi-php.conf /usr/local/share/nginx/conf/snippets/
$ cp ~/Dropbox/_env/CxOS/php.ini /usr/local/etc/

あと、古き良き public_html フォルダも作っておきます。

$ mkdir ~/Downloads/public_html
$ ln -s ~/Downloads/public_html ~/public_html

この中に入れるファイル群(Dropboxフォルダ内の各プロジェクトへのシンボリックリンクとか)も .tgz で固めてありますが割愛。

最後に、nginx, php-fpm, dropbox の起動スクリプトを仕込んである .bashrc を読み込ませます(※このあたり詳しくはこちら)。

$ source ~/.bashrc

Web素材ですが、Chromeアプリ『Polarr』とCrouton (Linuxサポート)での『GIMP』があれば割と作れてしまうので、Chrome Remote Desktopで動いているMacへリモートしてPhotoshop (Adobe CC)作業することはほとんどないです。フォントに指定があるときくらいですね。

おしまい。