# 20200123 GlitchからFirebase Hostingへのデプロイ
###### tags: `firebase` `web`

## Firebase Consoleでの設定

Firebase Consoleにアクセスし、プロジェクトの設定ページにおいて、Firebase Hostingの設定を行う。


FirebaseのCLI（command line interface）ツールを使った設定方法を案内されるが、GlitchからのデプロイではGlitchがやってくれるため特に気にせず進める。Firebase HostingでのFQDNが割り当てられる。標準ではweb.appドメインとfirebaseapp.comドメインが使えるようだ。


## 公開するファイルをサブディレクトリにまとめる

Glitchではファイル名を hogedir/hogefile.html のようにつけると hogefile.html は hogedir というディレクトリに配置される。デプロイしたいファイルはサブディレクトリにまとめておくと便利。


## GlitchにFirebaseプロジェクトを認識させる

Glitchで作成したコードはGithubに対してプッシュ・プルしたり、Firebase Hostingにデプロイしたりできる。ここではFirebase Hostingへのデプロイを行ってみる。Glitchにfirebase.jsonファイルを作成すると、Firebaseへのデプロイを行うためのボタンが表示される。firebase.jsonの内容はGlitchプロジェクト内のどのファイルをFirebase Hostingに転送するかを表す。

{
  "hosting": {
    "public": "public"
  }
}

GlitchからFirebaseプロジェクトへの操作をOAuth（OAuth2）により認可する。Glitchでfirebase.jsonを開くと表示される「Select Firebse Project」を押下すると一連の認可プロセスが始まり、Firebaseプロジェクトを選択することができる。


* [How do I deploy my Glitch project to Firebase Hosting?](https://glitch.com/help/how-do-i-deploy-my-glitch-project-to-firebase-hosting/)

## Firebase Hostingにファイルを転送する

「Deploy to Firebase」を押下するとGlitchプロジェクトからFirebase Hostingへファイルが転送される。


## デプロイされたファイルの確認

「View Firebase App」を押下するとFirebase Hostingでホストされたウェブアプリが開く。この例では https://hello-kbc-sasaki.firebaseapp.com/ が開く。


firebaseapp.com の代わりに web.app を使っても同じページが見える。こちらの方が短いので便利かも。


##　NodeのExpressでホストする

Glitchでindex.htmlをpublic/index.htmlに移動したので、ｍGlitchの編集画面から「Show」でウェブアプリを表示したときにディレクトリ構造が見えてしまう。もちろん/publicを見れば/public/index.htmlが表示されるが、ちょっと面倒。


Glitch側ではコンテナが動いている。そこでコンテナ内でNode.jsのウェブサーバの一つであるExpressを動かして、publicディレクトリ以下のファイルをURL上ではルートにあるように扱う。

Firebase Hostingへのデプロイを行った過程で、package.jsonが追加されていることが分かる。内容を見るとfirebase-toolsが使えるようにするものらしい。


package.jsonのscriptsにstartプロパティを追加する。これでこのGlitchプロジェクトはサーバ側でnode server.jsというコマンドラインにより起動されることになる。

{
  "dependencies": {
    "firebase-tools": "^7.11.0"
  },
  "scripts": {
    "start-old": "ws --port 3000 --log.format combined --directory . --blacklist '/.env' '/.data' '/.git'",
    "start": "node server.js"
  }
}

次にserver.jsを書く。これはNode.jsで実行可能なJavaScriptファイルである。

"use strict";

const express = require("express");
const app = express();

app.get("/*", function(request, response) {
  response.sendFile(__dirname + "/public" + request.path);
});

app.listen(process.env.PORT, function() {});

これで、 / にアクセスされたときには /public 以下の対応するファイルがレスポンスとして返されるようになる。

# 独自ドメインを使う

glitchやfirebase hostingのようなサイトでは、標準でそれぞれのドメインによるウェブアプリケーションの公開が可能である。自分が所有している独自の度名を使うには、自分が管理しているDNSのゾーンファイルに必要なレコード（Aレコード、CNAMEレコード、TXTレコードなど）を設定する必要がある。

## Firebase Hostingで独自ドメイン設定する


DNSでAレコードを設定するように指示される。このIPアドレスは自分専用に割り当てられたものではなく、多くのFirebaseプロジェクトで共用されるものである。Firebase Hostingでは[SNI](https://ja.wikipedia.org/wiki/Server_Name_Indication)を使ってホスト名を区別している。


## DNSサーバにAレコードを設定する


# Glitchで独自ドメインを使う

他の人から２回以上「いいね」が貰えたら使える機能。

## 参考

[Add a Custom Domain to Your Glitch project](https://medium.com/glitch/add-a-custom-domain-to-your-glitch-project-9a455eab2baf)

## 作業例
編集画面の「Tools」に「Custom Domains」がある。

自分が管理しているDNSのゾーンにおいて、CNAMEレコードが指定されたFQDNを指すように設定する。


# Fireabse Hostingで独自ドメインを使う

# 余談 Imgur

HackMDで画像をペーストするとImgurという画像共有サービスにアップロードされる。ImgurはRedditと姉妹サイトらしい。

* [月間1億5000万人のユニークビジターを誇る画像SNSのImgurの魅力とは？](https://jp.techcrunch.com/2015/09/23/20150922imgur-is-the-anti-facebook/)
* [Imgur - Wikipedia](https://ja.wikipedia.org/wiki/Imgur)