ChromebookのLinux（Crostini）にWeb開発環境をつくる

なぜかChromebookで開発するのにロマンを感じてしまい、いろいろいじっています。
詳しい皆さんが上げてくれている情報で学びながら自分なりの方法がまとまってきたので備忘録的に書きました。

# 対象

- Chromebookでコード書きたい人
- とくにWeb周りの人
- VS-Code使う人
- この記事ではとくにJSとPHPの人

# 初期設定

Linux環境(Crostini）を使うので設定します。
最初はChromeOSの設定から初期設定が必要です。
Linux環境を作ったら、ターミナルを立ち上げます。

## 日本語環境を設定

まずはお決まりの日本語環境から。
Linuxの言語と地域の設定をします。日本語のUTF-8に設定してシェルに反映させます。

```sh:ターミナル
$ sudo localectl set-locale LANG=ja_JP.UTF-8
$ source /etc/default/locale
```

## Mozcインストール

Fcitx-MozcはLinuxの日本語に使われているIMEです。
Fcitxという共通インプットメソッドフレームワークの日本語版です。Google日本語入力のオープンソース版とのことで、非常に使いやすい入力システムです。

```sh:ターミナル
$ sudo apt install fcitx-mozc
```
### Mozc設定

以下に設定ファイルがあるのに追記します。

```/etc/systemd/user/cros-garcon.service.d/cros-garcon-override.conf
Environment="GTK_IM_MODULE=fcitx"
Environment="QT_IM_MODULE=fcitx"
Environment="XMODIFIERS=@im=fcitx"
Environment="GDK_BACKEND=x11"
```

上3行はインプットメソッドモジュールにfcitxを使う設定
4行目は、一部アプリで日本語入力がうまく動かないことへのハックのようです。場合によっては不要かもしれません。[^1]

上記設定をLinux起動時に毎回読み込むように設定します。

```sh:.sommelierrc
...以下を追記
/usr/bin/fcitx-autostart
```
Sommelierというのは、どうやらChromeOSとLinuxアプリの橋渡しをしてくれているものらしいのですが、それの起動時日本語入力モジュールの設定を行うようにしている。。ということみたいです。
[Sommelier - Nested Wayland](https://chromium.googlesource.com/chromiumos/platform2/+/master/vm_tools/sommelier/README.md)

これでLinuxを再起動すれば日本語設定が有効になります。
再起動は、ターミナルを閉じてから、ターミナルアイコンを右クリックで `Linuxをシャットダウン` を選択し、しばらく待ってからターミナルを起動するのがわかりやすいです。

## 日本語入力方法の設定

再起動したらFcitxの設定アプリを立ち上がれられるようになっているはずです。

```sh:ターミナル
$ fcitx-configtool
```

こんな感じのが開きます。
![Screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73833/49a82dc7-f2ee-64d5-e0be-305d798a0e82.png)

Mozcが選択されていればそのままで大丈夫です。なければ「＋」ボタンを押して追加します。
また、Global Config から入力切り替えボタンが設定できます。
（上記のMozcインストール後に再起動をしないとここにMozcが表示されませんので注意）
Ctrl＋Spaceのままでもいいし、お好みで設定できます。

![Screenshot 2021-03-25 22.43.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73833/c8724025-80fe-b595-e93b-69ecf06801ab.png)

自分は結局デフォルトのまま使っています。そのままで良い人は設定アプリの立ち上げも不要かもです。

これで日本語環境は一通り完了です。
数年前にCrostiniをいじったときはもう少し手順が多かったです。随分簡素になって嬉しいですね。

## Dockerのインストール

公式サイトのドキュメント通りでインストールできました。
https://docs.docker.com/engine/install/ubuntu/

（不要かもですが）古いファイルをアンインストール

```sh:ターミナル
$ sudo apt remove docker docker-engine docker.io containerd runc
```

必要なパッケージをインストール

```sh:ターミナル
$ sudo apt update
$ sudo apt install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg \
    lsb-release
```

Dockerのインストールに必要な復号キーを設定します。

```sh:ターミナル
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
```

Dockerのリポジトリを登録します。

```sh:ターミナル
$ echo \
  "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
```

Dockerをインストールします。

```sh:ターミナル
$ sudo apt update
$ sudo apt install docker-ce docker-ce-cli containerd.io
```

以上でインストール完了
Dockerが起動するか確認します。

```sh:ターミナル
$ sudo docker run hello-world
```

## Docker Composeのインストール

こちらも公式サイトのLinuxのところ参照
https://docs.docker.com/compose/install/

```sh:ターミナル
$ sudo curl -L "https://github.com/docker/compose/releases/download/[バージョン番号]/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
```

バージョン番号のところは任意のバージョンが入ります。
とくに指定のバージョンがない場合は公式サイトのをそのまま使うのが良いと思います。

実行権限を付与

```sh:ターミナル
$ sudo chmod +x /usr/local/bin/docker-compose
```

### 実行時にエラーになる場合

`/usr/bin` にシンボリックリンクを作っておくといいらしい。

```sh:ターミナル
$ sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
```

インストール確認

```sh:ターミナル
$ docker-compose --version
# バージョンが表示されればOK
```

## npmのインストール

ウェブのフロントエンドで必須のnpmをインストールします。
Node.js、npmのバージョンを管理したり切り替えたりできるnvmが便利だったのでインストールしました。

こちらも公式サイトのままで
https://github.com/nvm-sh/nvm

__インストール__

```sh:ターミナル
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/[バージョン番号]/install.sh | bash
```

こちらもバージョン番号に指定がないときは公式のを参考にするのがよいです。

__起動設定__
Linux起動時に自動的に起動するように設定します。
下記コマンドで、`.bashrc`に起動コマンドが書き込まれます。

```sh:ターミナル
$ export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
```

__起動__

```sh:ターミナル
$ [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # 起動コマンド
```

__確認__

```sh:ターミナル
$ nvm --version
```

一応Linux再起動してちゃんと起動しているか確認してみましょう。

## Node.js、npm のインストール

nvmをつかってNode.jsをインストールします。
nvmがあれば、いろいろなバージョンをインストールしたり切り替えたりして使えて便利ですが、とりあえず安定版のみインストールする方法です。

```sh:ターミナル
# 安定版をインストール
$ nvm install stable --latest-npm
# 安定版を使用
$ nvm alias default stable
```

以上でNode.jsとnpmのインストール完了
確認します。

```sh:ターミナル
# Node.js確認
$ node --version
# npm 確認
$ npm --version
```

以上で、npmの環境も整いました。

# PHP環境（Laradock）のインストール

Laravelの開発環境でおなじみのLaradockを使って開発するときに、ChromeOSはhostsが書き換えられないので少し不便です。
PHPの開発環境であるLaradokのインストールとhosts記述の代替えになる手段をこちらにまとめたのでよろしければどうぞ。
[Crostini + Laradock でChromebookのPHP開発環境をつくる](https://qiita.com/shin1kt/items/bf2f7a7b905c50b584a9)

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


# code-serverのインストールと設定

Chromebookでコード書くのにLinux版VS-Codeが一般的だし最良の選択ではありますが、Chromebookと相性のよい（と自分では思っている）クラウド版VS-Codeであるcode-serverをインストールして使えるようにする方法を紹介します。

## code-serverとは

[公式のリポジトリ](https://github.com/cdr/code-server)
> Run VS Code on any machine anywhere and access it in the browser.

とのことで、サーバ上でVS-Codeを実行してブラウザで使う。というプロジェクトです。
こちらの記事[^2] で紹介されていたのですが、つまりChromebookなら、Crostini（Linux）で稼働させて、Chromeブラウザからアクセスすることで、ChromeOSのメインの環境でVS-Codeが使えるというとても素晴らしいアイディアだと思います。

## インストール

公式の通りで問題なくインストールできました。

```sh:ターミナル
$ curl -fsSL https://code-server.dev/install.sh | sh
```

公式のドキュメントには一応、`--dry-run`でお試しをする手順が書かれていますので、初めての人は試した方がいいかもです。


## 起動

```sh:ターミナル
$ code-server
```

## 設定ファイル確認

起動すると設定ファイルが作成されますので、内容を確認しておきます。

```sh:~/.config/code-server/config.yaml
bind-addr: 127.0.0.1:8080
auth: password
password: *******************
cert: false
```

パスワードをメモったらChromeブラウザから

これで起動します。 動いたら、 `http://localhost:8080` にアクセス
パスワード入力画面が表示さえるので上のパスワードを入力すれば、ブラウザにVS-Codeが表示されるはずです。
LinuxでVS-Codeをインストールするよりも、ChromeOSの日本語入力などが使えるし動作も早い（気がする）のでとてもよいです。

## 自動的に起動

ここまできたら、Linux起動時に自動的に起ち上がるようにしたいですのでサービスとして登録して自動的に起動するようにします。

### 設定ファイルを書き換え

これは任意ですが、自分はポート8080は他の開発案件のときに使ったりしそうだなと思ったのでポートを変更しました。

```sh:~/.config/code-server/config.yaml
bind-addr: 127.0.0.1:50080
auth: password
password: *******************
cert: false
```

### 起動コマンドを作成

起動させるためのコマンドを作成します。

```sh:/opt/code-server.sh
#!/bin/bash

/usr/bin/code-server /home/[ユーザー名] --config="/home/[ユーザー名]/.config/code-server/config.yaml"
```

1つ目の引数は初期ディレクトリです。ホームにしましたが、他のディレクトリでもよいと思います。
configオプションで指定しているのは、上で設定ファイルです。ここを変更すれば他の設定で起ち上げたりできそうです。
コマンドやファイルはフルパスで書きます。

### 実行権限

コマンドに実行権限付与

```sh:ターミナル
$ sudo chmod +x /opt/code-server.sh
```

### サービスの作成

自動起動させるためのLinuxサービスの設定です。

```sh:/etc/systemd/system/code-server.service
[Unit]
Description = code-server service

[Service]
ExecStart = /opt/code-server.sh
Restart = always
Type = simple
User = [ユーザー名]
Group = [ユーザーグループ名（ユーザ名と同じで大丈夫なはず）]

[Install]
WantedBy = multi-user.target
```

`ExecStart`は先程つくった起動コマンド
`User` `Group` はユーザー名とグループ名（おそらく同じ名前でいけるはず）を指定（これを指定しないとVS-Codeでターミナル開いたときにrootユーザで開いてしまい不便です）

### サービスの起動

上記まで作ったらサービスの起動。

```sh:ターミナル
$ systemctl start code-server
$ systemctl enable code-server
```

これでLinux起動時に自動起動します。
停めたくなったら。

```sh:ターミナル
$ systemctl stop code-server
$ systemctl disable code-server
```

（※）念の為、あくまでお手軽にカンタンにChromebook内のローカルで使うための設定ですので、公開サーバとかのときはちゃんとした設定が必要です。

### PWAとしてインストール

ここまできたら、code-severをVS-Codeライクにつかうためにもうひと手間
PWAとしてインストールしてしまいましょう。
やり方はカンタンです。

1. Chromeブラウザでcode-serverを開く
2. [︙]をクリックしてメニューを開く
3. code-serverをインストール という項目をクリック

以上で完了
Dockにアイコンがシェルフに表示されるはず。
デスクトップアプリみたいな感じで起動します。

### VS-Codeの編集

お好みですが、Chromeブラウザで起動させるためにショートカットキーがChromeOSのものと被ってしまうので、最初だけ諸々設定する必要があります。
code-serverの設定や操作方法はVS-Codeなので、あとはいつものようにやれば大体いつものようにやれます。
ただ、拡張機能が本家VS-Codeと比べて少なかったり古かったりします。なんとかした場合は
https://qiita.com//canonrock16/items/b043a996fe1175298207
こちらの記事で詳しく解説されているのでオススメです。

# バックアップ

大体ここまでで一通りかなと思います
ChromeOSのCrostiniには環境をまるっとバックアップする機能がついていますので、このあたりまで設定したら一旦バックアップを取っておけば、何かあってLinux環境を潰したときもすぐに復元できるし、Googleドライブに保存してしまえば他のChromeboookでも復元できるのではないかと思います。

# さいごに

以上でChromebookに最低限のウェブ周りの開発環境が構築できました。
あとは、FirebaseやAWSのCLIなどもインストールできますので、JSからPHPから色々遊べると思います。
なんというか、Chromebookでやる必要あるの？と聞かれたら、今のところは「ロマンなので」としか言えない状態ではありますが、Chromebookは今のところは文教向けだったり家庭でのライトユース向けなイメージがありますが、市販されているLinuxベースOSのPCなので開発側にも少しづつ向いてくれれば面白くなっていきそうな感じはあります。
安くて速くて、Andoroidアプリが使えて、ペンでお絵かきやメモもできて、なおかつ開発もできる。という贅沢さに惹かれる今日このごろです。




# 参考サイト

以下のサイトにとてもお世話になりましたありがとうございました。

- [Chromebook Crostini の有効化と日本語化](https://zenn.dev/igac/articles/84d1f377bcd9d698ee8d)
- [Crostiniで日本語環境設定:健康で文化的な最低限度の生活のためのChromebook設定(2)](https://scrapbox.io/hada/Crostini%E3%81%A7%E6%97%A5%E6%9C%AC%E8%AA%9E%E7%92%B0%E5%A2%83%E8%A8%AD%E5%AE%9A:%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(2))
- [ChromebookにLibreOfficeをインストールしてみました](https://ja.blog.documentfoundation.org/2019/12/05/install-libreoffice-on-chromebook/)
- [Chromebookには、VS Code より code-server がオススメ](https://note.com/digzero/n/n70ee0402a92b)
- [リモートサーバー上でvscodeを動かしてブラウザからアクセスする ―code-serverのススメ](https://qiita.com//canonrock16/items/b043a996fe1175298207)
- [ブラウザ上でVScodeが使えるcode-serverを試してみる](https://www.cleartex.net/entry/2019/04/23/codevsc)



[^1]: ChromebookにLibreOfficeをインストールしてみました (https://ja.blog.documentfoundation.org/2019/12/05/install-libreoffice-on-chromebook/)

[^2]: Chromebookには、VS Code より code-server がオススメ (https://note.com/digzero/n/n70ee0402a92b)