【ITニュース解説】Develop an edge computing app in the browser

この解説は、システムエンジニアを目指す初心者の読者に向けて、最新のウェブ技術であるエッジコンピューティングのアプリ開発を、特別な準備なしにブラウザ上で行う方法について紹介する。通常、新しい技術を試す際には、自分のパソコンに様々なソフトウェアをインストールしたり、開発環境を構築したりする手間がかかる。しかし、この記事で紹介するFastly Computeという技術を使った学習体験では、そのような手間を省き、ウェブブラウザだけで開発からデプロイまでを一貫して体験できる。これは、GitHub Codespacesという、ブラウザ上で動作する開発環境を利用することで実現されている。

Fastly Computeとは、ウェブサイトのユーザー体験を向上させるためのアプリを、ユーザーに最も近い「エッジ」という場所で実行する技術である。エッジとは、ユーザーとウェブサイトのサーバー（オリジンサーバー）の中間に位置するネットワークの接点のことだ。ユーザーがウェブサイトにアクセスした際のリクエストや、ウェブサイトから返されるレスポンスを、オリジンサーバーに到達する前にエッジで操作できる。これにより、ウェブサイトの表示速度を向上させたり、ユーザーの状況に応じた動的なコンテンツを提供したりすることが可能になる。Fastly Computeでは、JavaScriptをはじめとする様々なプログラミング言語でコードを書くことができ、そのコードはFastlyが提供するSDKによってWebAssembly（WASM）という形式に変換されてエッジで実行される。WebAssemblyは、高速かつ安全に動作するように設計された技術で、エッジコンピューティングに非常に適している。この学習ガイドでは、JavaScriptを使ってエッジアプリケーションのロジックを実装する。

開発の具体的な流れは非常にシンプルだ。まず、GitHubというコード共有サービス上にあるFastlyが用意した学習用のリポジトリを、自分のアカウントに「フォーク」する。フォークとは、既存のリポジトリのコピーを自分のアカウントに作成する操作のことだ。次に、そのフォークしたリポジトリをGitHub Codespacesで開く。Codespacesは、GitHubが提供するクラウドベースの開発環境であり、ブラウザ上でVisual Studio Codeのような開発ツールが利用できる。Codespacesを開くと、自動的にいくつかの処理が始まり、サンプルとして用意されたオリジンウェブサイトと、初期状態のComputeアプリがビルドされ、実行される。そして、すぐにブラウザ内にプレビュー画面が表示されるため、実際に動作するウェブサイトを確認できる。プロジェクトには、開発を容易にするためのボタンがエディタの下部に配置されており、「Split」ボタンを使うことで、コードエディタとプレビュー画面を並べて表示し、コードを編集しながらリアルタイムで結果を確認できる。

このプロジェクトには二つの主要な部分がある。一つはoriginというフォルダに含まれる、デモ用のオリジンウェブサイトのコードだ。もう一つはsrcというフォルダに含まれる、Fastly Computeアプリのロジックで、特にindex.jsファイルにその中心的なコードが書かれている。Codespacesのターミナルエリアにある「PORTS」タブでは、オリジンウェブサイトと、エッジで動作するComputeアプリを通したバージョンの両方を確認でき、ボタン一つでプレビューを切り替えて比較できる。エッジアプリによって、ウェブサイトの機能がどのように変化するかを具体的に体験できるのだ。

例えば、Computeアプリが有効になっている場合、ウェブサイトの見た目（スタイル）が異なることがある。これは、エッジでスタイルシートが切り替えられているためだ。また、ページにはユーザーの地理位置情報を含むクッキーが書き込まれることがある。これもエッジで動的に情報が付加されている例だ。さらに、「ohno」というリンクをクリックすると、通常であればサーバーエラーページが表示される代わりに、Computeアプリが生成した特別なHTMLページが表示される。同様に、「data」というリンクも、生のJSONデータではなく、Computeアプリによって整形された合成ページを返す。このように、エッジアプリはユーザーからのリクエストやウェブサイトからのレスポンスを柔軟に操作し、ユーザー体験をカスタマイズする能力を持つ。

ブラウザ上での開発は非常に直感的だ。index.jsファイルを直接編集し、コードを変更するだけで、アプリは自動的に再ビルドされ、プレビュー画面が更新される。例えば、地理位置情報クッキーにユーザーの現在時刻を追加するような変更を簡単に行える。ただし、注意点として、Codespaces内でアプリを実行している初期段階では、そのCodespace自体がGitHubがホストするコンテナ内で動作しているため、地理位置情報は正確ではない可能性がある。正確な地理位置情報を確認するには、実際にエッジにデプロイする必要がある。もちろん、Computeアプリだけでなく、originフォルダ内のオリジンアプリのHTMLやCSSを変更して、ウェブサイト自体の見た目や構造を変えることも可能だ。開発中のアプリは、エディタ下部の「Share」ボタンを使って、他の共同作業者と簡単に共有できる。共有相手もGitHubにサインインしていれば、あなたのドラフト版アプリを見ることができる。

開発が完了し、アプリをインターネット上の「エッジ」に公開する準備ができたら、デプロイのステップに進む。まず、Fastlyの無料アカウントを作成し、APIキーを取得する。このAPIキーは、あなたのFastlyアカウントを通じてComputeアプリをデプロイ・管理するための認証情報だ。取得したAPIキーをCodespaces内のプロジェクトにFASTLY_API_TOKENという名前で設定する。設定後、エディタ下部の「Publish」ボタンをクリックすると、デプロイプロセスが開始される。FastlyのツールがあなたのComputeアプリをビルドし、デプロイ可能なパッケージ形式に変換する。そして、そのパッケージをあなたのFastlyアカウント内に新しいサービスとしてアップロードする。同時に、Codespaces内のスクリプトが、あなたのオリジンウェブサイトもGitHub Pagesというサービスを使ってGitHubリポジトリのサイトとしてデプロイする。このGitHub Pagesのサイトが、あなたのComputeアプリのオリジンとして設定されるのだ。

すべてのデプロイが完了すると、ターミナル出力にedgecompute.appというアドレスが表示される。このアドレスをクリックすることで、実際にインターネット上のエッジにデプロイされたあなたのアプリを確認できる。デプロイ前と比べて、地理位置情報が正確になるなど、エッジでの動作の違いを体験できるだろう。一度デプロイした後も、コードに変更を加えて「Publish」ボタンを押すだけで、いつでも最新のバージョンをエッジに公開できる。開発中に加えた変更を永続的に保存したい場合は、Codespacesエディタ左側の「Source Control」エリアを使って、GitHubリポジトリにコミットすることを忘れてはならない。この一連の学習体験を通じて、システムエンジニアを目指す初心者は、エッジコンピューティングの基本的な概念と、ブラウザベースの開発・デプロイの実際の流れを、手軽に体験し学ぶことができる。