Chapter 04

3. Firebase Hostingへのデプロイ

Masumi Morishige(umi-mori)
Masumi Morishige(umi-mori)
2020.12.23に更新

Firebaseとは?

Firebaseとは、Googleが提供するmBaaS(mobile Backend as a Service)になります。別の言い方をすると、ウェブアプリケーションやモバイルアプリケーションのバックエンド(ユーザーには見えないデータベースを管理したりするサーバーサイドの部分)を簡単に構築するサービスになります。

https://firebase.google.com/

Firebase Hostingとは?

ホスティングとは、ウェブサイトやウェブアプリケーションを公開するためのサーバーになります。Firebaseが提供しているこの機能を用いて、ウェブサイトを公開して、URLを発行します。

Firebase Hostingへのデプロイ方法

デプロイとは、ソフトウェアデプロイメントのことを表し、ウェブサイトが利用できるように公開するという意味で使っています。

1. Firebaseの登録

以下の公式サイトに従って、アカウントを作成しましょう。

https://firebase.google.com/

2. Node.jsとnpmのインストール

アカウント作成が終わったら、Node.jsとnpm(Node Package Manager)のインストールを行っていきます。

Progateさんの以下の記事を参考にして、インストールしましょう。

3. Firebaseの環境構築

続いて、Terminalで以下のようなコマンドを叩きましょう。

$ npm install -g firebase-tools
$ firebase login

ブラウザからログインしたら、連携完了です。

4. Firebaseとの連携

次に、Firebaseのプロジェクトを作成して、これまで作成してきたウェブサイトを連携させましょう。ウェブサイトのフォルダの中で以下のようなコマンドを叩きます。

いくつかシェルから質問をされますが、以下のように返答するすることを推奨します。

質問 返答
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Hostingのみ
? Please select an option Create a new project
? Please specify a unique project id <自分の作成したプロジェクト名>
? What would you like to call your project? <何も入力せずにEnter>
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
$ firebase init

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

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

  /Users/masumi_morishige/Documents/Local_PGM/lpt/landing-page-temp

? Which Firebase CLI features do you want to set up 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
 ◯ Emulators: Set up local emulators for Firebase features
 ◯ Remote Config: Get, deploy, and rollback configurations for Remote Config

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

? Please select an option: 
  Use an existing project 
❯ Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project

? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:
 landing-page-temp-1223
? What would you like to call your project? (defaults to your project ID) 
✔ Creating Google Cloud Platform project
✔ Adding Firebase resources to Google Cloud Platform project

🎉🎉🎉 Your Firebase project is ready! 🎉🎉🎉

Project information:
   - Project ID: landing-page-temp-1223
   - Project Name: landing-page-temp-1223

Firebase console is available at
https://console.firebase.google.com/project/landing-page-temp-1223/overview
i  Using project landing-page-temp-1223 (landing-page-temp-1223)

=== 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)? No
? Set up automatic builds and deploys with GitHub? No
✔  Wrote public/404.html
✔  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!

すると、以下のようなフォルダ構成に変わっていれば成功です。

firebase-folder.png

5. 初めてのデプロイ

では、実際にデプロイをしてみましょう。
デプロイをするときは以下のコマンドを叩きます。

$ firebase deploy

=== Deploying to 'landing-page-temp-1223'...

i  deploying hosting
i  hosting[landing-page-temp-1223]: beginning deploy...
i  hosting[landing-page-temp-1223]: found 2 files in public
✔  hosting[landing-page-temp-1223]: file upload complete
i  hosting[landing-page-temp-1223]: finalizing version...
✔  hosting[landing-page-temp-1223]: version finalized
i  hosting[landing-page-temp-1223]: releasing new version...
✔  hosting[landing-page-temp-1223]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/landing-page-temp-1223/overview
Hosting URL: https://landing-page-temp-1223.web.app

すると、最後の行にhttps://landing-page-temp-1223.web.appのようなURLが表示されます。これがデプロイしたウェブサイトのURLです。

しかし、実際アクセスしてみると、、、おや。
以下のようなウェブサイトが表示されます。

sample-firebase.png

これはpublicフォルダの中にある初期ファイルのindex.htmlをデプロイしているためになります。

6. 自分のウェブサイトのデプロイ

では、実際に自分で作ったウェブサイトをデプロイしてみましょう。

publicフォルダの中がデプロイされるため、以下のように作成したindex.htmlとstaticフォルダをpublicフォルダの中に移動しましょう。この時、index.htmlは上書きします。

move-folder.png

フォルダの移動が終わったら、Firebaseへ再びデプロイしましょう。

$ firebase deploy

もう一度URLにアクセスして、以下のように作成したウェブサイトが表示されれば、デプロイ成功です!

original-website-deploy.png