schedule2018-12-17

FirebaseのHostingを使ってwebアプリを公開する

FirebaseのHostingを使ってwebアプリを公開するための手順のメモです。

HostingをAWSのサービスで例えると、S3 と Cloudfrontを合わせた感じですね。
使った感想は、公開までの手順やドキュメントはHostingの方が優しい印象です。

環境とインストールしたバージョンは以下。

  • Mac OS : High Sierra 10.13
  • node.js : v10.9.0
  • npm : 6.2.0

Firebase Hosting

FirebaseのHostingは、静的コンテンツを簡単に公開できるサービスです。
今回はHostingを使ってウェブアプリを配信してみました。

主な機能は以下の4点です。

  • SSL対応
  • CDNエッジのキャッシュから高速にコンテンツを配信する
  • Firebase CLI を使った高速なデプロイ
  • ワンクリックのロールバック

FirebaseのRealtimeDatabaseやAouthなど他のサービスと組み合わせが簡単です。

公式のドキュメントはこちら

初期設定

npmのfirebase toolsを使ってセットアップします。

$ npm install -g firebase-tools
$ firebase init

     🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥     🔥🔥🔥     🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥     🔥🔥 🔥🔥       🔥🔥     🔥🔥  🔥🔥   🔥🔥  🔥🔥       🔥🔥
     🔥🔥🔥🔥🔥🔥    🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥   🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥    🔥🔥  🔥🔥       🔥🔥     🔥🔥 🔥🔥     🔥🔥       🔥🔥 🔥🔥
     🔥🔥       🔥🔥🔥🔥 🔥🔥     🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥     🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥

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

  /Users/yuya-suzumura/Desktop/GIT/acerola

? 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

ここで、Enterキーを押すとスペースで選択してと怒られる。

Error: Must select at least one feature. Use SPACEBAR to select features, or provide a feature with firebase init [feature_name]

「Hosting」を選択してスペースキーを押すと印が付きます。その状態で、Enterキーを押してください。

◯ 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

以下プロジェクトの設定。

プロジェクトを選ぶ

? Select a default Firebase project for this directory:
  [don't setup a default project]
❯ acerola (acerola-*****)
  Firebase Demo Project (fir-demo-project)
  [create a new project]

公開ディレクトリの名前は?

? What do you want to use as your public directory? (public)

デフォルトはpublic

Single Page Applicationの設定をする?

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

デフォルトはindex.html

初期設定が無事終わりました。

✔  Firebase initialization complete!

全てYesとしてデフォルトだと、下記のようにファイルがつくられます。

$ tree
.
├── firebase.json
├── .firebaserc
├── public
   ├── 404.html
   └── index.html

deploy

デフォルトをデプロイしてみます。

$ firebase deploy

=== Deploying to 'acerola-4cf84'...

i  deploying hosting
i  hosting[acerola-4cf84]: beginning deploy...
i  hosting[acerola-4cf84]: found 12 files in public
✔  hosting[acerola-4cf84]: file upload complete
i  hosting[acerola-4cf84]: finalizing version...
✔  hosting[acerola-4cf84]: version finalized
i  hosting[acerola-4cf84]: releasing new version...
✔  hosting[acerola-4cf84]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/acerola-4cf84/overview
Hosting URL: https://acerola-4cf84.firebaseapp.com

Hosting URLを見ると、以下のサイトが表示されます。 default_index

続いて、自作したHTMLをデプロイしてみます。

publicディレクトリのindex.htmlを置き換えてdeployしました。

acerola_index

こちらも、問題なく公開できました。