Angularプロジェクトをデプロイする！Firebase Hostingの使い方。

この記事では、Angularプロジェクトをデプロイする方法について説明する。

ローカル環境で制作したアプリはデプロイするまでは、オンラインからアクセスすることは出来ない。

今回は、作成したプロジェクトの公開方法について説明していく。

企業で開発者として働く場合も、デプロイを始めとするインフラストラクチャの知識は重宝される。

ぜひ、自分で経験を積んで自由にアプリを公開できるようになっておこう。

ホスティングサーバーについて

Angularに限らず制作したWebのプロジェクトを公開するためにはサーバーが必要だ。

Angularプロジェクトを公開するためのサーバーとしては、以下のような選択肢が考えられる。

• AWSなどのホスティングサービス
  企業がWebサービスを開発する際はテスト環境と本番環境を分割してホスティングすることが多い。
  
  テスト環境 ⇒ 自社のネットワーク内に配置されたヴァーチャルマシン上でデプロイする。
  本番環境 ⇒ AWS（アマゾンウェブサービス）などのホスティングサービスを利用してデプロイする。
  
• Firebase Hosting
  FirebaseはGoogleが提供しているバックエンド・インフラシステムを構築するためのサービス。「Firebase Hosting」は数あるFirebaseのサービスのうちのひとつで、作ったアプリを手軽に公開することができる。
  
  この記事では、このFirebase Hostingを使ったホスティングの例を紹介する。AngularとFirebaseはともにGoogleによって開発されているため両者の相性はいい。
  
• Webサーバーなどのレンタルサーバ－
  Xサーバ－などのおもにブログなどで使用されるサーバーもAngularのアプリを公開するために使用することができる。その場合は、publichtmlフォルダ内にビルドしたアプリを配置する。

Firebaseを準備する

Firebase Hostingを利用するためのFirebase側の準備をしておこう。

Firebaseプロジェクトの作成

まずは、Firebaseのアカウントを作成しコンソールにログインしてほしい。

コンソール画面が表示されたら、「プロジェクトを追加」から新しいプロジェクトを作成する。

プロジェクト名を入力して新しいFirebaseを作成する。

プロジェクト名はデプロイするAngularプロジェクトのタイトルと合わせておくのがいいだろう。Google Analyticsを使用するか尋ねられるが、デプロイするだけなら必要無いので有効にしない。

Firebaseプロジェクトが作成されたら、そのプロジェクトをコンソールにて選択する。

Firebase CLIのインストール

Firebaseのプロジェクトを作成したら、次は「Firebase CLI」というツールをインストールしよう。

Firebase CLIはFirebaseを管理するうえで必要となるコマンドを提供する。

Firebase CLIをインストールするにはnpm（Node Package Manager）を使用する。npmをインストールしていない人はこちらの記事を参考にインストールしておこう。

* npmがインストールされているか確認したい時はnpm -versionを使用する。

npmをインストールしたらコマンドラインから次の指示を実行する。

m install -g firebase-tools

インストールされたか確認したい場合はfirebase –versionを実行する。

Angularプロジェクトをデプロイする

Firebase側の準備ができたらデプロイを進めていこう。

まずは使用しているIDEをプロジェクトとともに開いてほしい。

IDEからログインする

使用しているIDEからFirebaseのコマンドを実行するには、IDEからGoogleアカウントへのアクセスを許可する必要がある。

使用するIDEのターミナルから以下のコマンドを実行しよう。

firebase login

ブラウザにてアクセスの認証確認画面が開くので、アカウントを選択したうえでアクセスを許可する。

Firebaseの初期化

次にAngularのプロジェクトに対しFirebaseを初期化する。

以下のコマンドをターミナルにて実行する。

firebase init

public directoryは「dist」と指定しよう。

初期化が完了したらdistフォルダにあるindex.htmlを削除しておく。

Angularプロジェクトをビルドする

次にAngularのプロジェクトをビルドしよう。

プロジェクトがデプロイしてもいい状況になっているかを確認したうえで以下のコードを実行する。

ng build

実行するとプロジェクト内にdistというフォルダが作られ、その直下にビルドされたプロジェクトのフォルダが配置されているはずだ。

デプロイに入る前にfirebaseの設定を確認する。

firebase.jsonを開きpublicプロパティを”dist/プロジェクト名”に変更する。

"public": "dist/try-firebase-app"

Angularプロジェクトのデプロイ

プロジェクトをデプロイする前に、以下のコマンドを実行してアプリが正しく表示されるか確認しよう。

firebase serve

問題がなければ以下のコマンドを実行する。

firebase deploy

Hosting URLにアクセスするとアプリが表示されるはずだ。

Deploy completeと表示されてから実際にデプロイが完了するまで時間が掛かるので見られない場合は少し待ってからアクセスする。

リリース履歴の管理

デプロイしたアプリの履歴はリリース履歴としてFirebase Hostingのコンソールにて確認することができる。

ここではリリースしたバージョンをロールバックすることができる。