Firebase Hosting完全版(Angularで開発したSPAを無料で公開~ダッシュボードで費用管理)

こんにちは。今回はFirebase Hostingについての解説です。
AngularとFirebaseの連携手法については以前に詳しくまとめた記事をご覧ください

Firebase Hosting

基礎知識

AP公開までの手順

本記事の前提

  • 以下の作業が完了済み
    • Angular PJの生成
      1
      ng new "ap-name"
    • Firebase PJの作成
      • Firebase Consoleでする作業
    • Firebase CLIの導入
      1
      npm install -g firebase-tools
    • 開発環境からのFirebase Login
      1
      firebase login
  • ここまでの作業の詳細は以前の記事をご確認ください

事前の設定作業:Firebase PJの初期化

  • 以下のコマンドでFirebase PJを初期化可能です

    1
    firebase init
  • 利用するリソースを選択

    • 上記を実行すると以下のように選択欄が表示されます
    • 今回はHostingだけを選択(スペース) ⇒ Enter
      1
      2
      3
      4
      5
      6
      7
      ? 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
  • Hosting Setup

    • deployコマンドの実行時に公開したいディレクトリを尋ねられます
      • publicのまま変更無し ⇒ Enter
    • 変更
      • ディレクトリのパスを入力 ⇒ Enter
  • Angularの場合の設定

    • publicディレクトリを指定
      • dist/angular-ap-name
        • Angularでビルドを実行した際に、生成されたファイルが格納されるディレクトリのことです
        • ここをちゃんと設定しないと後にハマるので気を付けましょう
    • single-page appとして設定
      • y
      • AngularはSingle Page Applicationであるためyes
  • 出力

    1
    2
    3
    4
    5
    6
    ✔  Wrote dist/firebase-sample/index.html

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

    ✔ Firebase initialization complete!
  • firebase.jsonというファイルが生成されていれば成功です

APをFirebase Hostingへ公開

  • deployコマンド

    • Firebase PJのデフォルトの Hosting サイトにデプロイされます
      1
      firebase deploy
  • deployを実行

    1
    firebase-sample (master) $ firebase deploy
  • 出力

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    === Deploying to 'fir-sample-3a2dc'...

    i deploying hosting
    i hosting[fir-sample-3a2dc]: beginning deploy...
    i hosting[fir-sample-3a2dc]: found 10 files in dist/firebase-sample
    ✔ hosting[fir-sample-3a2dc]: file upload complete
    i hosting[fir-sample-3a2dc]: finalizing version...
    ✔ hosting[fir-sample-3a2dc]: version finalized
    i hosting[fir-sample-3a2dc]: releasing new version...
    ✔ hosting[fir-sample-3a2dc]: release complete

    ✔ Deploy complete!

    Project Console: https://console.firebase.google.com/project/fir-sample-3a2dc/overview
    Hosting URL: https://fir-sample-3a2dc.firebaseapp.com
  • Deploy completeと出れば成功です

  • デフォルトのホスティングサイトのURLは以下のように規定されます
    • projectID.web.app
    • projectID.firebaseapp.com
  • 今回のHosting URLにアクセスしてみます

    1
    Hosting URL: https://fir-sample-3a2dc.firebaseapp.com
  • 空のままデプロイした場合のデフォルト画面

    • まだAPをビルドしていなければこのように表示されます
      • dist/angular-ap-nameの中が空であるため
Firebase Hosting

実際にAPをビルドしてからdeployして変化を確認しましょう

