FirebaseHostingをWindowsのVScodeで開発と公開する

# FirebaseHostingを使って静的Webサイト作成
最近になってようやくFirebaseという便利なMBaasを知り、試しにやってみたので、その備忘録

## 事前準備
開発するwindowsにnodejsをインストールをする必要があります。

## プロジェクトの作成
Firebaseの[コンソール](https://console.firebase.google.com/?hl=ja)にアクセスして、プロジェクトの作成。
プロジェクト追加をする
![スケッチ.png](https://qiita-image-store.s3.amazonaws.com/0/269756/e2edd0b6-b580-b051-c976-c5b5931a4392.png)
プロジェクト名等を入力して、プロジェクトの作成を押下する。(途中で作成完了のポップ出るので「OK」?か何かを押下)
![スケッチ.png](https://qiita-image-store.s3.amazonaws.com/0/269756/cd2c3594-6d80-2ec0-e600-c546b5ab1532.png)
下記画面になればオッケー
![スケッチ.png](https://qiita-image-store.s3.amazonaws.com/0/269756/cbc2602f-9585-a6ab-49b5-e95e262036d3.png)


## windowsの準備
適当な場所にフォルダーを作成します。
![スケッチ.png](https://qiita-image-store.s3.amazonaws.com/0/269756/c3dac2a6-a34f-d988-726c-5574ef16efbf.png)

## vscodeで開発
先ほどのフォルダーをVScodeで選択
ターミナルで「npm install -g firebase-tools」と入力する。
![スケッチ.png](https://qiita-image-store.s3.amazonaws.com/0/269756/9ab652a5-2f92-b96c-2308-a88851ab7e97.png)
続いて、「firebase login」と入力して、webブラウザーが開くのでログイン
続いて、「firebase init」と入力する。
最初の質問に、「yes」とそして、「Hosting」を選択して、エンターを押す。

```

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

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

  C:\Users\***\Documents\firebase\testweb

? Are you ready to proceed? Yes
? 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
```
次にプロジェクトを選択する。

```
=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Select a default Firebase project for this directory:
  [don't setup a default project]
> testweb (testweb-82e62)
  spell (spell-722ef)
  [create a new project]
```

最後に、空エンターして次の質問に「N」と回答すればOK

```
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
+  Wrote public/404.html
+  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!
```

Publicのフォルダーと他2つファイルができるので、Publicのフォルダー内でwebサイトを作ると良い。

最後にコマンドで、「firebase deploy」とするだけで、公開可能!!

```
=== Deploying to 'testweb-82e62'...

i  deploying hosting
i  hosting: preparing public directory for upload...
+  hosting: 2 files uploaded successfully

+  Deploy complete!

Project Console: https://*******************************
Hosting URL: https://*******************************

```

Hosting URLがURLになるのでそこにアクセスしてもらうとOKです。