Blog

Angularをfirebaseホスティングにデプロイする

Angularのシングルビューアプリケーションは見た感じがとても良いですね。
だけど、herokuで運用したとき、最初の読み込みに26秒かかるという問題が発生。
26秒かかると、誰もみないですよね。(ちなみに最初は2分でした笑)
そこでFirebaseHsotingを利用してみました。すると、読み込みまで1.4秒まで短縮。

今回はFirebaeHostingへのデプロイ方法をまとめます。

本記事の環境

Angular CLI: 8.3.14
Node: 12.5.0
OS: linux x64
Angular: 8.2.12

ちなみにいまは1.4秒

まずAngularの環境構築


node -v

nvm install 12.5.0

//間違えたnodeのバージョンでnpm installした場合は、下記コマンドでアンインストールしておく
//node_nodulesのフォルダにすべてインストールされているため
rm -rf node_modules

nvm use 12.5.0

npm install

//Angularのバージョンを確認
$ ng --version
//Angular-cliをインストールしないといけない これは常に最新を利用
$ npm install -g @angular/cli

//プロダクション環境でbuildします。
ng build --prod

//WEBサーバー起動 オプションをつけないとCloud9ではWEBサーバーは起動しない
//ちなみにngコマンドは Angularのコマンド
ng serve --host $HOST --disableHostCheck --port $PORT

これでとりあえず動作確認できたら、

今度はFirebaseHostingの環境構築に入ります。


//firebase周りのツールのインストール
npm install -g firebase-tools

firebase login

firebase init
//この後、対話型の設定が続きます。必要な項目を設定しましょう。

firebase initの設定に基づいて、プロジェクトルートに firebase.jsonファイルが作られています。


```
{
  "hosting": {
    "public": "dist/your_application_name",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

そしたら
このコマンドにより、project_root>src>environment>environment.ts
に記載されている情報に基づいて、アプリケーションをビルドします。


ng build --prod

firebase deploy

でデプロイ完了
まだ詳細が書ききれておらず、ご迷惑をおかけします。
明日また追加する予定です。


一つ前の記事 Swift ??演算子について サルだとわからん。
次の記事 マテリアルデザイン swift ライブラリ不使用で サルだとわからん!