💻

オレオレCodespacesで快適なお外開発

2023/12/23に公開

お外はこわい所🥺

皆さんもそのように教わり、経験からもそのとおりだと考えているはずです
お外がこわい要因は様々ありますが、その最たるものとして、お外でプログラミングをするのは渋いが挙げられます

お外で開発は渋い😣

今の世の中、お外で開発すること自体は難しくありません
しかしいずれも相応の代価を差し出さなくてはなりません
代表的な例を見てみましょう

ノートPCを持っていく💻

単純にノートPCを持ち出して、お外で開いて開発する方法です

メリット

  • お外で開発する場合で最も理想通りの開発環境を手に入れることができる
  • 人によってはメインマシンとして使っているため環境構築がいらない
  • カフェでドヤ顔ArchLinuxができる

デメリット

  • 軽くても1kg前後の精密機械を追加で持ち歩く必要がある
  • 充電器も必要で、電源供給できる場所でないと短時間しか使えない
  • じっくり腰を据える場合でないと開く気になれない

コワーキングスペースやカフェに行くなど、開発そのものを目的としたお出かけなら最適解ですが、それ以外の場合ではデメリットの方が大きすぎます
例えば、デート中にちょっとした休憩に入ったカフェで開くためだけに1日持っていては大変だし、電源が使えるカフェとは限りません

Codespaces on タブレット📱

GitHubのCodespacesを使って、タブレットなど普段持ち歩いているデバイスにキーボードを追加で使用して開発する方法です
最近ではスマホ+XREAL Airを使うのもありかも

メリット

  • タブレットなど普段持ち歩くデバイスでブラウザを開くだけで良い
  • 電池持ちがPCと比べて良い
  • 通常のモバイルバッテリーやType-Cの充電器があれば充電できる
  • VSCode内でターミナルも使えてほとんどの場合十分な開発環境

デメリット

  • 無料枠があるとはいえ安心してダラダラ開発できない
  • CPUコア数など性能を増やせばその分課金は増える

ほとんどのデメリットが消えて課金の心配くらいしかない気がします
ちょっとしたお出かけにノートPCという重装備は必要なくなり、カバンも小さくシンプルにできそうです
開発体験も設定すれば中でDockerが使えたり主要なShellはインストール済みだったり、開発サーバーを立てるのもポートをフォワードしてくれるので便利です

お金を考えずにCodespacesしたい!💸

Codespacesは非の打ち所がない最強サービスに思えますが欠点があります
無料枠がそこそこあるとはいえ、ダラダラと長時間使っていたり、使用する頻度が多いと課金が発生してしまいます
それでも結構安いので稼いでる方なら問題ないかもしれませんが
私のような来週食べるご飯のお金すら心配する必要がある貧乏エンジニアにはのっぴきならない問題です仕事ください

そこに自宅サーバーがあるじゃろ🧐

今日では、どこのご家庭にも常に稼働しているが十分に活用されていない自宅サーバーがあるということが一般に知られています
この眠っているポテンシャルを利用しない手があるでしょうか(いや無い)
かくいう私の部屋にもたまにマイクラ鯖を開くくらいでしか使われてないDeskmini(Ryzen5 2500G)が常に稼働していました
というわけでこいつを使って無料で使い放題のオレオレCodespacesを構築しましょう

CodespacesはVSCode Server👈

構築する前に「Codespacesなんて自分で建てれるの?」という話ですが
これは簡単な話で、CodespacesはVSCode本体に組み込まれているVSCode Serverの機能を拡張したりコンテナ化して実現しているっぽいので
このVSCode Serverを建てれれば実質Codespacesとして使えそうです

実際に構築してみよう🙌

サーバー起動

VSCodeのインストール

自宅サーバーはUbuntu ServerなどCUIで使っていることが多いと思うのでVSCode CLIをインストールします
※ 普通のVSCodeをインストールするとX Serverが必要らしい

# お好きな場所で
curl -Lk 'https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64' --output vscode_cli.tar.gz
tar -xf vscode_cli.tar.gz

上記のコマンドでカレントディレクトリにcodeという実行ファイルが生成されるのでこいつにPathを通すなり/usr/local/binに放り込むなりする

VSCode Serverを起動する

普通に起動する

code tunnel

最初に起動するとGitHubアカウントかMicrosoftアカウントでの認証が求められるので表示されているメッセージに従って別のPCやスマホで認証する
Docker上で起動するなどの場合はこれだけで良さそう、簡単!

サービスとして起動する

Docker上じゃなくてサーバーに直接建てるならサービスとして起動すると具合が良さそう

code tunnel service install

# ターミナル切断してもサービスを起動したままにする
sudo loginctl enable-linger $USER

...以上です
なんとコマンドの通りアカウント経由でトンネルを生成するのでポート解放も必要ない
簡単すぎるやろ!

  • サービスを削除するのはこれ
code tunnel service uninstall

VSCodeから繋ぐ

  1. リモートトンネル: トンネルに接続するを選択
  2. アカウント認証を求められるのでサーバーと同じのを選んで認証する
  3. サーバー起動時に設定されたサーバー名を指定する(デフォルトはマシン名になる)
  4. 接続されるのでディレクトリを選んで作業できる!

ブラウザでURLから接続する場合

  1. https://vscode.dev/tunnel/[サーバー名]/([ディレクトリパス])に接続する
  2. 認証とか済ませる

うーん簡単だ
あとはほぼCodespacesと同じ使い勝手だと思います
中で建てたlocalhostのWebサーバーもポートをフォワーディングしてくれます

これで快適にお外開発✌️

正直Codespacesで問題ない人ならその方が楽かもしれないけど
私のようにお金を気にしたくない+サーバーリソースが余ってるという人ならメリットが多いと思います
また、今回はLinuxサーバー上に建てる例だったが、
先に述べた通り、VSCode ServerはVSCodeに組み込まれているので、普段使っているデスクトップPCのVSCodeをサーバーにして外から同じ開発環境で開発することもできますそっちの方が需要ありそう
ちなみにこの記事も外からVSCodeサーバー経由で書きました


実際にiPad ProでVSCodeを開く様子

以上、よいパソカタLifeを👋

参考

Discussion