Zenn
💻

[2023年1月版]Chromebook 事始め ~ Chromebook Linux で開発環境の構築

2023/01/13に公開
GitHub
Node.js
VS Code
Debian
Chrome OS
tech

Chromebook に VS Code 入れて Node.js の開発環境を整えてみる

年末のAmazonセールでChromebookを買ってみたがなかなか良さげなのでついでにLinux環境整えてあんなことやこんなことができるといいな？ということで・・・いろいろ入れてみたログです。

1. 準備: Linuxの有効化

Terminal アプリを起動するとメニューからLinux機能が有効にできます。
以下は有効化済みなので Manageボタンになっているが、初期状態では Set Up となっており、ここからLinux機能を有効化できます。

上記の画面から penguin をクリックするとターミナルのセッションが開始され、別タブでターミナルがログインした状態で表示されます。

ターミナルが使えるようになったのでhostnamectlコマンドでコンテナ内の環境を確かめてみましょう。

$ hostnamectl
Static hostname: penguin
Icon name: computer-container
Chassis: container
Machine ID: xxxxxxxxxxxxxxxxxxxxxxxxxxxx
Boot ID: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Virtualization: lxc
Operating System: Debian GNU/Linux 11 (bullseye)
Kernel: Linux 5.10.147-20159-g06a9a2b12b31
Architecture: arm64

というわけで、Linuxコンテナの中身はバッチリDebian 11 bullseyeでARM64アーキテクチャであることが確認できました。

ついでに、このコンテナの中身は外側のChromeOSとは別世界なので個別にOSの面倒を見る必要がありまして・・・。
そんなわけで apt update します。

$ sudo apt update
Hit:1 http://packages.microsoft.com/repos/code stable InRelease
Ign:2 https://storage.googleapis.com/cros-packages/108 bullseye InRelease
Hit:3 https://deb.debian.org/debian bullseye InRelease
Hit:4 https://deb.debian.org/debian bullseye-updates InRelease
Hit:5 https://deb.debian.org/debian-security bullseye-security InRelease
Hit:6 https://storage.googleapis.com/cros-packages/108

bullseye Release
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
20 packages can be upgraded. Run 'apt list --upgradable' to see them.

いろいろアップデートがあるようなのでアップグレードしましょう。

$ sudo apt upgrade -y
...

数分の後にアップグレード完了です。

2. VS Code のインストール

以下の公式サイトよりバイナリをダウンロードします。

公式サイト: https://code.visualstudio.com/download

上記で確認したとおりLinuxのDebian、そしてアーキはARM64なのでDebian横の小さいボタンARM64をクリック。バイナリがダウンロードされます。

ダウンロードしたアプリはブラウザからでもファイルアプリからダウンロードでも見れますが、.debファイルをタップすると以下のようにインストールメニューが表示され、OKボタンでインストールしてくれます。

VS Codeのインストールはなんとこれだけ。
ストアのアプリと同じように簡単にコンテナ内のDebianにアプリをインストールして使えるのでめっちゃ便利です。

3. Node.js のインストール

Node.js は nvm でバージョン管理したいので nvm 経由でインストールを行います。

3-1. nvm のインストール

ターミナルを立ち上げ、公式サイト: https://github.com/nvm-sh/nvm よりいつものインストールコマンドを叩く。

$ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
=> Downloading nvm from git to '/home/asopitechiotresearch/.config/nvm’
…

インストールはこれにて完了。念の為に、~/.bashrcも確認しておく。

$ cat ~/.bashrc
# ~/.bashrc: executed by bash(1) for non-login shells.
...
export NVM_DIR="$HOME/.config/nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

というわけで無事にnvmのおまじないが最後に追加されていることが確認できました。

これを sourceいたします。

$ source ~/.bashrc

これにて nvm の準備完了です。

3-2. Node.js 18 LTSのインストール

現時点のLTSである18をインストールしてみます。

$ nvm install 18
Downloading and installing node v18.13.0...
Downloading

