
## はじめに

大学時代に所属していた基礎スキー部のサイトを作り直しているところです。
**Firebase Hosting**にNuxt.jsで作った静的サイトをホスティングしています。
大体出来上がってきたので、**カスタムドメイン**を設定します。

少しの設定でカスタムドメインとSSL（HTTPS）も使えるようになります。
自分でサーバを立てて設定するよりも格段に簡単でした！
良いサービスですね。

出来上がったもの：[北大基礎スキー部　https://www.huss.jp/](https://www.huss.jp/)

## 準備

ドメインとFirebase Hostingを準備します。

### ドメインを準備

ドメインは[ムームードメイン](https://px.a8.net/svt/ejp?a8mat=356RAD+AP7H6A+348+1C5BOX)から購入しました。

![ロゴ](/images/posts/58/muumuu.png)

[こちら](https://px.a8.net/svt/ejp?a8mat=356RAD+AP7H6A+348+1C5BOX)から欲しいドメインを購入します。
スキー部なので`.ski`(約5000円)にしようかと悩みましたがちょっと高いので、`.jp`（約3000円）にします。

購入手続きを進めてコンソールを開くところ待て進んで下さい。
サブドメインの設定も後述します。

[お名前.com](https://px.a8.net/svt/ejp?a8mat=2ZN724+DUBU42+50+2HHVNM)など他のサービスで取得しても大丈夫です。

### Firebase Hosting

既にプロジェクトは作成してあるものとします。
まだな方は[こちら](https://www.suzu6.net/posts/48-firebase-hosting/)を参考にウェブサイトを作ってみて下さい。

## ドメインの接続

まずは、Hosting。
ダッシュボードの**ドメインを接続**から設定していきます。

![1](/images/posts/58/1.png)

先ほど取得したドメイン名を記入します。
（必要であれば）サブドメインも含めます。

![1](/images/posts/58/2.png)

続いて**所有権の確認**に移ります。
これはドメインを取得したDNSにこの**TXTレコード**を置いて認証させることで、ドメインが自分のものであることを証明するためです。

![1](/images/posts/58/3.png)

TXTレコードをDNSに設定します。

ムームードメインのコンソールに移り、左メニューから**ムームーDNS**を開きます。
取得したドメインがあるので、**変更**をしていきます。

![1](/images/posts/58/dns.png)

種別を**TXT**、内容に先ほどの**TXTレコード**をコピペして貼り付け登録します。
サブドメインは空欄にしておく。

![1](/images/posts/58/dns-txt.png)

Firebaseに戻って所有権の確認をして通れば大丈夫です。
**TXTレコード**は反映にいくらか時間がかかります。

続いて、ドメインのDNSがホスティングしたサーバを認識できるようにします。
DNSに**IPアドレス**と**ホスト名**を登録するよう出てきます。
おそらく、この２つのIPアドレスのサーバにホスティングされているのだと思います。

![1](/images/posts/58/4.png)

**IPアドレス**と**ホスト名**を登録します。
サブドメインを`www`としてるのでこちらも記入します。
登録した結果↓

![1](/images/posts/58/5.png)

以上を行って、少し待つとステータスが**接続されています**と出ます。

![1](/images/posts/58/6.png)

これでカスタムドメインの登録ができました。
登録したドメインにアクセスして確認して下さい。

[北大基礎スキー部　https://www.huss.jp/](https://www.huss.jp/)

![1](/images/posts/58/7.png)

## おわりに

Firebase Hostingを使うとカスタムドメインやSSLの設定が簡単に行えます。
ほんまに良い世の中になったなーと常々体感しております。

個人的にドメインの検索は[ムームードメイン](https://px.a8.net/svt/ejp?a8mat=356RAD+AP7H6A+348+1C5BOX)で行うことが多いです。
UIが綺麗ですし、有名な`.com` や `.jp`以外にもたくさんの中から選べます。
あと、今回初めて実際に取得してみてわかったのは、サブドメインをワイルドカードで使えること、WHOISの情報の設定も簡単にできることは嬉しいです。
おすすめです。

合わせてこちらもどうぞ。

[FirebaseのHostingを使ってwebアプリを公開する](https://www.suzu6.net/posts/48-Firebase-Hosting)

[静的サイトを作る上でホスティングサービスの検討とNetlifyを使ってみた感想](https://www.suzu6.net/posts/55-hosting-service)


Firebase Hostingにカスタムドメインを割り当てる手順

静的サイトを作る上でホスティングサービスの検討とNetlifyを使ってみた感想



Firebaseの`Hosting`を使ってwebアプリを公開するための手順のメモです。

`Hosting`をAWSのサービスで例えると、S3 と Cloudfrontを合わせた感じですね。  
使った感想は、公開までの手順やドキュメントは`Hosting`の方が優しい印象です。

環境とインストールしたバージョンは以下。

- Mac OS : High Sierra 10.13
- node.js : v10.9.0
- npm : 6.2.0

## Firebase Hosting

Firebaseの`Hosting`は、静的コンテンツを簡単に公開できるサービスです。  
今回は`Hosting`を使ってウェブアプリを配信してみました。

主な機能は以下の４点です。

- SSL対応
- CDNエッジのキャッシュから高速にコンテンツを配信する
- Firebase CLI を使った高速なデプロイ
- ワンクリックのロールバック

FirebaseのRealtimeDatabaseやAouthなど他のサービスと組み合わせが簡単です。

公式のドキュメントは[こちら](https://firebase.google.com/docs/hosting/)。

## 初期設定

npmの`firebase tools`を使ってセットアップします。

```sh
$ npm install -g firebase-tools
```

```
$ firebase init

     🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥     🔥🔥🔥     🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥     🔥🔥 🔥🔥       🔥🔥     🔥🔥  🔥🔥   🔥🔥  🔥🔥       🔥🔥
     🔥🔥🔥🔥🔥🔥    🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥   🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥    🔥🔥  🔥🔥       🔥🔥     🔥🔥 🔥🔥     🔥🔥       🔥🔥 🔥🔥
     🔥🔥       🔥🔥🔥🔥 🔥🔥     🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥     🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥

You're about to initialize a Firebase project in this directory:

  /Users/yuya-suzumura/Desktop/GIT/acerola

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.

 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ```

ここで、`Enterキー`を押すとスペースで選択してと怒られる。

 ```
 Error: Must select at least one feature. Use SPACEBAR to select features, or provide a feature with firebase init [feature_name]
 ```

「Hosting」を選択して`スペースキー`を押すと印が付きます。その状態で、`Enter`キーを押してください。

 ```
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ```

以下プロジェクトの設定。

プロジェクトを選ぶ
```
? Select a default Firebase project for this directory:
  [don't setup a default project]
❯ acerola (acerola-*****)
  Firebase Demo Project (fir-demo-project)
  [create a new project]
```

公開ディレクトリの名前は？
 ```
 ? What do you want to use as your public directory? (public)
 ```
デフォルトは`public`


Single Page Applicationの設定をする？
 ```
 ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
 ```
デフォルトは`index.html`

初期設定が無事終わりました。
```
✔  Firebase initialization complete!
```

 全てYesとしてデフォルトだと、下記のようにファイルがつくられます。
 ```
 $ tree
 .
├── firebase.json
├── .firebaserc
├── public
    ├── 404.html
    └── index.html
```

## deploy

デフォルトをデプロイしてみます。

```sh
$ firebase deploy

=== Deploying to 'acerola-4cf84'...

i  deploying hosting
i  hosting[acerola-4cf84]: beginning deploy...
i  hosting[acerola-4cf84]: found 12 files in public
✔  hosting[acerola-4cf84]: file upload complete
i  hosting[acerola-4cf84]: finalizing version...
✔  hosting[acerola-4cf84]: version finalized
i  hosting[acerola-4cf84]: releasing new version...
✔  hosting[acerola-4cf84]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/acerola-4cf84/overview
Hosting URL: https://acerola-4cf84.firebaseapp.com
```

Hosting URLを見ると、以下のサイトが表示されます。
![default_index](https://s3-ap-northeast-1.amazonaws.com/webyasan-bucket/images/articles/46/default_index.png)

続いて、自作したHTMLをデプロイしてみます。

publicディレクトリのindex.htmlを置き換えてdeployしました。

![acerola_index](https://s3-ap-northeast-1.amazonaws.com/webyasan-bucket/images/articles/46/acerola_index.png)

こちらも、問題なく[公開](https://acerola-4cf84.firebaseapp.com)できました。