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


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

前回(はじめてのアプリ編)では、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.jsonNPM のパッケージ設定)

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

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

Firebase Hosting を使って Web に公開

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

Firebase Console の画面

Firebase Console の画面

Firebase プロジェクトの追加

Firebase プロジェクトの追加

Firebase Hosting – インストール

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

Firebase Hosting を使ってみる

Firebase Hosting を使ってみる

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

Firebase Hosing の設定 - 1 インストール

Firebase Hosing の設定 – 1 インストール

Firebase CLI のインストール

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

Firebase Hosting – デプロイ

Firebase Hosting の設定 - 2 デプロイ

Firebase Hosting の設定 – 2 デプロイ

Firebase (Google)にログイン

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

Google 認証(Firebase CLI)

Google 認証(Firebase CLI)

Firebase の設定

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

  • 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 などのビルドオプションの説明はここらへんにあります)

Firebase へのデプロイ

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

Firebase Hosting にデプロイして表示

Firebase Hosting にデプロイして表示

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

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

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

Cloud Firestore – 設定とデータ作成

Firestore の設定

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

Database を使ってみる

Database を使ってみる

FIRESTORE ベータ版を試してみる

FIRESTORE ベータ版を試してみる

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

Cloud Firestore セキュリティルール設定(1)

Cloud Firestore セキュリティルール

Firestore へのデータの追加

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

Firestore データ表示(1)

Firestore データ表示(1)

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

Firestore データの追加 - 1 コレクションの追加

Firestore データの追加 – 1 コレクションの追加

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

Firestore データの追加 - 2 最初のドキュメント

Firestore データの追加 – 2 最初のドキュメント

Firestore データ表示(2)

Firestore データ表示(2)

angularfire2 – インストールと設定

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

angularfire2 のインストール

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

Firebase 初期化コードの設定

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

Firebase 設定・キー取得 - 一覧

Firebase 設定・キー取得 – 一覧

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

Firebase 設定・キー取得 - ウェブアプリに Firebase を追加

Firebase 設定・キー取得 – ウェブアプリに Firebase を追加

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

モジュールの設定変更

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

TypeScript での Firestore の利用

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

HTMLテンプレートの変更

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

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

チャットアプリ画面(2)

チャットアプリ画面(2)

Firestore データ表示(3)

Firestore のデータを確認

まとめ

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

Firebase Hosting にデプロイして表示・入力

Firebase Hosting にデプロイして表示・入力

Firestore データ表示(4)

Firestore のデータを確認

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

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

Cloud Firestore セキュリティルール設定(2)

Cloud Firestore セキュリティルールの設定を書き込めないように変更

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

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


DACエンジニア採用情報

  関連記事

no image
AWSにRailsアプリをデプロイする(準備編)

今回は、せっかくRailsで開発したアプリをAWS上に公開してみたいので その構築方法をまとめていきたいと思います。 (前回の記事:初心者がRailsで開発 – deviseでユーザー認証設定 ) AWSの設定はすでに社内で使用できるようになっていたので割愛します。 ★やりたいこと Gitlabでコ …

Tableauを利用してMySQLとRedshiftのクロスDBジョインを実現する

はじめに RedshiftやTreasureDataなどのデータマート用のDBにはID単位の解析結果が格納され、ローカルのMySQLにはIDに紐づいた名称マスタが管理されている構成の場合、データマートのクロス集計結果に対してIDに紐づいた名称を付与したいことがあります。 データマート用に用意したDB …

Scala入門 準備編「開発環境構築」 – PHP使いからScala使いへ転身!

  はじめに みなさんこんにちは、今月入社しましたプロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 XmediaOneの開発で採用しているプログラム言語はS …

x-callback-urlを使ってみた

x-callback-urlとは? iOSのアプリ間連携の仕様の一つみたいです。簡単に言うと、ディープリンクを行うためにカスタムURLスキームを利用するが、アプリ毎にバラバラな規則でURLスキームを設定するとアプリ間連携をスムーズに行うことができないため、どのような規則でURLスキームを設定するかを …

Scala番外編「Boxに保存したファイルをBox APIを使ってダウンロードしよう!」

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 Box APIを使う背景・目的 DACはメディアレップです メディアレップとは、インタ …

自社サービスのDocker化(後編)

こんにちは。 インフラ開発部の上田です。 前回、前編としてDockerについて書き、早半年も経ちました。 前編はこちらです 今回は後編として、以下について書いてみたいと思います。 ■複数プロセス起動 前編で書いた通り、通常のOS起動時とは異なり、コンテナ上で個別にプロセスを起動する必要があります。 …

クラウド電話API “Twilio”で起こされてみた

どうも、開発部のクラヴマガです。 弊社サービスも最近はAWSの様なクラウド環境でサービスを構築することが多くなりました。 そこで問題になるのが、障害などによる深夜対応・・・。 データセンターに物理サーバをおいていた頃は、データセンターから障害発生時に 電話連絡をもらっていたのですが、クラウド環境では …

Bootstrapのモーダル機能で多重表示する際に解決しなければならない2つの問題

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発・保守を担当しています。 エンジニアの皆さん、デザインってどうしてます? わたくしはプライベートでとあるW …

ゼロからAngularでSPAを作ってみた(1) はじめてのアプリ編

はじめに Single Page Application (SPA)って知っていますか? Webサイトでコンテンツのリンクをクリックした時に妙に表示が早いな〜というとき、実はページを移動するのではなくてページの一部のみを書き換えていたりします。 こういったサイトの作り方を Single Page A …

MacのSSHポートフォワーディングツール「autossh」と「Coccinellida」をご紹介!

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 さて、皆さんはSSHポートフォワーディングするときにどんな方法で行っていますか? わた …