Angular7プロジェクトをFirebaseでホスティングしてみる
Angular7プロジェクトをFirebaseのHostingへデプロイして公開してみる。
１．Node.js＆npmインストール
Node.js 本家 から推奨版（現時点では8.12.0 LTS）をダウンロードしてインストールする。
２．Angular CLIインストール
現時点の最新版（7.0.3）をインストールする。旧バージョンがインストール済みの場合はuninstallおよびcache verifyも実行する。
$ npm uninstall -g @angular/cli $ npm cache verify $ npm install -g @angular/cli@7.0.3
３．Firebase CLIインストール
Firebase CLIをインストールの上、Firebaseへログインする。
$ npm install -g firebase-tools $ firebase login
ブラウザが開くので、Firebaseを利用するGoogleアカウントを選択（またはログイン）する。成功すれば、
Waiting for authentication... + Success! Logged in as xxxxxxxxxx@gmail.com
のようにコンソールに表示される。
４．Firebaseプロジェクト作成
https://console.firebase.google.com にて、Hosting用のプロジェクトを作っておく（今回は「angular7」を作った）。
５．Angularプロジェクト作成、ビルド
まずはAngularプロジェクト「angular7」を作る。
$ ng new angular7 ? Would you like to add Angular routing? No ? Which stylesheet format would you like to use? SCSS [ http://sass-lang.com ] CREATE angular7/angular.json (3877 bytes) CREATE angular7/package.json (1315 bytes) ...
次に、デプロイ用のファイル一式を「angular7/public」ディレクトリへ生成する。
$ cd angular7 $ ng build --prod --output-path=public
６．FirebaseのHostingへデプロイする
angular7ディレクトリをそのままFirebaseのプロジェクトとして初期化する。カレントディレクトリをangular7のままで、以下を実行する。
$ firebase init
質問に対しては以下のように回答した（生成済みのpublic/index.htmlを上書きしないよう注意）。「angular7-xxxxx」はFirebaseプロジェクト作成時に割り当てられたプロジェクトIDであり、「xxxxx」部分は作成の都度、固有の文字列が割り当てられる。
? Are you ready to proceed? -> Yes ? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. -> Hosting: Configure and deploy Firebase Hosting sites ? Select a default Firebase project for this directory: -> angular7-xxxxx (angular7) ? What do you want to use as your public directory? -> public ? Configure as a single-page app (rewrite all urls to /index.html)? -> No ? File public/index.html already exists. Overwrite? -> No
そしてデプロイを実行する。
$ firebase deploy === Deploying to 'angular7-xxxxx'... i deploying hosting i hosting[angular7-xxxxx]: beginning deploy... i hosting[angular7-xxxxx]: found 8 files in public + hosting[angular7-xxxxx]: file upload complete i hosting[angular7-xxxxx]: finalizing version... + hosting[angular7-xxxxx]: version finalized i hosting[angular7-xxxxx]: releasing new version... + hosting[angular7-xxxxx]: release complete + Deploy complete! Project Console: https://console.firebase.google.com/project/angular7-xxxxx/overview Hosting URL: https://angular7-xxxxx.firebaseapp.com
７．動作確認
Firebaseへデプロイ時に表示されたHosting URLへアクセスすると・・・
Welcome to angular7!
無事表示されただろうか。