DACエンジニアブログ：アドテクゑびす界

DACのエンジニアやマーケター、アナリストが執筆するアドテクの技術系ブログです。

ゼロからAngularでSPAを作ってみた(2) デプロイ・公開編

Angular Firebase Javascript TypeScript UI/UX プログラミング 開発 開発ツール

前回のおさらいと今回やること

前回（はじめてのアプリ編）では、Angular で簡単なチャットアプリを作るところまでやりました。ディレクトリ構成については説明できていなかったのですが、次のようになっています。（主なディレクトリとファイルのみ抜粋）

  • + dist （ビルド・コンパイル後のファイルのディレクトリ）
  • + src
    • + app （アプリ関係のソースコードのディレクトリ）
      • - app.component.css （コンポーネントのスタイルの定義）
      • - app.component.html （コンポーネントのHTMLテンプレート）
      • - app.component.spec.ts （コンポーネントのテストコード）
      • - app.component.ts （TypeScriptによるコンポーネントの実装）
      • - app.module.ts （モジュール（部品）の定義）
    • + environments （環境設定ファイルのディレクトリ）
      • - environment.prod.ts （本番用の環境設定ファイル）
      • - environment.ts （開発用の環境設定ファイル）
    • - index.html （最初に読み込まれるHTMLファイル）
    • - styles.css （全体のスタイル定義）
  • - package.json （NPM のパッケージ設定）

今回は、このアプリを Firebase を使って Web に公開して誰もが使えるようになるところまでやってみます。Firebase は、弊社プロジェクトでも使っていたりするのですが、遊びでも無料の Spark プランで、いろいろなことができます。（Google アカウントが必要です）

前回と同様に macOS で動作確認しているので Windows の人は適宜読み替えてください。

Firebase Hosting を使って Web に公開

Firebase Console をブラウザで開くと、プロジェクトを追加する画面が表示されるので、プロジェクト名と国/地域を設定して、プロジェクトを追加します。

[caption id="attachment_4159" align="aligncenter" width="300"]Firebase Console の画面 Firebase Console の画面[/caption]

[caption id="attachment_4160" align="aligncenter" width="274"]Firebase プロジェクトの追加 Firebase プロジェクトの追加[/caption]

Firebase Hosting - インストール

まずは Firebase Hosting を使うので、一覧に並んでいる機能から Hosting を探して「使ってみる」をクリックします。

[caption id="attachment_4161" align="aligncenter" width="300"]Firebase Hosting を使ってみる Firebase Hosting を使ってみる[/caption]

設定を進めるためのコマンドが表示されるので、それに従って進めていきます。ここから先はアプリのディレクトリ（サンプルの手順そのままであれば dac-angular ）に移動してコマンドを実行していきます。

[caption id="attachment_4162" align="aligncenter" width="300"]Firebase Hosing の設定 - 1 インストール Firebase Hosing の設定 - 1 インストール[/caption]

Firebase CLI のインストール

Firebase CLI をインストールします。

$ npm install -g firebase-tools

Firebase Hosting - デプロイ

[caption id="attachment_4163" align="aligncenter" width="300"]Firebase Hosting の設定 - 2 デプロイ Firebase Hosting の設定 - 2 デプロイ[/caption]

Firebase （Google）にログイン

次のコマンドを実行すると、Google のログイン・認証画面が表示されるのでログインして権限を付与します。

$ firebase login

[caption id="attachment_4164" align="aligncenter" width="300"]Google 認証（Firebase CLI） Google 認証（Firebase CLI）[/caption]

Firebase の設定

次のコマンドを実行すると、対話形式で設定内容を訊かれるので適切なものをスペースで選択、あるいは入力していきます。

$ firebase init
  • Which Firebase CLI feature do you want to setup for this folder? （利用する機能）
    • Hosting
  • Select a default Firebase project for this directory: （関連づける Firebase プロジェクト）
    • dac-angular（前の手順で作成した Firebase プロジェクトを選択）
  • What do you want to use as your public directory? （公開するディレクトリ）
    • dist
  • Configure as a single-page app? （SPAの設定をするか）
    • y

