作成したHTMLファイルをFirebaseで公開する

最近、Firebaseを使い始めた為、作成したHTMLファイルをFirebaseで公開するための、環境構築からdeployまでの流れを記録しておきたいと思います。


# 対象読者

- Firebaseを初めて使用する人
- HTMLファイルを作成したが、公開のやり方がわからない人
- Web制作、Web開発初心者の人

# 前提条件

- 既に公開用のHTMLファイルが作成されていること(SPAではないことを前提として手順を書いています)
- [Node.js](https://nodejs.org/ja/)がインストールされていること




# Firebaseの設定

## Firebaseプロジェクトの作成

[Firebaseの公式ページ](https://firebase.google.com/?hl=ja)を開く
※Firebaseのプロジェクト作成はGoogleアカウントで行います。
右上のアイコンを押すと、アカウントを変更できますので、プロジェクトを作成するアカウントでログインしてください。

![スクリーンショット 2021-05-15 17.39.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/0c05d88d-e146-074b-1920-ece45db24c80.png)
使ってみるを選択


![スクリーンショット 2021-05-15 17.40.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/112a45af-4b82-ee6d-9e40-88469a704f92.png)
プロジェクトを作成を選択

![スクリーンショット 2021-05-15 17.40.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/f71c7c03-5198-e41b-83cf-8b6f8f0e7e18.png)
適当なプロジェクト名をつけてください(このプロジェクト名が公開用のURLに含まれます)
今回は、test-projectという名前をつけています。
Firebaseの規約に同意しますの欄にチェックをつけ、続行を選択。

![スクリーンショット 2021-05-15 17.42.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/c286bfaf-3581-a75d-99ae-d4d7b3e27c63.png)
ここではGoogleアナリティクスの設定を行います。
他の分析ツールなどを特に使用しないのであれば、そのまま続行を選択してください。

![スクリーンショット 2021-05-15 17.44.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/e5e5f42b-5b21-96fa-291b-8711994df14e.png)
適当なGoogleアナリティクスアカウントを選択、または作成し、プロジェクトを作成を選択してください。
数秒間待てば、プロジェクトが作成されます。

## Firebaseの初期設定
ここからは、プロジェクト作成後のFirebase初期設定をしていきます。

### Firebase CLIのインストール

まずは、Firebaseのツールをお使いのPCにインストールする必要があります。
Macであればターミナル、Windowsであれば、コマンドプロンプトなどを開き、以下のコードを入力してください。
※１度でも入力したことがある場合は、この操作は必要ないです。

```
npm install -g firebase-tools
```

### Firebaseへログイン
次に、作成したプロジェクトのGoogleアカウントでFirebaseにログインします。

```
firebase login
```

Allow Firebase to collect CLI usage and error reporting information?というメッセージが出てくるので、そのままエンターをしてください。
Google認証の画面が出てくるので、プロジェクトを作成したアカウントでログインしてください。

![スクリーンショット 2021-05-15 18.33.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/43d3b68a-96d8-81b3-4831-2f17146e967a.png)
↑の画面が出るので、そのまま続行を選択してください。

![スクリーンショット 2021-05-15 18.34.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/3c2d4e6c-fc8a-11f6-854c-48c4f415a4a3.png)
この画面が出たらログイン完了です。windowはそのまま閉じてください。

### Firebase機能の設定
ここからは、Firebaseの機能の設定をしていきます。
今回は、Webサイトを公開するだけのため、Firebase Hostingの設定をします。
事前準備として、Firebase公開後のTOPページとなるHTMLは、ファイル名をindex.htmlとしてください。
次にpublicというディレクトリを作成し、その中に公開用のファイル群を全て入れてください。
私の場合は、testというディレクトリの中に、publicディレクトリを切り、その中にindex.htmlなどのファイル群を入れています。

![スクリーンショット 2021-05-15 19.10.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/5119c4c3-9703-d4dc-90ee-b49c45a71d8b.png)

そして、ターミナルorコマンドプロンプトを開き、公開用のディレクトリ(私の場合はtestディレクトリ)まで移動し、以下のコードを入力してください。

```
firebase init
```

![スクリーンショット 2021-05-15 18.57.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/a80dc3e9-c943-3cbd-d118-e52fffff1169.png)
↑の画面が出てきます。この画面では、Firebaseのどの機能を使うかを選択します。
矢印キーで上下に移動でき、スペースキーで選択や解除ができます。
今回はFirebase Hostingだけのため、Hostingを選択しエンターを押します。
<br>
<br>


![スクリーンショット 2021-05-15 19.01.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/f9915d1e-918b-5630-8d10-a90b3eb107ff.png)
次は、どのプロジェクトを使用するか聞いてきます。
1番上の、 Use an existing project でエンターをしてください。
<br>
<br>

![スクリーンショット 2021-05-15 19.05.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/f64d5a67-b2d2-750b-316c-e46c2b4e0d9a.png)
先ほど作成したプロジェクトが出てくるため、そのままエンターしてください。
<br>
<br>

![スクリーンショット 2021-05-15 19.13.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/aa65edc9-2360-bf07-f5d5-d82f89206f01.png)
公開するディレクトリ名はpublicかと聞いてきます。
こちらはデフォルトでpublicになっているため、そのままエンターを押します。
<br>
<br>

![スクリーンショット 2021-05-15 19.16.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/6535ff7b-382d-f6b3-fa53-2bd2ab2e5405.png)
公開するページはSPAかと聞いてきます。
今回はSPAではないため、そのままエンターをしてください。(デフォルトはNoとなっています)
<br>
<br>

![スクリーンショット 2021-05-15 19.19.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/4baf0249-ef99-4fc0-607c-170f52373a81.png)
GitHubと連携するかと聞いてきます。
今回はしないため、そのままエンターしてください。(デフォルトはNoとなっています)
<br>
<br>

![スクリーンショット 2021-05-15 19.20.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/e6678da9-8dc8-8103-70a6-b9287d9b2790.png)
public/index.htmlが既に存在しているが、このファイルを上書きするかと聞いてきます。
今回は既に作成しているHTMLファイルを使用するため、そのままエンターしてください。(デフォルトはNoとなっています)
<br>
<br>

![スクリーンショット 2021-05-15 19.24.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/c7b691d0-648a-51df-bbf0-0a6dd0192a9e.png)
↑の画面が出れば設定完了です。お疲れ様です。


# Webサイトの公開
それではいよいよWebサイトを公開していきます。
設定完了画面が出た後、以下のコードを入力してください。

```
firebase deploy
```

![スクリーンショット 2021-05-15 19.29.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1484667/7bce9226-590f-a61c-99b2-80c8834c8732.png)
↑の画面が出たらdeploy完了です。
Hosting URL:の部分に記述されているURLにアクセスしてみましょう。
自分が作成したWebページが表示されれば、公開完了です。



# あとがき
今回は、作成したHTMLファイルをFirebaseで公開する手順を記述しました。
今後はFirebaseの他の機能の使い方や、SPAの公開なども記述していきたいと思います。