FirebaseでHostingしてみる

Firebaseをテスト的に使用した際のログ

# 準備
 - npmの導入
    - https://qiita.com/rakuraku0615/items/dd5bcc1f8641c5bbb091
 - Firebaseアカウントの準備

# 環境
 - aws EC2インスタンス

```
$ cat /etc/system-release
Amazon Linux AMI release 2018.03
```

# 作業ログ
## firebase-toolsのインストール

```
$ npm install -g firebase-tools
/home/ec2-user/.npm-global/bin/firebase -> /home/ec2-user/.npm-global/lib/node_modules/firebase-tools/lib/bin/firebase.js

> @google-cloud/functions-emulator@1.0.0-beta.5 postinstall /home/ec2-user/.npm-global/lib/node_modules/firebase-tools/node_modules/@google-cloud/functions-emulator
> node scripts/upgrade-warning


If you're using the Emulator via the Firebase CLI, you can
disregard this message.

If you're upgrading @google-cloud/functions-emulator, these
are the recommended upgrade steps:

1.  Stop the currently running emulator, if any:

        functions stop

2.  Uninstall the current emulator, if any:

        npm uninstall -g @google-cloud/functions-emulator

3.  Install the new version of the emulator:

        npm install -g @google-cloud/functions-emulator

If you have trouble after upgrading, try deleting the config
directory found in:

    ~/.config/configstore/@google-cloud/functions-emulator

Then restart the emulator. You can also check for any renegade
Node.js emulator processes that may need to be killed:

    ps aux | grep node

+ firebase-tools@6.4.0
added 554 packages from 274 contributors in 11.874s

# バージョン確認

$ firebase --version
6.4.0
```

## ログイン
aws linux上で行っているため、下記のログインコマンドそのままできない

```
$ 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/o/oauth2/auth?client_id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.....

Waiting for authentication...
```

ローカルから指定されたURLにアクセスする場合、 "localhost:9005へはアクセスできません" と言われる。

そこで、下記のコマンドを使用する

```
$ firebase login:ci --no-localhost

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=xxxxxxxxxxxxxxxxxxxxxxx...............

? Paste authorization code here: 

Error: Authentication Error: Your credentials are no longer valid. Please run firebase login --reauth
For CI servers and headless environments, generate a new token with firebase login:ci[ec2-user@ip-172-31-21-166 ~]$ firebase login:ci --no-localhost

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=xxxxxxxxxxxxxxxxxxxxxxx...............

? Paste authorization code here: 4/AgG5Cxxxxxxxxxxxxxxxxxxxxxxx...............

✔  Success! Use this token to login on a CI server:

1/0xxxxxxxxxxxxxxxxxxxxxxx...............

Example: firebase deploy --token "$FIREBASE_TOKEN"
```

## ローカルにプロジェクト作成

プロジェクト用ディレクトリ作成

```
mkdir firebase_1 && cd firebase_1
```

プロジェクトの初期化

```
$ firebase init --token "1/hO3xxxxxxxxxxxxxxxxxxxxxxxx........."

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

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

  /home/ec2-user/firebase_1

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting s
ites

=== 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]

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

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

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

✔  Firebase initialization complete!

```

プロジェクト初期化完了

```
 ls -l
合計 8
-rw-rw-r-- 1 ec2-user ec2-user  236  3月 11 14:44 firebase.json
drwxrwxr-x 2 ec2-user ec2-user 4096  3月 11 14:44 public
```

## ホスティングする

コンソールから紐づけるプロジェクトを作成する
https://console.firebase.google.com

![スクリーンショット 2019-03-11 23.50.35.png](https://qiita-image-store.s3.amazonaws.com/0/115125/bcf2274c-0b9a-a52a-2b74-5c6c25bd2880.png)

プロジェクト名を設定し、適当なリージョンを選ぶ
![スクリーンショット 2019-03-12 0.16.25.png](https://qiita-image-store.s3.amazonaws.com/0/115125/845d87ed-f213-c5c7-0348-9bc19f0be960.png)

作成したプロジェクトを選択し、プロジェクトのコンソール画面へ移動
![スクリーンショット 2019-03-12 0.17.24.png](https://qiita-image-store.s3.amazonaws.com/0/115125/10106d46-3f56-981a-005e-07665e1473b2.png)



ローカルのプロジェクトにて、firebase.jsonの設定を行う
 - public : デプロイ対象
 - ignore : デプロイからの除外対象
 - rewrites : 同ホストで複数のページを表示する為のリライトルールの設定。ファイルが存在しない場合はindex.htmlを読む。

```
$ cat firebase.json 
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
```

適当にindex.htmlを作成する

```
$ mv index.html index.html.bak
$ vim index.html
$ cat index.html
<html>
    <head>
        <title>Firebase test 1</title>
    </head>
    <body>
        <div>This is test page.</div>
        <div>Firebaseホスティングテストの完了</div>
    </body>
</html>
```

リモートのプロジェクトと紐づける

```
 firebase use --add --token "1/hO3xxxxxxxxxxxxxxxxxxxxxxxx........."                                                             
? Which project do you want to add? fir-test-1-c7903
? What alias do you want to use for this project? (e.g. staging) master

Created alias master for xxx-xxxx-1-xxxx.
Now using alias master (xxx-xxxx-1-xxxx)
```

デプロイを行う

```
$ firebase deploy --token "1/hO3xxxxxxxxxxxxxxxxxxxxxxxx........."                                                                

=== Deploying to 'xxx-xxxx-1-xxxx'...

i  deploying hosting
i  hosting[xxx-xxxx-1-xxxx]: beginning deploy...
i  hosting[xxx-xxxx-1-xxxx]: found 2 files in public
✔  hosting[xxx-xxxx-1-xxxx]: file upload complete
i  hosting[xxx-xxxx-1-xxxx]: finalizing version...
✔  hosting[xxx-xxxx-1-xxxx]: version finalized
i  hosting[xxx-xxxx-1-xxxx]: releasing new version...
✔  hosting[xxx-xxxx-1-xxxx]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/xxx-xxxx-1-xxxx/overview
Hosting URL: https://xxx-xxxx-1-xxxx.firebaseapp.com
```

ホスティング完了!簡単！

![スクリーンショット 2019-03-12 0.09.27.png](https://qiita-image-store.s3.amazonaws.com/0/115125/0e9fe511-b780-80b7-b659-238db2fb36b1.png)