【備忘録】Firebase Hostingで静的コンテンツを作成する

個人開発でiOSアプリをリリースする際に、利用規約のページが必要となったのでお手軽にサイトを作りたい。Firebase Hostingサービスで簡単にサイトを作れるみたいなので、試してみました。

結論、FirebaseのConsoleに従って簡単に作れました！！

#公式
https://firebase.google.com/docs/hosting

#Firebase Hosting の設定
##Hosting画面に移動
Firebase ConsoleのHostingに移動する
![スクリーンショット 2021-05-17 10.55.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480691/3e44c32c-8974-a935-b590-63055226ffe5.png)

##Firebase CLI のインストール
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480691/2a9b916b-e730-3014-b9b5-363c8adf84ed.png">

firebase-toolsをインストールする

```
npm install -g firebase-tools
```
##プロジェクトの初期化
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480691/a427fe5e-bca1-b375-4e36-e0e973e3061b.png">
###ルートディレクトを作成

```
mkdir firebase
cd firebase
```
###Googleへログイン

```
firebase login

>Allow Firebase to collect CLI usage and error reporting information?
Y
```
Yを押すとGoogleのログイン画面に遷移したので認証を許可する
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480691/1dc1e349-e68a-88d4-84be-e41c9d8dc4e7.png">
許可するとSuccess画面になります
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480691/b33bd246-3043-9aa3-a88c-70ed07875334.png">
###プロジェクトの開始

```
firebase init
```
質問に答えていく

```
---------------------------------------------------------------------------------------------------------------
>? Which Firebase CLI features do you want to set up for this folder? Press Space
 to select features, then Enter to confirm your choices. 
 ◯ Database: Configure Firebase Realtime Database and deploy 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
 ◯ Emulators: Set up local emulators for Firebase features
 ◯ Remote Config: Get, deploy, and rollback configurations for Remote Config

>Hosting
---------------------------------------------------------------------------------------------------------------
>? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project 

>exsiting project
---------------------------------------------------------------------------------------------------------------
>? Select a default Firebase project for this directory: 
  xxx.project 
❯ yyy.project

>yyy.project
---------------------------------------------------------------------------------------------------------------
>? What do you want to use as your public directory? (public) 

>enter→publicになる
---------------------------------------------------------------------------------------------------------------
>? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

>y
---------------------------------------------------------------------------------------------------------------

>? Set up automatic builds and deploys with GitHub? (y/N)

>y　Githubのログイン画面に遷移するため認証
---------------------------------------------------------------------------------------------------------------
>? For which GitHub repository would you like to set up a GitHub workflow? (forma
t: user/repository)

>指定のリポジトリを選択
---------------------------------------------------------------------------------------------------------------
>? Set up the workflow to run a build script before every deploy?

>y
---------------------------------------------------------------------------------------------------------------
>? What script should be run before every deploy?

>y
---------------------------------------------------------------------------------------------------------------
>? Set up automatic deployment to your site's live channel when a PR is merged?

>y
---------------------------------------------------------------------------------------------------------------
>? What is the name of the GitHub branch associated with your site's live channel

>master
---------------------------------------------------------------------------------------------------------------
✔  Firebase initialization complete!

長かった！！
```
##Firebase Hosting へのデプロイ
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480691/3cacec29-3011-442a-30cd-fd027f155e93.png">
初期化が完了すると、サイトに表示するHTMLも自動で作成されるみたいです
`public` -> `index.html`

```
ls
>firebase.json	public

cd public/
ls
>index.html

cat index.html
```
デプロイします

```
firebase deploy
```
コンソール画面のURLとサイトのURLが発行されるため、サイトのURLを表示してみます

```
Project Console: コンソール画面のURL
Hosting URL: サイトのURL
```

`index.html`の画面が表示されました！！
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480691/45a704c3-0cad-74bc-d170-a87b0651ca2d.png">