Steam Deckを買いました。ゲームもやってますが、それと同じくらいWebアプリの開発機としても使いたいなと思っています。
一度VSCodeやDockerのインストールに挑戦はしたんですが、Arch Linuxに慣れていない点や、
https://help.steampowered.com/ja/faqs/view/671a-4453-e8d2-323c
こちらの記事にある
Flatpak以外（例：Pacmanなどを使用）でインストールしたものはすべて、次のSteamOSアップデートで消去される可能性があります。
という点が引っかかってしまい、一旦諦めてしまいました（その後のOSアップデートで無事作りかけの開発環境は消えてしまいました）。
今回は
こちらの記事を参考にDistroBoxを使ってWebアプリ（React）の開発環境構築をしてみたいと思います。確かに、コンテナ内に作るのが一番クリーンそうです。
0. DistroBoxのインストール
上記の記事を参考にインストールします。
0.1 DistroBxとは
Linux内に別のディストリビューションのLinuxを、WinsowsのWSLのように立ち上げることが出来るもののようです。Qiitaでdistroboxというタグのついた記事が全くないのが少し驚きでした（Dockerのタグのついた記事はめっちゃある）。
起動されたコンテナはホストシステムと高度に統合され、これにより、外部ストレージ、USBデバイス、およびグラフィカルアプリケーションとともにユーザーのHOMEディレクトリを共有できます。
というのがちょっと面白そうなところですね。
1. Ubuntuコンテナを追加
Ubuntu:22.04を追加します。
$ distrobox create -i ubuntu:22.04
こちらの環境ではエラーが出てしまいました。
どうも/etc/subuidと/etc/subgidにdeckユーザーを追記する必要がありそうです。
どちらのファイルも
root:100000:65536
という内容になっていたので、そこに
deck:200000:65536
を追記しました。
続いて
$ podman system migrate
$ podman unshare cat /proc/self/uid_map
を叩くと
$ distrobox create -i ubuntu:22.04
が正常終了しました。
2. UbuntuコンテナにVSCodeをインストール
Windows＋Dockerの場合だとDevContainerを使うところですが、今回はUbuntuコンテナにVSCodeをインストールし、コンテナ内から
$ code .
を叩くようにしてみます。
distrobox enter ubuntu-22-04
でUbuntuコンテナ内に入ります。ちなみにコンテナ作成時に--nameオプションでコンテナに名前を付けることが出来ます（デフォルトではubuntu-22-04という名前のコンテナが作成されます）。
こちらから.debをコンテナ内にダウンロードし、コンテナ内で
$ sudo dpkg -i code_xxx_amd64.deb
を叩きます。
しかしこちらの環境では、色々とパッケージが足りないと言われてしまいました。
とりあえず、パッケージマネージャーをアップデートします。
$ sudo apt-get update
インストールされているパッケージも最新化しておきます。
$ sudo apt-get upgrade -y
すると再びエラーメッセージが表示され、apt --fix-broken installを叩くよう表示されたので、
$ apt --fix-broken install
を叩きます。これで再実行すると、無事UbuntuにVSCodeがインストールされました。
3. VSCodeの開発環境構築
Ubuntu内の任意のディレクトリで以下を叩きます。
$ code .
するとVSCodeのウィンドウが開きます。コンテナ内にリモート接続しているわけではなさそうですが、Ubuntu内が参照できています。
後は通常の環境構築を進めることになります。
3.1 Node.jsをインストール
以下のコマンドでNode.js18が入ります。
$ curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
$ sudo apt-get install -y nodejs
3.2 Reactの開発環境構築
$ npm create vite <プロジェクトディレクトリ>
を叩くとまずviteのインストールが始まり、Viteを使った環境構築が始まります。
環境構築後、
$ cd <プロジェクトディレクトリ>
$ npm run dev
でブラウザでアプリケーション画面が確認できるようになり、ついでにファイル編集でHMRが動いていることが確認できると思います。
3.3 コンテナとのファイル共有に関して
$ distrobox rm Ubuntu-22-04
でコンテナを削除してしまえば、コンテナ内にインストールしたVSCodeは消えてしまいます。ただhomeディレクトリは（Dockerと違い）特に設定しなくてもコンテナ内外で共有されているので、開発したソースファイル等は残りそうです。
まとめ
今回の構築方法でも、SteamOSのアップデートで消去されないかは残念ながらまだ未検証です（そのうちわかると思います → 消去されないようでした）。
そんな場合でもVSCodeのインストールだけ済ませたUbuntuをイメージ化しておくと、少しは再構築が楽そうですね。
SteamDeckが気軽なゲーム機だけでなく、気軽な開発環境機になると良いなと思います。