Angular

HOME
Angular
Firebase Hosting に Angular を統合して Firestore に接続

2020年4月4日 / 最終更新日 : 2020年10月30日矢木浩人 Angular

Firebase Hosting に Angular を統合して Firestore に接続

Firebase Hosting を利用して、生のJavaScriptで記述したサンプルからFirestoreに接続して確認できたので、Angular アプリケーションから同様の動作確認を行う。

1.Angular プロジェクト作成 VSCodeで開いて起動

プロジェクト名を、angularfb とし、Angularプロジェクトを新規作成し、VSCodeで起動、とりあえず起動してみる。

> ng new angularfb
> code .\angularfb\
> ng serve

OK！

立ち上がることを確認

2.AngularプロジェクトをFirebase と統合

2.1 Firebaseにログイン

> firebase login

しておく。ブラウザが立ちあがり、Googleアカウントにログインする。

2.2 Firebase初期設定

プロジェクトのフォルダで、firebase init を実行

Firebase Hosting と Firestoreを有効化

angularfb> firebase init

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

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

  C:\workspaces\Gcp-workspace\Gcp_api_trial\angularfb

Before we get started, keep in mind:

  * You are currently outside your home directory

? Are you ready to proceed? Yes
? 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
:
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
+  Wrote public/index.html

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

+  Firebase initialization complete!

2.3 Angularのコンパイルとビルド

Firebase Hosting の出力先を firebase の publicに変更

firebase.json の hosting/public デプロイ対象のフォルダを、Angularのビルド先のフォルダ、distに変更する

“hosting”: {

“public”: “dist”,

3. Angular Fire

3.1 導入

Angular の公式ライブラリ、Angular Fire を導入する。

https://github.com/angular/angularfire

> ng add @angular/fire@next
> npm install firebase @angular/fire --save

パッケージ不足エラーになったので適宜インストール

> npm install -g node-gyp
> npm install -g node-pre-gyp
> npm install --save grpc

Quick Start

https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md

3.2 Firebase 設定の記述

/src/environments/ にある、ファイルをそれぞれ編集

environment.ts ：テスト用環境設定
environment.prod.ts ：本番用環境設定 ng build –prod の場合使用される

記述内容は、FIrebase コンソールから設定を確認し、追記する。

export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',// {project-id}.firebaseapp.com
    databaseURL: '<your-database-URL>',// https://{project-id}.firebaseio.com 
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',// {project-id}.appspot.com
    messagingSenderId: '<your-messaging-sender-id>'
  }
};

4.Angularアプリケーションの作成

4.1 AppModule で利用モジュールの設定

/src/app/app.module.ts

Firebaseプロバイダを設定、必要なモジュールを設定
- Firestore利用するために、AngularFirestoreModule をインポート
- 画面でバインディング用に、FomsModuleをインポート

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from 'src/environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4.2 AppComponent にコンポーネントの作成

Firebase 単独で Firestoreの動作確認を行った内容を、Angular で実現する。

AngularFiresotre をDIして使用する。
save()、load() メソッドを、ボタンのイベントとバインドする。
load() ボタン押下で、RxJsを使用し、Firestoreのデータを取得

import { Component } from '@angular/core';
import { componentFactoryName } from '@angular/compiler';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  firestore: AngularFirestore;
  title = 'Hot Dog Status';
  status = '';
  
  hotDog: Observable;
  constructor(firestore: AngularFirestore) {
    this.firestore = firestore;
  }

  save(e: any) {
    const doc = this.firestore.doc("sample/sandwichData");
    
    doc.update({"hotDogStatus":this.status}).then(
      () => console.log("sucess")
    ).catch(
      (res) => console.error("error" + res)
    );
  }
  
  load(e: any) {
    this.hotDog = this.firestore.doc("sample/sandwichData").valueChanges();
    this.hotDog.subscribe((res) => {
      this.status = res["hotDogStatus"];
    });
  }
}

4.3 テンプレートの作成

app.component.html の作成

<h1 id="hotDogStatus">{{title}}:{{status}}</h1>
<input type="textField" [(ngModel)]="status" />
<button (click)="save($event)">Save</button>
<button (click)="load($event)">Load</button>

<router-outlet></router-outlet>

5.実行

> ng serve

5.1 画面から操作

実行ログに出力されるURLにアクセス。http://localhost:4200 起動！

Load ボタンを押下、Firestoreに前回保存した値が取得できた！

取得した値をテキストボックスで変更。双方向バインディングで、タイトルがリアルタイムに変更されるのが見て取れる。

Save ボタン押下で、Firesotreにデータ書き込み成功。

5.2 Firebase コンソールから確認

画面から更新した値が反映されたのが、Firebaseコンソールから確認できた！！！

6. 本番環境へデプロイ

Angularを本番用にビルドし、Firebaseデプロイ

> ng build –prod
> firebase deploy --only hosting

以下のようなエラーがでた。。

Error: HTTP Error: 404, Requested entity was not found.
PS C:\workspaces\Gcp-workspace\Gcp_api_trial\angularfb> firebase deploy --only hosting

=== Deploying to 'typea-gcp-api-trial'...

i  deploying hosting

Error: HTTP Error: 404, Requested entity was not found.

https://stackoverflow.com/questions/53049152/firebase-hosting-deploy-error-http-error-404-not-found

firebase init を再実行し、再度ビルド、デプロイ

成功！！！

【参考】デプロイターゲット

https://firebase.google.com/docs/cli/targets?hl=ja

設定
> firebase target:apply hosting angularfb typea-gcp-api-trial.firebaseapp.com
設定クリア
>firebase target:clear hosting angularfb
設定一覧
> firebase target
Resource targets for typea-gcp-api-trial:
[ hosting ]
angularfb (typea-gcp-api-trial.firebaseapp.com)

Follow me!

@pppiroto

カテゴリー: Angular、Firebase、Google Cloud Functions

コメントを残すコメントをキャンセル

Firebase

2020年3月29日

Mac

2020年4月4日

Firebase Hosting に Angular を統合して Firestore に接続

1.Angular プロジェクト作成 VSCodeで開いて起動

2.AngularプロジェクトをFirebase と統合

2.1 Firebaseにログイン

2.2 Firebase初期設定

2.3 Angularのコンパイルとビルド

3. Angular Fire

3.1 導入

3.2 Firebase 設定の記述

4.Angularアプリケーションの作成

4.1 AppModule で利用モジュールの設定

4.2 AppComponent にコンポーネントの作成

4.3 テンプレートの作成

5.実行

5.1 画面から操作

5.2 Firebase コンソールから確認

6. 本番環境へデプロイ

コメントを残すコメントをキャンセル

Cloud Functions と Firestoreを連携させる

Macbook Air early 2015 のSSDを128Gから485Gに換装

1.Angular プロジェクト作成 VSCodeで開いて起動

2.AngularプロジェクトをFirebase と統合

2.1 Firebaseにログイン

2.2 Firebase初期設定

2.3 Angularのコンパイルとビルド

3. Angular Fire

3.1 導入

3.2 Firebase 設定の記述

4.Angularアプリケーションの作成

4.1 AppModule で利用モジュールの設定

4.2 AppComponent にコンポーネントの作成

4.3 テンプレートの作成

5.実行

5.1 画面から操作

5.2 Firebase コンソールから確認

6. 本番環境へデプロイ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル