JS デバッグに便利な GCS の Static Website Hosting

JavaScript GCS

最近はもっぱら JavaScript ( TypeScript ) を書いています。ドメインを跨ぐときの挙動をデバッグするのに Google Cloud Storage の静的ホスティングが便利でした。

f:id:takasfz:20171102200456p:plain

やりたかったこと

ドメインが複数必要なのにドメインを取得したくない、そんなワガママを GCS が叶えてくれました。

Web サイトを公開するまでの手順

1. ストレージバケットを作成する

ストレージ バケットの作成  |  Cloud Storage  |  Google Cloud

公式ドキュメントを参考に、ストレージバケットを作成します。 データ量が少なく、データへのアクセスがそれなりに発生するので、ストレージクラスは Regional 、リージョンは asia-northeast1 を選択しました。

2. 公開するファイルをアップロードする

作成したバケットを開き、コンソールの上部にある ファイルをアップロード または フォルダをアップロード から公開するファイルを選択し、アップロードします。 公開するファイルをドラッグ＆ドロップでアップロードすることもできます。

f:id:takasfz:20171102195246p:plain

3. キャッシュ設定を変更する

公開するファイルは初期設定で 1 時間キャッシュが有効になっているため、頻繁にファイルを変更してデバッグするには不便なことがあります。そこで、アップロードしたファイルの その他のオプション (︙) から メタデータを編集 をクリックし、 Cache-Control の値を設定してキャッシュの有効期限を短くします。

f:id:takasfz:20171102195303p:plain
f:id:takasfz:20171102195309p:plain

4. ファイルを公開する

アップロードしたファイルの 一般公開で共有する のチェックボックスを ON にします。ファイルが公開されるとチェックボックスの横に 公開リンク が表示され、これをクリックすると公開されたファイルが新しいウィンドウで表示されます。

f:id:takasfz:20171102195255p:plain

公開されたファイルは http(s)://storage.googleapis.com/{バケット名}/{ファイル名} または http(s)://{バケット名}.storage.googleapis.com/{ファイル名} でアクセスできます。

5. ファイルのアップロード ～ 公開設定を一発で

手順 4 までで Web サイトの公開はできるのですが、複数のファイルに対して 1 つずつキャッシュの設定をしたり、ファイルを更新する度にキャッシュを設定し直したりするのは正直面倒です。 gsutil コマンドを使用すると、ファイルのアップロードとキャッシュ設定、一般公開を一度に行うことができます。

gsutil -h 'Cache-Control:max-age=1' cp -a public-read ${ファイル名} gs://${バケット名}/${パス}

gsutil コマンドについて、詳しくは gsutil ツール  |  Cloud Storage  |  Google Cloud を参照ください。

できたもの

クロスオリジンアクセスの簡単なデモを作ってみました。

location.html

<!doctype html>
<meta charset="utf-8"/>
<meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0' />
<style>
    body { margin: 8px; }
    dl { word-wrap: break-word; }
    iframe { display: block; margin: 8px auto; width: 100%; height: 100%; border: 1px solid black; }
</style>
<script>
    window.addEventListener('DOMContentLoaded', function() {
        var html  = '<dl><dt>window.location :</dt><dd>' + window.location + '</dd></dl>';
        document.body.insertAdjacentHTML('afterbegin', html);
    });
</script>
<iframe src="https://storage.googleapis.com/takasfz/location_iframe.html"></iframe>
<iframe src="https://takasfz.storage.googleapis.com/location_iframe.html"></iframe>

location_iframe.html

<!doctype html>
<meta charset="utf-8"/>
<meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0' />
<style>
    dl { width: 100%; word-wrap: break-word; }
</style>
<script>
    window.addEventListener('DOMContentLoaded', function() {
        var html  = '<dl><dt>window.location :</dt><dd>' + window.location + '</dd></dl>';
        document.body.insertAdjacentHTML('afterbegin', html);
        document.body.style.background = (!!window.frameElement) ? "lightskyblue" : "pink";
    });
</script>

iframe の src に 2 通りの URL を指定し、同一オリジンであれば背景色を青、クロスオリジンであれば背景色をピンクに設定する、というものです。

f:id:takasfz:20171102193142p:plain

まとめ

簡単な設定しか行っていませんが、特に不自由なく、わりと便利に使えています。 独自ドメインを取得しなくても、サードパーティ JavaScript やクロスオリジンアクセスの挙動を確認できるのが嬉しいですね。

ほかにも Tips があれば教えてください！

出典: