suzu6Firebaseの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を使ってウェブアプリを配信してみました。
主な機能は以下の４点です。
- 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.htmldeploy
デフォルトをデプロイしてみます。
$ 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を見ると、以下のサイトが表示されます。
続いて、自作したHTMLをデプロイしてみます。
publicディレクトリのindex.htmlを置き換えてdeployしました。
こちらも、問題なく公開できました。