Zenn
タケユー・ウェブ株式会社Publicationへの投稿
🎃

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

takeyuweb
2024/04/01に公開
devcontainer
tech

はじめに

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 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

Welcome to DevPod

セットアップ

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

Configure Provider before creating a workspace

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

Configure Provider docker

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

Create Workspace

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

試しに 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

localhost:3000

Port Forwarding について

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

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

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を使用することができました。

VSCode on iPad Safari

まとめ

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

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

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

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

タケユー・ウェブ株式会社
タケユー・ウェブ株式会社Publication

Ruby on Rails が得意なWebサービス受託開発会社です。 中小規模のWebサービスの新規開発の他、他の個人開発者などから引き継いで保守運用を行ったりしています。 新規開発、お手伝いや顧問、レガシーなRailsプロジェクトの保守など、ニーズにあわせて対応できます。ご相談ください。

Discussion