ゼロからAngularでSPAを作ってみた(2) デプロイ・公開編
- UI/UX, 開発ツール Angular, Firebase, Javascript, TypeScript, プログラミング, 開発
前回のおさらいと今回やること
前回(はじめてのアプリ編)では、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 をブラウザで開くと、プロジェクトを追加する画面が表示されるので、プロジェクト名と国/地域を設定して、プロジェクトを追加します。
Firebase Hosting – インストール
まずは Firebase Hosting を使うので、一覧に並んでいる機能から Hosting を探して「使ってみる」をクリックします。
設定を進めるためのコマンドが表示されるので、それに従って進めていきます。ここから先はアプリのディレクトリ(サンプルの手順そのままであれば dac-angular
)に移動してコマンドを実行していきます。
Firebase CLI のインストール
Firebase CLI をインストールします。
1 |
$ npm install -g firebase-tools |
Firebase Hosting – デプロイ
Firebase (Google)にログイン
次のコマンドを実行すると、Google のログイン・認証画面が表示されるのでログインして権限を付与します。
1 |
$ firebase login |
Firebase の設定
次のコマンドを実行すると、対話形式で設定内容を訊かれるので適切なものをスペースで選択、あるいは入力していきます。
1 |
$ 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
などのビルドオプションの説明はここらへんにあります)
1 |
$ ng build --prod |
Firebase へのデプロイ
デプロイしてアプリを Web に公開します。
1 |
$ firebase deploy |
URL はコマンド実行後にも表示されますが https://
(FirebaseのプロジェクトID)
.firebaseapp.com
になります。
Firebase Cloud Firestore を使ってデータを保存・共有する
これで Web に公開することはできましたが、この状態では入力した内容は自分の画面にしか表示されず、ブラウザを閉じると消えてしまいます。そこで Cloud Firestore を使ってデータを保存して共有するようにします。
Cloud Firestore – 設定とデータ作成
Firestore の設定
まず、Cloud Firestore の設定を進めていきます。一覧に並んでいる機能から Database を探して「使ってみる」をクリックすると、Realtime Database と Cloud Firestore を選択する画面が表示されるので「FIRESTORE ベータ版を試してみる」をクリックします。
設定を進めていくと、Cloud Firestore セキュリティルールの設定画面になるので、とりあえず「テストモードで開始」を選択します。(後々、セキュリティルールの設定はやっていきます)
Firestore へのデータの追加
続いて、データを追加する画面が表示されるので「コレクションを追加」をクリックして、データを追加していきます。
timeline
という名前のコレクションを追加します。
最初のドキュメントとして、フィールド: message
、タイプ: string
、値: Hello, World!
を設定して保存します。
angularfire2 – インストールと設定
Angular への Firestore の組み込みは angularfire2 を使います。ここの手順を参考にして設定を進めていきます。
angularfire2 のインストール
次のコマンドを実行すると angularfire2
と firebase のパッケージがプロジェクトに追加されて、NPM の設定( package.json
)が更新されます。
1 |
$ npm install angularfire2 firebase --save |
Firebase 初期化コードの設定
ここで、Firebase 初期化コードスニペットを取得するために、Firebase Console の Project Overview の画面をブラウザで開いて「ウェブアプリに Firebase を追加」をクリックします。
Firebase 初期化コードが画面に表示されるのでコピーします。(間違って使わないようにモザイクをかけていますが、このコードはHTMLに貼ってよいものなので秘密の情報ではありません)
コピーした初期化コードの情報を使って、ここの手順を参考にして environment.ts
と environment.prod.ts
に同じ情報を追記します。(以下のサンプルコードはダミーです)
1 2 3 4 5 6 7 8 9 10 11 |
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' } }; |
1 2 3 4 5 6 7 8 9 10 11 |
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
をインポートするようにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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
)にデータを追加するようにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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
で参照します。
1 2 3 4 5 6 7 8 9 |
<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 に保存されるようになっています。
1 |
$ ng serve |
まとめ
ビルドしてデプロイすると、ちゃんとコミュニケーションができるチャットアプリをWebに公開することができました。
1 2 |
$ ng build --prod $ firebase deploy |
これでいったん完成ですが、このままだとURLを知っている人は誰でも書き込める状態です。
それがイヤな場合は、一通り遊び終わったら Cloud Firestore のセキュリティルールを変更して、書き込めないようにしておくといいでしょう。(また使うときは元に戻す必要があります)
ここまでのサンプルはここからダウンロードできます。(Firebase の設定などは自分のものに変更して使ってください)
次回は、CI:継続的インテグレーション編として、ビルド・テスト・デプロイの自動化をやってみる予定です。
※ DACはエンジニアを募集しています! 興味のある人はバナー(↓)からどうぞ