設定が完了すると、プロジェクトIDが .firebaserc に、デプロイ設定が firebase.json に保存されます。（firebase.json の内容についてはこちらにあります）

Angular アプリのビルド

Firebase にデプロイする前に Angular のビルドコマンドを実行します。実行すると dist ディレクトリに公開用のHTML・JS・CSSファイルが作成されます。（ --prod などのビルドオプションの説明はここらへんにあります）

$ ng build --prod

Firebase へのデプロイ

デプロイしてアプリを Web に公開します。

$ firebase deploy

[caption id="attachment_4183" align="aligncenter" width="300"]Firebase Hosting にデプロイして表示 Firebase Hosting にデプロイして表示[/caption]

URL はコマンド実行後にも表示されますが https:// (FirebaseのプロジェクトID) .firebaseapp.com になります。

Firebase Cloud Firestore を使ってデータを保存・共有する

これで Web に公開することはできましたが、この状態では入力した内容は自分の画面にしか表示されず、ブラウザを閉じると消えてしまいます。そこで Cloud Firestore を使ってデータを保存して共有するようにします。

Cloud Firestore - 設定とデータ作成

Firestore の設定

まず、Cloud Firestore の設定を進めていきます。一覧に並んでいる機能から Database を探して「使ってみる」をクリックすると、Realtime Database と Cloud Firestore を選択する画面が表示されるので「FIRESTORE ベータ版を試してみる」をクリックします。

[caption id="attachment_4188" align="aligncenter" width="300"]Database を使ってみる Database を使ってみる[/caption]

[caption id="attachment_4189" align="aligncenter" width="289"]FIRESTORE ベータ版を試してみる FIRESTORE ベータ版を試してみる[/caption]

設定を進めていくと、Cloud Firestore セキュリティルールの設定画面になるので、とりあえず「テストモードで開始」を選択します。（後々、セキュリティルールの設定はやっていきます）

[caption id="attachment_4190" align="aligncenter" width="300"]Cloud Firestore セキュリティルール設定（1） Cloud Firestore セキュリティルール[/caption]

Firestore へのデータの追加

続いて、データを追加する画面が表示されるので「コレクションを追加」をクリックして、データを追加していきます。

[caption id="attachment_4191" align="aligncenter" width="300"]Firestore データ表示（1） Firestore データ表示（1）[/caption]

timeline という名前のコレクションを追加します。

[caption id="attachment_4192" align="aligncenter" width="300"]Firestore データの追加 - 1 コレクションの追加 Firestore データの追加 - 1 コレクションの追加[/caption]

最初のドキュメントとして、フィールド: message、タイプ: string、値: Hello, World! を設定して保存します。

[caption id="attachment_4193" align="aligncenter" width="300"]Firestore データの追加 - 2 最初のドキュメント Firestore データの追加 - 2 最初のドキュメント[/caption]

[caption id="attachment_4194" align="aligncenter" width="300"]Firestore データ表示（2） Firestore データ表示（2）[/caption]

angularfire2 - インストールと設定

Angular への Firestore の組み込みは angularfire2 を使います。ここの手順を参考にして設定を進めていきます。

angularfire2 のインストール

次のコマンドを実行すると angularfire2 と firebase のパッケージがプロジェクトに追加されて、NPM の設定（ package.json ）が更新されます。

$ npm install angularfire2 firebase --save

Firebase 初期化コードの設定

ここで、Firebase 初期化コードスニペットを取得するために、Firebase Console の Project Overview の画面をブラウザで開いて「ウェブアプリに Firebase を追加」をクリックします。

[caption id="attachment_4195" align="aligncenter" width="300"]Firebase 設定・キー取得 - 一覧 Firebase 設定・キー取得 - 一覧[/caption]

Firebase 初期化コードが画面に表示されるのでコピーします。（間違って使わないようにモザイクをかけていますが、このコードはHTMLに貼ってよいものなので秘密の情報ではありません）

[caption id="attachment_4196" align="aligncenter" width="300"]Firebase 設定・キー取得 - ウェブアプリに Firebase を追加 Firebase 設定・キー取得 - ウェブアプリに Firebase を追加[/caption]

コピーした初期化コードの情報を使って、ここの手順を参考にして environment.ts と environment.prod.ts に同じ情報を追記します。（以下のサンプルコードはダミーです）

export const environment = {
  production: false,
  firebase: {
    apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    authDomain: 'dac-angular-xxxxx.firebaseapp.com',
    databaseURL: 'https://dac-angular-xxxxx.firebaseio.com',
    projectId: 'dac-angular-xxxxx',
    storageBucket: 'dac-angular-xxxxx.appspot.com',
    messagingSenderId: '000000000000'
  }
};
export const environment = {
  production: true,
  firebase: {
    apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    authDomain: 'dac-angular-xxxxx.firebaseapp.com',
    databaseURL: 'https://dac-angular-xxxxx.firebaseio.com',
    projectId: 'dac-angular-xxxxx',
    storageBucket: 'dac-angular-xxxxx.appspot.com',
    messagingSenderId: '000000000000'
  }
};

モジュールの設定変更

ここを参考にしてモジュールの定義ファイル（ app.module.ts ）を変更して、AngularFireModule、AngularFirestoreModule をインポートするようにします。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';

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

TypeScript での Firestore の利用

ここを参考にして変更していきます。timeline を Firestore から取得したデータを参照するようにして、add メソッドでは Firestore のコレクション（ timelineCollection ）にデータを追加するようにします。

import { Component } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private timelineCollection: AngularFirestoreCollection<any>;
  timeline: Observable<any[]>;

  constructor(private afs: AngularFirestore) {
    this.timelineCollection = afs.collection<any>('timeline');
    this.timeline = this.timelineCollection.valueChanges();
  }

  add(value: string) {
    this.timelineCollection.add({ message: value });
  }
}

HTMLテンプレートの変更

ここを参考にして変更していきます。データを非同期で取得するので async パイプを追加、データ形式を stirng から message プロパティに文字列が入るように変更したので item.message で参照します。

<div>
  <input type="text" #input>
  <button (click)="add(input.value)">Send</button>
</div>
<ul>
  <li *ngFor="let item of timeline | async">
    {{ item.message }}
  </li>
</ul>

これでコードの変更が完了したのでローカルで確認すると、Firestore 上のデータが表示されて、入力したメッセージは Firestore に保存されるようになっています。

$ ng serve

[caption id="attachment_4197" align="aligncenter" width="300"]チャットアプリ画面（2） チャットアプリ画面（2）[/caption]

[caption id="attachment_4198" align="aligncenter" width="300"]Firestore データ表示（3） Firestore のデータを確認[/caption]

まとめ

ビルドしてデプロイすると、ちゃんとコミュニケーションができるチャットアプリをWebに公開することができました。

$ ng build --prod
$ firebase deploy

[caption id="attachment_4199" align="aligncenter" width="300"]Firebase Hosting にデプロイして表示・入力 Firebase Hosting にデプロイして表示・入力[/caption]

[caption id="attachment_4200" align="aligncenter" width="300"]Firestore データ表示（4） Firestore のデータを確認[/caption]

これでいったん完成ですが、このままだとURLを知っている人は誰でも書き込める状態です。

それがイヤな場合は、一通り遊び終わったら Cloud Firestore のセキュリティルールを変更して、書き込めないようにしておくといいでしょう。（また使うときは元に戻す必要があります）

[caption id="attachment_4201" align="aligncenter" width="300"]Cloud Firestore セキュリティルール設定（2） Cloud Firestore セキュリティルールの設定を書き込めないように変更[/caption]

ここまでのサンプルはここからダウンロードできます。（Firebase の設定などは自分のものに変更して使ってください） 次回は、CI:継続的インテグレーション編として、ビルド・テスト・デプロイの自動化をやってみる予定です。

※ DACはエンジニアを募集しています！ 興味のある人はバナー（↓）からどうぞ