西川和久の不定期コラム

GitHub+Ubuntu+VS Codeの合わせ技!「GitHub Codespaces」で実現するクラウド開発環境

 ここのところLinuxネタが続いたので、今回も同じ様な違う様な……といった話となってしまうが、Linuxを使ったちょっと変わったクラウド環境の話をしたいと思う。すでに公開後1年近く経っているのでネタとしては新鮮ではないものの、クラウドにすべて乗っかって、Webブラウザ1つあれば完結する開発環境、「GitHub Codespaces」をご紹介したい。

(ざっくりと)GitHubとは?

 GitHubについてはここでは詳しく語らないが、バージョン管理ソフト「git」の「ハブ(hub)」と、文字通りの機能がベースとなるWebサービスだ。1人1台のマシンでバージョン管理するだけならローカルでgitを使えばいいが、個人で複数環境から、もしくはグループで管理する場合は、外部からアクセス可能なサーバーが必要となる。それがGitHubだ。

 このような特性上、使うにはアカウントが必要となる。プランはFree、Team、Enterpriseの3つあり、月額料金は順に無料、4ドル/ユーザー、21ドル/ユーザー。もちろんプログラミングのコードだけでなく、原稿などドキュメントでも利用できる。

 データを保管/管理するリポジトリには、OSS(Open Source Software)などのリンク先がGitHubになっているケースのように、誰でも見れる「パブリックリポジトリ」と、仕事などで開発中のコードや書きかけの原稿など、本人や関係者だけ見れる「プライベートリポジトリ」がある。リポジトリは複数持つことができ、作成時にパブリックかプライベートかの選択が可能だ。

【お詫びと訂正】初出時にリポジトリに関する表現に誤りがございました。お詫びして訂正させていただきます。

GitHubログイン画面
原稿用のテストで作ったtestリポジトリ。Privateになっている

 後はWeb上のUIで新規作成/編集したり、ローカルでgitコマンドを使い、リモートリポジトリ(GitHub上のリポジトリ)を指定、オプションのadd/commit/push/pull/merge/branch/cloneなどを使いバージョン管理することになる。

 gitやGitHubに関しては、書き出すと凄い量になるため(加えて筆者もすべてを把握しているわけではない)、この記事での説明はここまでとする。以下、GitHubが最近搭載したおもしろい便利な機能を2つご紹介したい。いずれも2018年にMicrosoftがGitHubを買収し、実現した機能となる。

便利な機能その1:リポジトリからWeb版Visual Studio Codeを起動

 近年、オフライン/ローカルで動作する有名なアプリのWeb版、たとえばOffice Onlineだったり、Photoshopだったりの開発が進んでいる。Officeに関してはすでにかなりの完成度で、個人的にはもうオンライン版しか使わなくなってしまった。Photoshopに関しても機能不足はあるものの、ちょっと使うぐらいなら十分。今後の開発が楽しみだ。

 この2つは業務/クリエイティブ系ツールだが、開発系では「Visual Studio Code(VS Code)」のWeb版が結構前から使えるようになっており、「https://vscode.dev/」で誰でも使用可能。当時、筆者も「お!」っと思い試したものの、残念ながら多くの拡張機能が使えない、sshやターミナルが動かないなど、用途にあわなかったため、以降あまり触っていなかった。

 ところが2021年6月ごろの話だが、GitHubでリポジトリのページを開き、そこでキーボードから「.」(半角ピリオド)を入力すると、そのリポジトリをWeb版のVisual Studio Codeで開けるようになった。

GitHub上の「index.html」。ここで「.」を入力すると…
Web版のVisual Studio Codeが開く

 左側にあるExplorerで階層構造が見え、ファイルをクリックすると即表示/編集が可能。ローカルで「git clone」する必要もなく超絶便利! ただ、コードを編集してもテストする環境がないので、どちらかと言えばドキュメントやレビュー向きだが、こんな連携は素敵と久々に感動した次第だ。

 Webブラウザでここまでできるなら、あとはこの上で動作する実行環境があれば完璧では!? と思っていた矢先、ベータリリースされたのが今回メインでご紹介する「GitHub Codespaces」となる(TeamおよびEnterpriseプラン向けには2021年8月にGA(General Availability)となっている)。

便利な機能その2:GitHub CodespacesでUbuntu 20.04 LTSが起動

 このGitHub Codespaces、ざっくり言えば、「GitHub」+「Ubuntu 20.04 LTS」+「Visual Studio Code」が動作するクラウド環境だ。MicrosoftのAzureがベースになっており、指定したリポジトリをマウントした状態で、LinuxそしてVisual Studio CodeがWebブラウザ上で起動する。まさにさっき書いた“欲しかった環境”そのものだ。もちろんローカルのVisual Studio Codeからも接続できる。

 さらに、ここでのVisual Studio CodeはリポジトリをマウントしたLinux上で動作しており、UIだけWebへ載せているので、拡張機能も使用できる。つまりWebブラウザ1つで普段通りの開発が可能となる。1つ1つは目新しいものではないが、3つが連携すると、何やら凄いことになってきたような雰囲気を醸し出す。

 現在このGitHub Codespacesはベータ版で、こちらから申込可能だ(要アカウント)。「ベータ版に申込む」ボタンを押せば、あとは準備完了のメールが届くのを待つだけとなる。当初は少し時間がかかっていたようだが、筆者が試したタイミング(6月中旬)では何時間も待たずにメールが届いた。

 料金については今のところFreeプランは無料。TeamプランとEnterpriseプランについては料金が発生し、最小は2コア/4GBメモリで0.18ドル/時。ストレージは1GBが0.07ドル/月となっている。

 2コア/4GBメモリ/32GBストレージの場合であれば、1日8時間を20日間として0.18ドル×160時間=28.8ドル、32GBのストレージで0.07ドル×32GB=2.24ドルで、あわせて31.04ドル(日本円で約4,221円)。1日8時間ずっとコーディングするかは場合によると思うが、ざっとこんな感じだ。

 起動方法は簡単で、右上の自分のアイコンをクリックするとプルダウンメニューが出て、その中に「Your codespaces」とあるので選択。次の画面で「New codespace」を押すと、Repository、Branch、Region、Machine typeが出るので選択する。と言っても恐らく実際に選ぶのはRepository、Branchの2カ所になるだろう。Regionはそのまま、Machine typeは現状4コアしか選べないので、この場合、4コア/8GBメモリ/32GBストレージとなる。

プルダウンメニューから「Your codespaces」を選ぶ
「New codespace」を押す
Repository、Branch、Region、Machine typeの選択。4コアのみ選択可能
codespace起動中。4コア/8GBで約20秒
Visual Studio Codeが起動し、その中のターミナルも開く。作業ディレクトリは「workspaces/test」(testはリポジトリ名)。メモリ8GB、OSはUbuntu 20.04.4 LTS(bullseye/sid)。phpは7.3.27。30分何もしないと停止する

 待つこと約20秒。起動すると、Webブラウザ上でVisual Studio Codeと、その中でターミナルが開く。各コマンドで状況を見るとメモリ8GB、OSはUbuntu 20.04.4 LTS(bullseye/sid)、ストレージは32GBで半分近くがシステムで使用中と言った感じだ。phpは7.3.27が入っていた。案件にもよるだろうが、筆者的には十分なリソースだ(Freeプランだと2コア/2〜4GBでもいいような気がする)。

@xxxx → /workspaces/test (main) $ cat /etc/issue
Ubuntu 20.04.4 LTS
@xxxx → /workspaces/test (main) $ cat /etc/debian_version
bullseye/sid
@xxxx → /workspaces/test (main) $ free -h
              total        used        free      shared  buff/cache   available
Mem:          7.8Gi       1.3Gi       261Mi       0.0Ki       6.2Gi       6.1Gi
Swap:            0B          0B          0B
@xxxx → /workspaces/test (main) $ df -h
Filesystem      Size  Used Avail Use% Mounted on
overlay          32G   12G   18G  40% /
tmpfs            64M     0   64M   0% /dev
tmpfs           3.9G     0  3.9G   0% /sys/fs/cgroup
shm              64M  8.0K   64M   1% /dev/shm
/dev/sda1        29G   10G   19G  35% /usr/sbin/docker-init
/dev/loop0       32G   12G   18G  40% /workspaces
/dev/sdb1        32G   49M   30G   1% /tmp

 ここで何と言っても驚いたのが起動が簡単なこと。Amazon EC2やAzureでLinux環境を構築するときは、とにかくコンパネでいろいろ設定があり面倒で、AIによるサポートが欲しいほどだ(笑)。

 一方こちらはほぼリポジトリ/ブランチの指定だけでVisual Studio Codeまで含めたLinuxが起動する。これだけでも十分ありがたい。加えてあとで触れるがポートフォワーディングも自動だ。つまり動作環境のことはほとんど手間/時間をかけずコーディングに集中できる。

 実際のOSイメージはこちらにあり、見てみると

  • Published image architecture(s): x86-64
  • Container host OS support: Linux, macOS, Windows
  • Container OS: Ubuntu
  • Languages, platforms: Python, Node.js, JavaScript, TypeScript, C++, Java, C#, F#, .NET Core, PHP, Go, Ruby, Conda