https://nodejs.org/dist/v18.13.0/node-v18.13.0-linux-arm64.tar.xz
...
################################################################################ 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v18.13.0 (npm v8.19.3)
Creating default alias: default -> 18 (-> v18.13.0)

滞りなく node.js のインストールが完了いたしました。
一応、バージョンを確認してみます。

$ node -v
v18.13.0

無事にnode.jsもインストールできました。

4. Github CLIのインストール、Git の認証など

つづいて gitコマンドと Github での認証ですが、今回は SSHキーを生成するのが〇〇なので Github 公式 CLIである gh コマンドを使って認証とgit連携を行ってみたいと思います。

4-1. Github CLIのインストール

公式サイトのドキュメント: https://github.com/cli/cli/blob/trunk/docs/install_linux.md のコマンドをそのまま使います。
ただし、curlはすでに使えるのでcurlのインストールは省きます。

$ curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg \
  && sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg \
  && echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null \
  && sudo apt update \
  && sudo apt install gh -y
...

こちらにてghコマンドのインストールは完了です。

4-2. Git 認証

さっそくghコマンドにてgithubにログインします。

$ gh auth login
...

ブラウザを介してログインが行えます。

その後、以下のコマンドにて git コマンドの認証ヘルパーをghにします。

$ gh auth setup-git

これにて git pushなどする際に ghコマンドでの認証情報が使用されます。
めっちゃ楽ちんです。

4-3. Git ユーザーのグローバル設定

Git コマンドでコミットする際のユーザー名、メールアドレスは以下のコマンドで設定可能です。

$ git config --global user.name "*Mona Lisa*"
$ git config --global user.email "*email@example.com*"

ここでなくても構いませんがメモをしておきます。

5. build-essential も入れてみる

ついでに make コマンドなどビルドツールを使うのに build-essential パッケージのインストールをします。

$ sudo apt install build-essential

ディストリによってパッケージ名が変わるのでアレなんですが、Debian系は build-essentialなのですよね。。。

Google 日本語入力について

ChromebookのLinux機能では日本語入力が未対応です。本家サイト: https://www.google.co.jp/ime/ でもあるとおり、

Linux ではオープンソース版の Mozc をご利用ください。

とのことですので、Mozcをインストールいたします。
Chromebook+LinuxでのMozcのインストールは以下のサイトの手順でバッチリ動きましたのでリンクを貼っておきます。

ありがとうございます。
これにて無事にVS Codeで快適な日本語入力が行えるようになりました。

ひとまず、着地といたします。

感想など

VS Code のインストール手順のところでも触れましたが、Linuxのデスクトップアプリがシームレスにインストールできてすんなり使えるのが非常に便利。というかぶっちゃけ、こんなにまともにDebianのデスクトップアプリを使用するの初めてです。すごい。
本機はPlayストアのAndroidアプリとChromeOSでのChromeブラウザ、Debianのデスクトップアプリがシームレスに連携できる(ターミナルでlocalhostでサーバー立ち上げて、localhost:3000とかのURL開くとChromeからちゃんと見れたり、PlayストアのアプリからVS Codeにコピペできたり。。。)ので、なかなか感動的です。。いや〜。。。すごい。っていうかどうなってんの？

AppleのMacbook出たときもそうだったけど、ネットワークに繋いでいろんな環境をシームレスにするとクライアントを軽くしてもいいよね〜？ってメーカーの思惑はあると思うけど、いろんなアプリが動くならクライアントのメモリ増やしてサクサクにさせたくなるんですよね。そこらへんの不一致がかなりあると思う。
Googleの本意じゃないだろうが、シンクライアントっぽい用途じゃなくてメモリ積んでバリバリ開発に使いたい。
(今、2GBよ？コレ。。。実はRust入れてみましたが全然、ダメでした。ほぼフリーズしちゃいました。いや、2GBで試すなよって。)

年末セールで３万円台で買えたのでこれにはめちゃくちゃ満足ですが、Chromebookの真価はわかったのでもうちょい貯金して強めのスペックのものを攻めてみたいとおもいました。

本日は以上です。

Discussion