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

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

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

公式

Firebase Hosting の設定

Hosting画面に移動

Firebase ConsoleのHostingに移動する

Firebase CLI のインストール

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

npm install -g firebase-tools

プロジェクトの初期化

### ルートディレクトを作成

mkdir firebase
cd firebase

Googleへログイン

firebase login

>Allow Firebase to collect CLI usage and error reporting information?
Y

Yを押すとGoogleのログイン画面に遷移したので認証を許可する

許可するとSuccess画面になります

プロジェクトの開始

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 へのデプロイ

初期化が完了すると、サイトに表示する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の画面が表示されました！！