Firebase Hosting と Basic認証

Firebase Hosting の設定まとめ -Firebase CLI のインストール $npm install -g firebase-tools -Google へのログイン $firebase login $firebase init -Firebase Hosting へのデプロイ $firebase deploy -Firebase Hosting のデプロイしたデータの削除 $ firebase hosting:disable -ログアウト $ firebase logout

firebaseのHostingでwebページを公開する場合、データのアップロードがFirebase CLIのコマンドから操作するしかないので、 CLIをインストールせざるをえない。

CLI のインストール手順は公式のとおり Firebase を JavaScript プロジェクトに追加する STEP4 https://firebase.google.com/docs/web/setup?hl=ja

$ npm install -g firebase-tools

$ firebase login i Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google’s privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? Yes i To change your data collection preference at any time, run firebase logout and log in again.

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

Waiting for authentication…

ブラウザが立ち上がるので、メルアドとパスワードを入力

1.png 2.png

の許可をするとブラウザに Woohoo! Firebase CLI Login Successful You are logged in to the Firebase Command-Line interface. You can immediately close this window and continue using the CLI.

と表示され、

コンソールに ✔ Success! Logged in as xxx@gmail.com

と表示される

##ログアウト P13M-3ex:calc nogami$ firebase logout ✔ Logged out from xxx@gmail.com

##ログイン $ firebase login

##ローカルのプロジェクトでFirebase プロジェクトを初期化ローカルアプリディレクトリのルートから次のコマンドを実行します

注: firebase init コマンドでは、新規ディレクトリは作成されません。新しいアプリを作成する場合は、最初にディレクトリを作成し、そのディレクトリ内から firebase init を実行する必要があります。

$ firebase init

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

  /Users/project

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, 
then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert select
ion)
❯◯ 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
 ◯ Emulators: Set up local emulators for Firebase features

? 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

すでにプロジェクトを作成済みなので Use an existing project を指定

? Select a default Firebase project for this directory: (Use arrow keys)
❯ attendapp-f6a7e (attendApp)

すでにFirebaseのプロジェクトを作成している場合はwebコンソールで自動で指定されるのでそのままEnter

=== 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)  dist

ホスティング先のディレクトリを指定 vue cli でプロジェクトを作成したので、dist配下にデプロイする

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

とりあえず yes

? File dist/index.html already exists. Overwrite? (y/N) 
上書きしてよいか yes

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

✔  Firebase initialization complete!

初期化の最後に、Firebase は 2 つのファイルを自動的に作成

プロジェクトの構成を含む firebase.json 構成ファイル。プロジェクトエイリアスが保存される .firebaserc ファイル。

###Firebase プロジェクトをローカルで実行してテストする $firebase serve

###Firebase Hosting へのデプロイ準備ができたらウェブアプリをデプロイする静的ファイル（HTML、CSS、JS など）をデプロイ

$firebase deploy

=== Deploying to 'attendapp-f6a7e'...

i  deploying hosting
i  hosting[attendapp-f6a7e]: beginning deploy...
i  hosting[attendapp-f6a7e]: found 7 files in dist
✔  hosting[attendapp-f6a7e]: file upload complete
i  hosting[attendapp-f6a7e]: finalizing version...
✔  hosting[attendapp-f6a7e]: version finalized
i  hosting[attendapp-f6a7e]: releasing new version...
✔  hosting[attendapp-f6a7e]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/attendapp-f6a7e/overview
Hosting URL: https://attendapp-f6a7e.firebaseapp.com

URLにアクセス表示されたらOK だれでも書き込めるので認証処理がいる

いったんアップしたhosting先のデータを削除

$firebase hosting:disable

BASIC認証の方法を調べるとこちらの記事の内容しか出てこない https://qiita.com/567000/items/65f55eda8d7c6df09138 他にもブログなどで記述があるが、全て上の記事の方法このとおりやってみる

ちなみに.htaccess、.htpasswdではBasic認証はできない

もう一度initしなおすさっきと異なるのはFunctionsにもチェックをいれる

$ firebase init

→ ● Functions: Configure and deploy Cloud Functions

functions/フォルダが作成されているので、記事通りに設定他、index.jsを書き換え distのファイルをfunctions/staticに移動

必要なライブラリをインストール $ cd functions/ $ npm i -D express $ npm i -D basic-auth-connect

再度デプロイ $ firebase deploy

無料でサイトを公開できるが、独自ドメインは使えない

書き込み後のtable再読み込みで、２重に表示される js内にメルアド、パスワードを記載しているのは危険 apiKey設定はプロジェクトを作成した時点で/firebase/init.jsに公開されるそのため、テストモードにしていると他者からアクセスが可能になるため認証処理やルールの設定をしておく方がよい

自分のデータにだけアクセス許可

{
  "rules": {
    "user": {
      "$uid": {
        ".write": "$uid === auth.uid",
        ".read": "$uid === auth.uid"
      }
    }
  }
}

よくサンプルやテストで下記ルールの指定にしましょうと見かけるが、全ての人がアクセスできるので、必ずfalseに戻すというか、やめた方がよい

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

こちらの記事参考 https://qiita.com/mironal/items/b93742e8ef72b3268beb

認証処理のコードはfirebase uiを使うと楽らしいが、未検証

FLASK

検索

Firebase Hosting と Basic認証