自宅PCとDevPodで実現する Self-Hosted な Codespaces

はじめに

GitHub Codespacesは、Web版VSCodeでクラウド上のDevContainerを使用できる便利なツールです。しかし、自作PCやサーバーが趣味の私たちにとっては、手元の高性能端末をサーバーにできないのは不満です。そこで、DevPodを試してみました。

この記事の対象読者

• 自己ホストできるCodespaceを探している方
• DevContainerで動くWeb版VSCodeを使いたい方
• 日常的にDockerを使っている方

この記事に書くこと

• DevPod のインストールと最初のセットアップ方法
• Tailscaleと組み合わせて便利に使う方法

この記事に書かないこと

• DevPod の詳しい説明
• DevContainer の説明
• Docker の説明
• Tailscale の詳しい説明

DevPodとは

https://devpod.sh/
DevPod は DevContainer を実行するためのオープンソースのクライアントツール です。ローカルのDocker Engineのほか、AWSなどパブリックラウド上など、任意のプロバイダーにホストして実行することができます。

クライアントのみでサーバは含まれないため、すでにDockerを利用している場合は、新たに何もサーバを設定することなく、導入することができます。IDEはVSCodeのほか、DevContainerを採用するIDEが増えれば利用できます。

macOS、Linux、Windows用のGUIツールの他、コマンドラインを好む人向けの Quickstart DevPod CLI | DevPod docs | DevContainers everywhere もあります。

DevPodのインストール

WSL2上のUbuntuにDevPodをインストールします。

Windows版もありますが、Windowsファイルシステム上にワークスペースを作成すると、作成されるファイルのパーミッションが777になってしまうため、Linuxのファイルシステムを使用します。

環境

• Windows 11 Pro 23H2
• WSL 2.1.5.0
• WSLg 1.0.60
• Ubuntu 22.04.3 LTS (WSL2)
• Docker Desktop 4.28.0
• Tailscale 1.62.0
• DevPod 0.5.4 linux x86_64

ダウンロードと実行

ドキュメントに従って必要なパッケージをインストール

$ sudo apt-get install fuse libfuse2 libopengl0 libfribidi0

AppImageファイルをダウンロードして実行権限を付与して実行

$ wget -O DevPod_linux_amd64.AppImage https://github.com/loft-sh/devpod/releases/latest/download/DevPod_linux_amd64.AppImage?_gl=1*ut94ps*_ga*MTEzNTY1MTQ4NS4xNzExMjYyMzky*_ga_4RQQZ3WGE9*MTcxMTI3NDM3OS40LjEuMTcxMTI3NDYzOS42LjAuNjgxNDMzNzI.*_gcl_au*MTgwNjMxNjIyOC4xNzExMjYyMzky
$ chmod o+x DevPod_linux_amd64.AppImage
$ ./DevPod_linux_amd64.AppImage

セットアップ

Workspace > Create WorkspaceからProviderを作成します。ここではローカルPC内のDockerを使うので、Dockerを選択します。

続けてDocker Hostなどの設定があるが、今回はローカルホストなのでデフォルト（空欄）のまま Add Provider をクリック。
（厳密にはWSL Ubuntuからみて、Docker Desktop はリモートだが、WSL Ubuntuからはそれを意識することはない）

続けてワークスペース作成画面となるので、「Workspace Source」に対象のGitHubリポジトリまたはディレクトリのパスを選択し、Providerに先ほど作成したDocker、Default IDEに「VSCode Browser」を選択して、 Create Workspace をクリック。

するとDevContainerのビルドがはじまり、完了するとWeb版VScodeが起動します。
私の環境ではWSL2にUbuntu版Chromeをインストールしているので、そちらが使用されましたが、もちろんWindowsからも http://localhost:10800/?folder=/workspaces/content でアクセスできます。

試しに rails server を起動すると、 http://localhost:3000 でアクセスできます。

$ bin/bundle
$ yarn
$ bin/dev
省略
10:36:04 tailwind-application.1  | Done in 475ms.
10:36:05 web.1                   | => Booting Puma
10:36:05 web.1                   | => Rails 7.1.3.2 application starting in development 
10:36:05 web.1                   | => Run `bin/rails server --help` for more startup options
10:36:05 tailwind-active_admin.1 | 
10:36:05 tailwind-active_admin.1 | Done in 1248ms.
10:36:05 web.1                   | Puma starting in single mode...
10:36:05 web.1                   | * Puma version: 6.4.2 (ruby 3.3.0-p0) ("The Eagle of Durango")
10:36:05 web.1                   | *  Min threads: 5
10:36:05 web.1                   | *  Max threads: 5
10:36:05 web.1                   | *  Environment: development
10:36:05 web.1                   | *          PID: 6420
10:36:05 web.1                   | * Listening on http://127.0.0.1:3000
10:36:05 web.1                   | Use Ctrl-C to stop

Port Forwarding について

DevPod + Web版VSCode のみでは、Port Forwarding が行えません。
ローカルのDockerにホストしている場合は、 localhost でアクセスできるので問題ありませんが、リモートホスト上で実行する場合は別途、利用環境に適した形で Port Forwarding する必要があります。

本記事では、Tailscale Serve を使用します。

VSCode内蔵のPort Forwarding機能は利用できません。VSCode Serverでは、vscode.dev を利用して実現するが、Web版VSCode（OpenVSCode）にはそれがない為。

Tailscaleで安全にiPadからWeb版VSCodeにアクセスする

Tailscale Serveを利用することで、同じTailnet内のノードにのみ、特定のtcpポートへのアクセスを開放することができます。

Windows PowerShellで、以下のようにして 10800番と3000番をそれぞれ公開します。

> tailscale serve --http 10800 10800
> tailscale serve --https 3000 3000

これでTailnet内からのみ、
Web版VSCode https://xxxxx.tailxxx.ts.net:10800
Rails Server https://xxxxx.tailxxx.ts.net:3000
にアクセスできるようになりました。

TailscaleをインストールしたiPadから、上記URLにアクセスすると、無事iPadから自宅PCにホストしたDevContainer上で動作するWeb版VSCodeを使用することができました。

Blocked hodssts: xxxxx.tailxxxx.ts.net:3000
Railsの Host Authorization 設定が必要です。

config/environments/development.rb

config.hosts << ".tailxxxx.ts.net"

https://railsguides.jp/configuring.html#actiondispatch-hostauthorization

まとめ

DevPodの活用により、Self-HostedなCodespacesのような開発環境を構築することが可能となりました。 さらに、Tailscaleとの組み合わせにより、安全かつ簡単にインターネット経由での利用が可能となりました。

しかしながら、iPadなど、DevPodを直接利用できない端末では、リモートデスクトップやSSHなどを用いて事前にリモートサーバーに接続して起動する必要があり、これには一定の手間が伴います。ただし、TailscaleやTailscale SSHを利用することで、これらの作業は大幅に簡素化されます。

iPadなどからの利用を想定する場合、特別な事情がない限り、短時間の利用を前提とした開発環境として、Codespacesの利用が推奨されます。GitHub上からボタン一つで環境を作成できるCodespacesの利便性は、非常に高いと言えます。

しかし、Codespacesの利用が困難な場合や、既存のインフラを活用したい場合などには、DevPodが独自の強みを発揮します。既存のインフラを活用して開発環境を構築できるDevPodは、その柔軟性から見ても、非常に有用なツールと言えるでしょう。