とある。全部ではないがバージョンの確認をしたところ確かに入っており、これだけの言語が即使える状態になっている。

 30分何もしないと自動的に停止する機能もあり、有料プランの場合でも安心だ。無事起動したので、以降軽くテストしてみたい。

テスト1:「index.html」をWebブラウザで表示してみる

 自動ポートフォワーディングの確認として、Webサーバーを使い「index.html」を表示してみたい。ポートフォワーディングとは、たとえばローカルでWebサーバーを動かし、「http://localhost:80」とか「http://127.0.0.1:8080」とかをWebブラウザに入力するとコンテンツを表示する。これはローカルマシンでWebサーバーが動作しているからできる芸当だ。

 今回、WebサーバーはGitHub Codespace上で動いているので、内部的には同じなのだが、先のURLをローカルのWebブラウザに入力しても表示できない。手法としては、ネットからDNSで引けるサブドメインを細工、それからポートへ転送しアクセス可能といったものがあり、これだけではないが、こういった機能のこと指す。

 「index.html」を表示するにはWebサーバーが必要だが、環境を確認したところ、apacheやnginxは入っていなかった。apache入れて設定するのも「docker-compose.yml」を書くのも面倒だし、phpが初めから入っていることもあるので、phpの組み込みWebサーバー機能を使うことにした。使い方は簡単だ。

php -S 127.0.0.1:8080 -t ./

※“-S”はサーバーのIPアドレス:port指定、“-t”はドキュメントルートディレクトリ。localhostやport 80は使えない

 これを「workspaces/test」上で実行すると、そこにある「index.html」がWebブラウザに表示できる。もちろん拡張子がphpだとphpを実行、css/js/jpgなども普通に扱える。

「php -S 127.0.0.1:8080 -t ./」でWebサーバー起動
ポートフォワーディングが自動的に設定された
そのURLで開くと無事「index.html」を表示
GitHub CodespacesはWebブラウザが動けばいいので、iPadOSなどでも使用可能

 今回のケースだとURLは「https://xxxx-test-5gp65qvw6cvwrg-8080.githubpreview.dev/」となっていた。ポートフォワーディングも手で設定すると面倒なので、自動でここまでできるのは非常にありがたい。なお、この「xxxx-test-5gp65qvw6cvwrg」の部分は、環境変数CODESPACE_NAMEに入っている。従ってURLは

https://${CODESPACE_NAME}-[ポート番号].githubpreview.dev

といったかたちでスクリプトなどから参照可能だ。

 GitHub Codespacesは、Webブラウザがあれば使えるので、Windows、macOS、Linuxだけでなく、iPadOS、Androidでも使用可能だ(見にくいのを我慢すれば多分iOSでも使える)。実際iPad Pro 12.9で試してみたが、なかなか快適だった。これが使えるならiPad用のMagic Keyboardを付けるのもありかもしれない。

テスト2:dockerを使いMariaDBとphpMyAdminを動かす

 本来GitHub Codespacesは、Visual Studio Codeのdevcontainer(拡張機能のRemote - Containersを使用)が前提になっており、docker+αで非常に便利らしいのだが(勉強不足なので説明はお許しを)、では普通に「docker/docker-compose」で動いている環境はダメなのか? と言うとそんなことはない。「ps ax」でプロセスを見ると、「dockerd」が動いているので何も変更せずそのまま流用可能だ。

 そこで今回はいつもローカルでdockerを使う時、テンプレにしているファイルをそのままGitHubへアップロードした。内容的にはNginx/MariaDB/php-fpm/phpMyAdminなのだが(上の方の画面キャプチャはそうなっている)、長くなるのでNginxとphp-fpmを外して、MariaDBとphpMyAdminのみとした。ファイルレイアウト的には