APをビルドして再度deploy

  • Angular PJをビルド

    • dist/my-project-nameディレクトリが生成されます
      1
      $ ng build --prod
  • 出力

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    firebase-sample (master) $ ng build --prod
    Generating ES5 bundles for differential loading...
    ES5 bundle generation complete.

    chunk {2} polyfills-es2015.5b10b8fd823b6392f1fd.js (polyfills) 36.2 kB [initial] [rendered]
    chunk {3} polyfills-es5.8e50a9832860f7cf804a.js (polyfills-es5) 127 kB [initial] [rendered]
    chunk {0} runtime-es2015.c5fa8325f89fc516600b.js (runtime) 1.45 kB [entry] [rendered]
    chunk {0} runtime-es5.c5fa8325f89fc516600b.js (runtime) 1.45 kB [entry] [rendered]
    chunk {1} main-es2015.3b7f37fdd4f3fcb1925c.js (main) 245 kB [initial] [rendered]
    chunk {1} main-es5.3b7f37fdd4f3fcb1925c.js (main) 293 kB [initial] [rendered]
    chunk {4} styles.09e2c710755c8867a460.css (styles) 0 bytes [initial] [rendered]
    Date: 2020-04-15T15:05:31.948Z - Hash: e637fe92a3f41b4587c8 - Time: 21540ms
  • Angular PJ直下にdistディレクトリが生成されます

    1
    2
    3
    4
    firebase-sample (master) $ ls
    angular.json dist karma.conf.js package-lock.json tsconfig.app.json tslint.json
    browserslist e2e node_modules README.md tsconfig.json
    database.rules.json firebase.json package.json src tsconfig.spec.json
  • もう一度deploy

    1
    firebase-sample (master) $ firebase deploy
  • 出力

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    === Deploying to 'fir-sample-3a2dc'...

    i deploying hosting
    i hosting[fir-sample-3a2dc]: beginning deploy...
    i hosting[fir-sample-3a2dc]: found 10 files in dist/firebase-sample
    ✔ hosting[fir-sample-3a2dc]: file upload complete
    i hosting[fir-sample-3a2dc]: finalizing version...
    ✔ hosting[fir-sample-3a2dc]: version finalized
    i hosting[fir-sample-3a2dc]: releasing new version...
    ✔ hosting[fir-sample-3a2dc]: release complete

    ✔ Deploy complete!

    Project Console: https://console.firebase.google.com/project/fir-sample-3a2dc/overview
    Hosting URL: https://fir-sample-3a2dc.firebaseapp.com
  • Hosting URLを確認

    • アプリの画面が反映されている
    • 今回は特にAPを弄っていないので、ng newで生成したAPの初期画面が表示されています

以降の開発の流れ

  1. APを改修
  2. ローカルで確認
    1
    ng serve --open
  3. APをビルド
    1
    ng build --prod
  4. 本番環境へデプロイ
    1
    firebase deploy

Firebase Console解説(Hosting関連)

Hosting ダッシュボード

  • 以下のように
  • カスタムドメインの追加

    • 本格的なサービスのリリースに向けてドメインを変えたい場合は、こちらの画面で簡単に登録可能です
  • ドメインの取得

  • Google Domains利用イメージ

    • 取得したいドメイン名で検索すると、利用可能なドメインと料金が出ます。以下の例では、.comはすでに使われているようです。

使用状況

  • 以下のように時系列で使用状況がビジュアライズされます

使用料と請求額

  • 上限と現在の使用料が分かります
  • 無料のSparkプランでは”10GB/month”が上限になります
    - 重要なポイント
    - ビジネスをスモールスタートさせる段階では
  • 容量について

    • 10 GB = 10487560 KB
    • 現在の使用料=リクエスト×1
      10485760
  • 他のプランと料金を比較する際は以下をご確認ください

  • プランの変更

まとめ

今回の解説は以上になります。

クラウドの最大のメリットはビジネスの規模に応じてPlatformを柔軟にスケールできることです。

サービスの初期段階ではFirease HostingのSparkプランを使って無料でスモールスタートを切り、人気・収益を確保してから有料プランに移行というのが、スタートアップにありがちな手法です。

ここまででその手法を身に着けることができたと思います。良いアイデアを思いついたら是非Hostingを使って広告でもつけて公開してみましょう。淡々と学習するよりも、遥かにモチベーションが向上します。

  • 追記:ng deployやangular-fireを使って、firebaseコマンドを使わずにデプロイする手法もあるようです

おまけ: firebase.jsonの中身

  • 以下にデプロイの設定が記載されています
    • Angularなら以下のようになっていればOK
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      firebase.json
      {
      "hosting": {
      "public": "dist/angular-pj-name",
      "rewrites": [
      {
      "source": "**",
      "destination": "/index.html"
      }
      ]
      }
      }
@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×