2022年度 ウェブサイトのホスティング
（なるべく可能な限り）費用がかからない・httpsに対応している・ドメインが付与される・ストレージや通信容量の制限が比較的緩い、という条件付きでウェブサイトをホスティングする手段としてFirebase HostingとCloudflare Pagesの導入について解説します。
- CDN事業をメインとするCloudflare社が運営しているサービス。
- 単一ファイルのサイズ上限：25MB
「Sign up」からアカウントを作成し、ログイン。
＊メール認証によるアカウントの確認作業が必要です。アカウント用に指定したメールアドレス宛てに確認用リンクが届くので、それを使って確認作業を行ってください。
(＊ツールバーから言語を切り替えられます。必要に応じて切り替え。)
「Pages」メニューのページの中頃にある「ダイレクト アップロード」の項目から「アセットをアップロード」をクリック
プロジェクト名を入力し、プロジェクト作成します。
プロジェクト名はドメイン名にも利用されます。
記載されているいずれかの方法でローカルコンピューター上のファイルをアップロードします。
すべてのファイルがアップロードできたことが確認できたら、「サイトをデプロイ」をクリックします。
デプロイされたURLにアクセスし、反映されていることを確認します。
https://firebase.google.com/docs/hosting?hl=ja
- FirebaseというGoogle社が運営しているウェブアプリケーション開発プラットフォームの中のいち機能。
- 単一ファイルのサイズ上限：2GB
Gmailアカウントが必要になりますが、取得方法は割愛します。
取得済みの場合は https://firebase.google.com/ からコンソールにアクセスできます。
コンソールへ移動し、新しくプロジェクトを追加します。
＊ Google アナリティクス（アクセス解析用のツール）が不要な場合はここで無効にします。
「続行」をクリックしてプロジェクトのトップに移動します。
サイドバー内にある「構築」から「Hosting」を選択します。
「始める」をクリックしてローカルコンピューター上での作業ガイドを開始します。
ガイドに従ってローカルコンピューター上で必要なツールのインストールとセットアップを行います。
ここでは授業用リポジトリの BabylonJSSample/EditorProjectSample で作成したアプリケーションページをFirebase Hostingにデプロイすると仮定して解説します。
Visual Studio Codeで上記のフォルダを開きます。
[Ctrl + Shift + `] ショートカット、もしくはツールバー「ターミナル」メニューから新規にターミナルを開きます。
npm install -g firebase-toolsfirebase login
未ログインの場合はウェブブラウザが開いてアカウントへのアクセスが求められるので承認します。
完了したらターミナルに戻ります。
Firebase関連の作業をする前に、このプロジェクト（BabylonJSSample/EditorProjectSample）で最終的にアップロードするためのデータをビルドしておきます。
npm install
npm run outout
├── _streamingAssets
├── dist
├── index.html
└── scenes
out ディレクトリ以下にファイルが書き出されているのが確認できたら、Firebaseへデプロイする作業を行います。
firebase init
プロンプトが出力されるので、いくつかの質問に答えます。
Are you ready to proceed?
Yes
Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
を選択（矢印キーで選択肢を移動、スペースキーで選択）
Please select an option:
Use an existing project
を選択
Select a default Firebase project for this directory:
さきほどウェブコンソール上で作成したプロジェクトのID一覧が表示されるので、該当のものを選びます。この例では
hellofirebase-668d8 (hellofirebase)
を選択
What do you want to use as your public directory?
out
と入力して指定。
（＊すでに out ディレクトリ以下にファイルが存在する場合で、index.html を上書きするか聞かれる場合は No を選択してください。）
.firebaserc というファイルに設定が書き込まれると、プロジェクトのセットアップが完了します。
セットアップ後、最後に
firebase deployを実行し、デプロイします。
クラウドストレージサービスであるDropboxのBasicプランは無料で2GBのオンラインストレージを利用できますが、ウェブサイト自体をホスティングすることは現在てきません。
代わりに、単体で容量の大きいデータなどをアップロードしておいて、別ドメインのウェブアプリケーションから読み込む、というような用途としては利用できるケースもあります。
通常のDropboxの共有用リンクのURLは
https://www.dropbox.com/s/${ハッシュ値}/${ファイル名}?dl=0
という形式になっていますが、このURLでは対象となるファイルをダウンロードするためのDropboxのページがレスポンスとして返されてしまうため、前述のような利用法には合いません。
一方、末尾のクエリ（ ?dl=0 ）の部分を ?dl=1 と変更（これはDropboxのウェブUI上からでも指定できます）すると、ファイルそのものを直接レスポンスとして返すようになります。
一般に、ウェブサイト上のJavaScript内から別のウェブサイト・ドメイン下にあるファイルをダウンロードして扱うには、対象となるファイルをホストしているサーバーが、CORS（オリジン間ソース共有）という仕組みに適合した通信に対応している必要があります。 この理由により、?dl=1 のオプションを適用した場合でも、対応したヘッダー情報が付与されていないためやはり利用することができません。
この問題を回避するために、CORSに対応したヘッダー情報を含めてもらうには、共有用のURLの https:// の次にくるサブドメイン部分を www から dl に変更し、末尾のクエリ部分（ ?dl=0 ）を削除します。
例として、
https://www.dropbox.com/s/4mrwdag0shhwygv/soja-pcl.glb?dl=0
という共有リンクのURLであれば、
https://dl.dropbox.com/s/4mrwdag0shhwygv/soja-pcl.glb
という風に変更することで、ウェブサイトの上のJavaScriptからDropbox上の対象のファイルを扱うことができるようになります。
注意点としてこの方法は、セキュリティの問題などの関係で、公式には推奨されていません。
またそれだけでなく、Firebase Hostingの2GBの制限を超えるような大きいファイルを扱うケースはウェブアプリケーション自体のパフォーマンスを下げる要因になりやすいです。 多くの場合は設計自体を見直すか、例えば動画データであればYouTubeやVimeoなどの専用サービスの利用を検討すべきです。
この辺りのドレードオフを理解した上で、なるべくは前述の２つのサービスを利用するようにしてください。