FirebaseにAngularアプリをデプロイ

Firebaseで新しいプロジェクトを作成


始めにFirebaseで新しいプロジェクトを作成します。
Firebaseにログインし、コンソールに行きます。
コンソルで新しいプロジェクトを作成します。
１、プロジェクトの追加をクリックします。
２、次にプロジェクトの名前を付けます。
３、Googleアナリティクスを有効にし、続行をクリックします。
４、新しいプロジェクトが出来るまで待ちます。
５、ウェブ（＜/＞）を選択し、アプリを追加します。
６、アプリのニックネームを付け、アプリを登録します。
７、左上プロジェクトの概要右の歯車アイコンをクリックし、
　プロジェクトの設定をクリックします。
８、全般タブを選択します。
９、ウエブアプリにFirebaseを追加より、
　スクリプトをコピーします。
 スクリプトは以下の様になります。
 
  var firebaseConfig = {
    apiKey: "...",
    authDomain: "tsutomu-site.firebaseapp.com",
    projectId: "tsutomu-site",
    storageBucket: "tsutomu-site.appspot.com",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();

ローカルのAngularアプリをFirebaseにデプロイする準備


Angularアプリ作成は、
「Angular Materialで高品質なデザイン」で詳しく説明しています。
ここをクリックしてください
デプロイするには、
firebase-toolsをインストールする必要があります。
Terminalより、次のコマンドをインプットします。

npm install -g firebase-tools

次は、
デプロイするAngularアプリの、
environment.prod.tsファイルを開きます。
先ほどFirebaseプロジェクトからコピーしたスクリプトを、
ここにペーストします。
environment.prod.tsのコードは以下の様になります。

export const environment = {
  production: true,
  firebase: {
    apiKey: "...",
    authDomain: "tsutomu-site.firebaseapp.com",
    projectId: "tsutomu-site",
    storageBucket: "tsutomu-site.appspot.com",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
  }
};

アプリをビルド


ローカルアプリのルートから、
アプリをビルドします。
次のコマンドを入力します。

ng build --prod

アプリをFirebaseにデプロイ


ローカルアプリのルートから、
次のコマンドを入力します。

firebase login

新しいプロジェクトの作ったアカウントにログインします。

firebase init

hostingを選びます。
空白キーで（）に、＊記号を入力します。
既存のプロジェクトとして、
新しく作ったプロジェクトを指定します。
フォルダは、ng build --prodで作成した、
distフォルダー（index.htmlのあるフォルダー）を指定します。
single-page app はyesを指定します。
auto matic build and deploy はnoを指定します。 
index.htmlがすでにあるので、オーバーロードはする必要はありません。

次はデプロイします。

firebase deploy 

終わりましたら、
Ctrl + Url　をクリックするとウエブが開きます。