【初心者必見】Firebaseのインストール方法とサイト公開（MacOS編）

#FIREBASEってなに？
Firebaseとは、GOOGLEが提供している、すばやく高品質のモバイルアプリを開発することができるプラットフォームで、開発に役立つ数多くの機能が用意されている。

元々、Firebase名前の企業が始めたサービスでしたが、天下のGoogleに買収されて、GCPに加わったみたいです。

#用意するもの

• 適当なファイル(Html.cssなど)
• Googleアカウント
• Node.JS （Ver.12.2.0)
• Npm　（Ver.6.9.0)

適当なファイルはデスクトップに作っておく。

ファイル名はpublicとする。
例：mysite/public/index.html

node.jsをインストールしていない方はこちらへ
https://nodejs.org/ja/

#Firebaseでプロジェクトを作ろう！

#Firebaseをインストールしよう！

terminal

$ node -v
v12.2.0
$ npm -v
6.9.0

インストールが確認できたら、
Node　Package　Managerコマンドを使ってコマンドラインツールを導入していく。

terminal

$ sudo npm install -g firebase-tools
　Password:（PCに設定してあるパスワードを入れる）
.
.
.

　+ firebase-tools@6.10.0　//インストール完了
$ firebase -V　
6.10.0

これでFirebaseのインストールは完了。

#Firebaseにログイン
Firebase にログインする際、いくつかの質問をされるのでYes/Noで答えていく。

（ちなみに（Y/n）と表記されている際は大文字のYがデフォルトになっているためEnterをおせば良い。）

terminal

$ firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information? Yes

Visit this URL on any device to log in:
https://accounts.google.com/.....
・
・
Waiting for authentication...

そうすると、ログインのブラウザが立ち上がるため、アカウントを選んであげて、「許可」を選択する。

これでfirebaseのログイン完了。

#公開したいサイトを選ぼう

terminal

$cd Desktop
$cd mysite
┌──────────────┬───────────────────────┬─────────────┐
│ Name         │ Project ID / Instance │ Permissions │
├──────────────┼───────────────────────┼─────────────┤
│ mysite       │ 設定されたID            │ Owner       │
└──────────────┴───────────────────────┴─────────────┘

 $firebase init --project=設定されたID
　　　######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

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


? Which Firebase CLI features do you want to set up for this folder? Press Space to sele
ct features, then Enter to confirm your choices.
○Database:......
○Firestore:.....
○Functions:.....
○Hosting:.......
○Storage：.......
（firebaseはどのサービスを使うのかときかれているので、
今回は{Hosting: Configure and deploy Firebase Hosting sites}を下↓で選択する。
選択したらスペースキーを押す）
※スペースを押してうまく色が変わらない場合は日本語モードになっていないか確認する。

? What do you want to use as your public directory? public
（どのフォルダをつかいますかときかときかれているの、上記で指定したpublicをEnterで選択）

? Configure as a single-page app (rewrite all urls to /index.html)? No
（Noを選択）

? File public/index.html already exists. Overwrite? No
（public/index.htmlを上書きしますかと聞かれているためNoを選択）

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

✔  Firebase initialization complete!

#Firebaseでデプロイしよう！

terminal

$fierbase deploy
.
.
✔  Deploy complete!
・
・
Project Console: https://console.firebase.google.com/project/......
Hosting URL: https://........firebaseapp.com
(上記のURLをコピーしてプラウザで開ける）

以上。

こんな簡単に公開できるなんてさすがGoogleさんですね！