Firebase HostingでのWebページ公開

# はじめに
　Firebaseのホスティング機能であるFirebase Hostingを使用してWebページを公開します。

- 環境
    - クライアント
        - Windows10、Visual Studio Code、コマンドプロンプト
    - サーバー
        - Firebase

※クライアント側には、Node.js、npmがインストールされている必要があります。

# Firebase側での準備
## プロジェクトの作成
　プロジェクトに名前を付けます。
![スクリーンショット (60).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/44e4c390-dc4c-2aaa-33f9-2c57b66624db.png)

　Googleアナリティクスの使用に関しての設定です。Webページを公開するので、有効にしておきます。
![スクリーンショット (61).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/f3badfe2-1312-42d4-5234-59cd1cdbad2c.png)

　Googleアナリティクスで使用するアカウントの設定です。
![スクリーンショット (62).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/1b4555b1-c1c4-f4b1-5fc6-6bf8cb26cb51.png)

　プロジェクトを作成をクリックして、プロジェクトを作成します。
![スクリーンショット (63).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/65824bd9-62dc-d05e-e18a-7acbdf8d1724.png)

#クライアント側の準備
## 公開したいWebページの作成
　公開したいWebページを用意、作成します。
　例として、下記のHTMLページを使用します。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>Firebase HostingでWebページの公開</title>
	</head>
	<body>
		<h1>Firebase HostingでWebページの公開</h1>
	</body>
</html>
```

## アナリティクスの埋め込み
作成したプロジェクトのコンソールに移動し、アナリティクスのダッシュボードを開きます。
`</>`マークをクリックします。
![スクリーンショット (65).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/f44ed12b-7034-cab8-5e7b-32b47784391e.png)

ウェブアプリへのFirebaseの追加が表示されるので、アプリのニックネームを入力し、アプリを登録します。
![スクリーンショット (66).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/70ce354a-ae95-03a0-cc6f-9228aecbe64b.png)

コードが表示されるので、上記のHTMLのbodyタグの下に貼り付けます。
![スクリーンショット (67).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/9e764550-67bb-e626-9c44-678800bdaf0c.png)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>Firebase HostingでWebページの公開</title>
	</head>
	<body>
		<!-- The core Firebase JS SDK is always required and must be listed first -->
		<script src="/__/firebase/7.2.1/firebase-app.js"></script>
		<!-- TODO: Add SDKs for Firebase products that you want to use
		https://firebase.google.com/docs/web/setup#available-libraries -->
		<script src="/__/firebase/7.2.1/firebase-analytics.js"></script>
		<!-- Initialize Firebase -->
		<script src="/__/firebase/init.js"></script>
		<h1>Firebase HostingでWebページの公開</h1>
	</body>
</html>
```

Firebase CLIのインストールは準備で済ませたので、スキップします。
デプロイは後でするので、そのままコンソールに進むをクリックします。
![スクリーンショット (68).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/0509629f-57a0-6ab7-97b0-ed02798fa8c6.png)

# 公開の準備
コマンドプロンプトやPowerDhellなどで、上記で作成したHTMLファイルが保存されているディレクトリに移動します。
コンソールのHostingの始めるをクリックし、プロジェクトの初期化のコマンドを実行します。

Firebaseで使用しているGoogleアカウントにログインします。

```
firebase login
```

## プロジェクトの初期化

```
firebase init
```
ホスティングにカーソルを合わせ、スペースキーで選択しエンターキーを押します。
![スクリーンショット (69).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/a1c4b4c9-7e4c-a9be-9020-8792e0eee58c.png)

使用するFirebaseプロジェクトを選択し、エンターキーを押します。
![スクリーンショット (70).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/ff57daa7-6b66-dc80-ddbf-cccf80028423.png)

`What do you want to use as your public directory? (public)`は空のままエンターキーを押します。
単一のページアプリとして構成しますかと出てくるので、Noにします。
![スクリーンショット (71).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/7671bcb3-6631-8924-0ad0-a8550fb560ff.png)

ファイルを上書きするか聞かれるので、Noにします。![スクリーンショット (72).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/2ba20271-c6a8-4fd7-0bc1-e52b7fa23894.png)

初期化が完了と表示されると成功です。
![スクリーンショット (73).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/e4d7745d-562d-1eef-a76e-c50c97d124f8.png)

# ページ公開(デプロイ)

```
firebase deploy
```
![スクリーンショット (74).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/24e59c1e-f6bf-1dfe-02ca-3f5644f97221.png)

`Deploy complete!`と表示されると成功です。

# 公開の確認
コンソールのHostingをクリックすると、プロジェクト名のドメインが上に表示されるので、公開できたか確認します。
![スクリーンショット (75).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/7df371d3-f346-0e1b-7c5b-65acd38188be.png)

# おわりに
無料でWebページをホスティングできるサービスとして、GitHub Pagesなどがありますが、Firebase Hostingの場合、Node.jsのアプリを動かせる利点があります。
Firebaseはホスティング以外にも認証、データベースなどのプラットフォームを提供しているので、ほかにも使ってみたいです。