docker-compose.yml
infra/
 mariadb/
  my.cnf
  sql/
   init.sql

となっている。「docker-compose.yml」はこんな感じだ。「/infra/mariadb/my.cnf」は最小限の設定だけ記述して「/etc/mysql/conf.d/my.cnf」へ、「/infra/mariadb/sql」はそこにある「init.sql」を使ってデータベースを初期化する。あとは適当にデータベース名、rootのパスワードやユーザー/パスワードを設定。phpmyadminはDBの設定に合わせる。

version: "3"
services:

  db:
    image: mariadb:latest
    hostname: db-server
    ports:
      - 3306:3306
    environment:
      - MYSQL_ROOT_PASSWORD=password
      - MYSQL_DATABASE=test
      - MYSQL_USER=user
      - MYSQL_PASSWORD=userpass
      - TZ=Asia/Tokyo
    volumes:
      - ./infra/mariadb/sql:/docker-entrypoint-initdb.d # 初期テーブルセット
      - ./infra/mariadb/my.cnf:/etc/mysql/conf.d/my.cnf # ローカルのmy.cnfをマウント

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=db-server
      - PMA_USER=root
      - PMA_PASSWORD=password
    links:
      - db
    ports:
      - 8080:80
「docker-compose up -d」実行中
phpMyAdmin起動

 ここまでできれば「docker-compose up -d」を実行するとphpMyAdminが起動し、「init.sql」で定義したデータベースができている。ポートフォワーディングも含め問題なく動作を確認できた。以降は用途に応じてnginxやphp-fpmなど、好きなコンテナを足せばよく、普通の「docker/docker-compose」の環境となる。

 起動直後から主要言語が使える状態なので、そのままで行けるならリポジトリへはコードのみ。データベースなど+αが必要な場合は、ベースの環境に「sudo apt install」してもいいが、一般的には手軽なdockerを使ってコンテナを追加して行くことなるだろう。テスト2のように、ローカル環境で使っている「docker-compose.yml」なども含め一式リポジトリへ入れてしまえばよい。

 加えて先ほど書いた通り、GitHub Codespacesではdevcontainer(リポジトリ内の.devcontainerフォルダとその中にあるdevcontainer.jsonやdocker-compose.yml、Dockerfileなどで構成)によって、より効率よく開発環境を構築可能だ。

 さて、Freeプランの場合、現在無料のGitHub Codespaces。最終的にいくらになるかが気になるところ。ストレージは32GBで使用率40%で、これ以上削るのは難しそうなので、2コア/4GBメモリでのTeamの価格になってしまうと個人ではちょっと厳しい。とは言っても1コア/2GBで半値も厳しい……。上手い落としどころが欲しいところだ。

 最後に、サーバーOSはすでにクラウド側で動かすことが多いが、クライアントOSに関してはまだまだの状況だ。そこへ最近だと「Windows 365」といったサービスなど、OSごとクラウドに置く準備が徐々に整いつつある。このGitHub CodespacesはサーバーOSなのかクライアントOSか微妙なポジションだが、Visual Studio Codeが動くので後者となるだろう。

 運用時は、5G/4Gなどスマホ回線では辛そうだが、光/LAN環境であれば、ストレスなく操作できる。コストとの兼ね合いもあり現時点では全面的に移行とまではいかないものの、もしかすると10年後ぐらいになると、一部を除き、ローカルはPCとは名ばかりで実際はダム端末、OSはすべてクラウドへと言う時代が来るかもしれない。

 大規模障害が起こると何もできなくなるが、そのときはダム端末側も、少なくとも今より速いプロセッサを搭載していそうなので、何とかなるかもしれない……などとちょっと想像してしまった。果たしてどうなっているのやら。


 以上のようにGitHub Codespacesは、GitHubのリポジトリにあるコードを簡単に実行できるクラウド環境だ。起動が簡単な上、LinuxにVisual Studio Codeと主要言語系が一式入っており、自動ポートフォワーディングにも対応。面倒な環境設定をすることもなく、コーディングに集中できる。Webブラウザ1つで全てそろってしまうのもシンプルでGoodだ。

 今のところFreeプランだと4コア/8GB/32GBで無料と言うこともあり、興味のある方はいろいろ試してみてはいかがだろうか。