静的サイト（ファイル）のホスティングサービス、3つの目的別に7つ紹介
最近、静的ファイルをホスティングする機会が増えているように感じます。
フロントエンドで完結するシングルページや、Jekyll等の静的サイトジェネレータで作成するサイトが多くなってきたからかなと思います。
また、BaaS(Backend as a Service)が出てきて、フロントエンドコーディングだけでWebアプリケーションが作れるようになったことから、さらに需要が高まるんじゃないかと考えています。
そこで今回は、以下の3つの目的別に静的ファイルホスティングサービスの紹介をします。
見た目・動作の確認をしたい
Webページの見た目・動作の確認をする場合は、Node.jsやPythonなどでローカルサーバーを立ち上げる方法が一般的だと思います。
Python - 開発用ローカルサーバを立ち上げる方法 - Qiita
普通のWebページを自分だけで確認する場合はそれで良いのですが、以下のような場合、パブリックなサーバーにホスティングしたくなります。
- 他の人（特に開発者以外）に確認してもらいたい。
- BaaSサービスを利用したアプリをテストしたい（BaaSサービスはドメインごとにパーミッションを与えることが多く、ローカルでは動作しない場合がある）。
以下の3つのサービスをオススメします。 この場合、「無料・アップまでの早さ・使い捨てられる・共有しやすさ」が求められるかと思います。
- Bitballoon(パブリック)
- Neocities(パブリック)
- Google Drive(リンクを知っている人だけ)
Bitballoon
弊社でも、Milkcocoaで作ったアプリの動作を確認する際によく使っているサービスです。
アップロード方法は、上に貼ったスクリーンショットを見てもらうとわかるように、Bitballoonのトップページに、公開したいフォルダごとドラックアンドドロップするだけで公開できます（フォルダの状態でアップロードできるのはGoogle Chromeの場合で、他のブラウザではフォルダをzipに圧縮しないとアップロードできません）。
アップまでの早さは最速です。
また、URLも以下のように、bitballoon.comのサブドメインを自由に決めることが出来るので覚えやすいです。
無料会員登録をすれば、サイトが管理できるようになって、新しいファイルをドラッグアンドドロップすることでサイトの更新ができます。
Bitballoonを使う際に注意すべき点は、以下です。
- 誰でも見れてしまう
- metaタグでnoindexを指定しないとインデックスされてしまう
普通にサイトを公開した状態と同じなので、他人に見られると困る情報がある場合はオススメしません。
Neocities
Bitballoonとあまり変わりませんが、以下の点が違います。
- アップロードするには登録する必要がある
- 1アカウントにつき1つのURLしか持てない
- Web上のエディタでフォルダやコード自体を編集できる
「早さ」「使い捨てやすさ」という点ではBitballoonの方が圧倒的に良いです。
ただ、Neocitiesは、ドラックアンドドロップでのアップロードに加え、ブラウザ上で「HTML,CSS,JavaScriptの編集」、「ファイル&フォルダの追加/削除」ができる、という強みがあります（それが良いかどうかはその人次第ですが...）。
Bitballoonと同様、普通にサイトを公開した状態であることに加え、Sites on Neocitesというところにも公開されてしまうので、よっぽど見られて良いものじゃなければ公開しないほうが良いかと思います。
Google Drive
紹介するまでもないと思いますが、Google DriveにHTMLファイルを上げることでもサイトを公開できます。
こちらは「一般公開」「リンクを知っている人だけに公開」を選択できるので、内々で確認したい場合に最適かと思います。
ただ、URLが複雑なので、ドメインごとにパーミッションを与えるBaaSサービスでの利用では色々不都合がある気がします。
個人的なものを継続的に公開したい
個人的に作ったWebアプリやライブラリを公開したいときにオススメのサービスです。公開したあとも継続的に編集することが前提になっています。
Github Pages
「(Githubのアカウント名).github.io」というリポジトリを作って、masterブランチにindex.htmlを作成するだけで勝手に公開されるという、驚きの簡単さです。
以下は、私のアカウントで作ってみたものです。
http://kiyopikko.github.io/（ソース）
gitに慣れている方はGithub Pagesを見るとすぐに使えると思います。git初心者であれば以下の記事がオススメです。
フォルダ構成が、そのままWebサイトのディレクトリ構成になります。
また、例えば「test」というリポジトリを作って、「gh-pages」ブランチにpushすると、「(Githubのアカウント名).github.io/test/」にこれまた勝手に公開されます。1つのアカウントで複数のプロジェクトをホストすることが出来るということですね。
以下は、「github-pages-test」というリポジトリで作ってみたものです。
http://kiyopikko.github.io/github-pages-test/（ソース）
管理と公開が同時に出来るというのは大変有り難いですね。
Divshot
イメージとしてはGithub Pagesが多機能になった感じだと思ってもらえれば良いと思います。
アップロードの方法は、DivshotのCLI(divshot initとかdivshot pushとか)を使うか、ドラックアンドドロップでも出来ます。
Divshot CLIでの開発の始め方はこちらをご覧下さい（英語）
Divshotの特徴としては、以下の3つの環境があって、DevelopmentとStagingにはBasic認証をかけることができる点かなと思います（3つの環境の説明はこちらの記事を参照下さい）。
- Development (URLは、http://development.(アカウント名).divshot.io/)
- Staging (URLは、http://staging.(アカウント名).divshot.io/)
- Production (URLは、http://production.(アカウント名).divshot.io/)
また、バージョン管理についても、pushするごとに、http://v4.development.(アカウント名).divshot.io/ のように「v*」の部分が増えていって、全部残るので、すべてのバージョンがすぐに参照できるようになっています。
つまり、開発に必要な環境・状態ひとつひとつに固有でパブリック（認証有）なURLを自動生成してくれる、ということです。特に複数人の開発では色々便利なんじゃないでしょうか。
ちゃんと運用したい
ここまでは、無料で使えるものを紹介してきましたが、しっかりビジネスとして運用する場合は、お金を払うべきかなと思います。
ただ、静的サイトをホスティングするだけなら、かなり格安にできます。
以下の2大巨人が提供するサービスがオススメかなと思います（他にもCloud Filesや、OpenStack Swiftがありますが、認知度や導入の手間等の理由で割愛します）。
Amazon S3
最も有名なクラウドストレージサービスだと思います。
導入方法は簡単で、以下のスライドの通りに進めれば5分程度で使い始められます。
以下、私が公開してみたものです。
http://kiyopikko.s3-website-ap-northeast-1.amazonaws.com/
アップロードもFTPソフトのような操作で簡単に行えます。
また、アクセス許可で、「特定のIPアドレスでしか見れない」などの制限もできるので、内々で確認したいときにも使えます。
価格は先ほど紹介したスライド内でも触れられていますが、10000PVのサイトでも月100円前後で使える上、フロントエンドを最適化してファイルの量やサイズを減らしてしまえば、かなり格安で使えてしまいます。
S3はスケールが前提なので、規模が大きくなったときのことを考えなくて良いし、大量のリクエストが来てサーバーが落ちる心配もしなくて良いです。
ただ、サイズの大きいファイルに対して大量にリクエストが来る場合は、以下のガイドラインを守らないとパフォーマンスが落ちるそうです（よっぽど大きくならない限り気にしなくて良いようですが）。
Google Cloud Storage
Google版のS3という認識で構いません。
使い方などは以下を参考にして頂ければ、3分程度で使い始められると思います。
料金体系や速度などは記事を読んでわかると思いますが、「サイトの公開」という点でAmazon S3と違う点は、「独自ドメインをとらないと、ファイル指定無しでindex.htmlを自動取得してくれない」ことです。
Amazon S3の場合は、http://(ユーザー名).s3-website〜/ とファイル名を指定せずにアドレスを指定するだけで、自動でindex.htmlをとってきてくれるように設定できるんですが、Google Cloud Storageの場合、独自ドメインをとらないとその設定が有効になりませんでした。
http://storage.googleapis.com/gs-test-kiyopikko/index.html（表示される） http://storage.googleapis.com/gs-test-kiyopikko/（設定をしても表示されない）
まあ、有料のサービスを利用してWebサイトを公開していて、独自ドメインはとらない人がいるのかと言われると疑問ですが...
ちなみに、独自ドメインの設定はこちらの記事の通りにやると出来ました。
最終的には、スペックや料金形態、AmazonとGoogleどちらが好きかなどで選ぶと良いかと思います。
まとめ
改めて調べてみると、「どれも簡単に公開できてしまうな」と驚きました。
Web開発がフロントに寄ってきている今だからこそ、静的サイトのホスティング方法の選択肢を多く知って、状況に応じて使い分けできることが、エンジニアとしてのちょっとした強みになるんじゃないかなと思ってます。