関連記事
-
-
初心者がRailsで開発 – deviseでユーザー認証設定 –
こんにちは、2年目のYukaです。 開発部所属でありながら実は、、 実際に自分で手を動かして開発する機会がなかなかありませんでした。。 しかしついに、、、 開発初心者がRailsでWebアプリの開発に挑戦します!! 今回のゴールは社内でも使用しているGoogleアカウントで簡単にログインができるよう …
-
-
Tableauを利用してMySQLとRedshiftのクロスDBジョインを実現する
はじめに RedshiftやTreasureDataなどのデータマート用のDBにはID単位の解析結果が格納され、ローカルのMySQLにはIDに紐づいた名称マスタが管理されている構成の場合、データマートのクロス集計結果に対してIDに紐づいた名称を付与したいことがあります。 データマート用に用意したDB …
-
-
【小ネタ】タスク管理ツール移行: Trello から Asana
プロジェクトチームのタスク管理ツールを Trello から Asana に変えることになり、 タスクの移行が意外と簡単にできた、というお話です。 Trello と Asana もともと使っていたのは Trello(トレロ)です。 プロジェクト > タスクグループ > タスク …
-
-
最強のSQLクライアント(GUIツール)「TeamSQL」を使ってみた!
はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 エンジニアの皆さん、SQLクライアント(GUIツール)って何使ってます? わたくしはこ …
-
-
Charlesを使ってスマホアプリ(iOS)のUAを調べてみた
はじめに ここ最近のスマホアプリには、Webブラウザの機能を実装したものが少なくありません。 (“スマホアプリ内で立ち上がるブラウザ「アプリ内ブラウザ」”の機能は「WebView」というコンポーネントを用いて実装されています。) 昨今のWebサイト、サービス運営に於いて、「通 …
-
-
Scala入門 準備編「開発環境構築」 – PHP使いからScala使いへ転身!
はじめに みなさんこんにちは、今月入社しましたプロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 XmediaOneの開発で採用しているプログラム言語はS …
-
-
意外と知らないかも? Chrome DevTools の機能10選
みんな使っている Chrome DevTools。 Web開発やトラブルシューティングには必須ですが、便利な機能を知らないで使っている人がいたり、Web で使い方を調べても古い情報だったりすることがあるので、部内で Chrome DevTools についての勉強会を開催しました。 ここでは、その中か …
-
-
SafeFrameでリッチ広告をセキュアに実現
アドサーバ(広告配信サーバ)は、通常iframeで広告のクリエイティブを配信している。(JS配信とかに対応しているアドサーバもある) 通常のセキュリティだとiframeの中身(srcで実際に表示されている側)がiframeを操作する事はできない。つまりexpandなどのリッチ広告、特に表示領域を変更 …
-
-
Burpの使い方!
こんにちは、第二ソリューション開発部の谷口です。 受託開発の部署で開発を担当してます。 APIを扱う機会が多く、今回は通信内容を確認するためのローカルプロキシツール「Burp」について書かせて頂きます。 Burpとは Webアプリケーション開発時の検証において、Webサーバとブラウザ間の通信内容を確 …
-
-
Selenium × PHP でテスト自動化!【環境構築編】
はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 テスト自動化の背景 わたくしが担当するXmediaOneでは品質担保のために①コードベ …