AngularプロジェクトをFirebaseで公開(ホスティング)する方法

angularのロゴ画像

Angularで作ったSPA(シングルページアプリケーション)をFirebaseを使ってホスティング(公開)する方法をまとめた。

Firebaseで新規プロジェクトを作っておく

まずはFirebaseにアクセス。

公式: https://firebase.google.com/

firebaseでAngularプロジェクトをホスティングする方法の画像

「使ってみる」をクリックすると以下の画像のようにコンソール画面にいく。

firebaseでAngularプロジェクトをホスティングする方法の画像

初めての人はアカウントを作るためにグーグルのログインが必要。

新規で作りたいので「+」をクリックしてプロジェクトを追加する。

firebaseでAngularプロジェクトをホスティングする方法の画像

まずはプロジェクト名を付ける。

何でもいいけど例えば僕が作ったのは「so-portfolio-app」です。

単語をハイフンで繋ぐのが定石かな。

firebaseでAngularプロジェクトをホスティングする方法の画像

プロジェクト名を付けた後は、グーグルアナリティクスと連携するかどうか聞かれる。

「グーグルアナリティクスって何?」という人はいったん連携しなくていいと思う。

firebaseでAngularプロジェクトをホスティングする方法の画像

「グーグルアナリティクスと連携する」とした人は、アナリティクスのアカウントを選ぶページにいくので、選んでください。

これでプロジェクトの初期設定は完了。

firebaseでAngularプロジェクトをホスティングする方法の画像

すると作成したプロジェクトのトップページに移動する。

今回はAngularのWebアプリケーションをホスティングしたいので、左側のメニューにある「Hosting」をクリック。

firebaseでAngularプロジェクトをホスティングする方法の画像

するとHostingのページに移動するので、「Get started」をクリック。

firebaseでAngularプロジェクトをホスティングする方法の画像

するとコマンドを打つ指示の画面に移動したら、いったんFirebase側はおわり。

このページは開いたままで。

FirebaseCLIを使う

ここからはコマンド操作。

ターミナルでアプリのディレクトリに移動して、コマンド操作をしていく。

まずは上で示されたコマンドを打っていく。

コマンド
npm install -g firebase-tools

これはFirebaseCLI(Firebaseのコマンド)を使うためのツールたちをインストールするコマンド。

インストールしたら次にfirebaseコマンドを使っていく。

firebaseでAngularプロジェクトをホスティングする方法の画像

まずはfirebase login

firebaseでAngularプロジェクトをホスティングする方法の画像

初めてログインする場合は、Webブラウザでグーグルアカウントでのログインが必要だと思います。

無事ログインできたら、以下のような画面になるかと。

僕は以前ログインしたことがあったので何も聞かれず先に進めました。

firebaseでAngularプロジェクトをホスティングする方法の画像

次にfirebase init

firebaseでAngularプロジェクトをホスティングする方法の画像

するとFirebaseで何をしますか?的な質問が出てくるので、Hostingを選択する。

矢印キーで上下に移動して、スペースキーで選択。

選択したらEnterキーを押せばOK。

firebaseでAngularプロジェクトをホスティングする方法の画像

無事initが成功するかと思いきや、エラーが出てしまいました。

心が折れそうだったけど、調べたらどうやらログイン情報が古いみたい。

参考: HTTP Error: 401 while setting up firebase cloud functions for android project

ということでログインし直すことに。

コマンド
firebase login --reauth

ブラウザ上でグーグルアカウントのログインを行う。

firebaseでAngularプロジェクトをホスティングする方法の画像

無事ログイン成功したので再度firebase initをトライ。

firebaseでAngularプロジェクトをホスティングする方法の画像

エラーなく先に進みました。

そして質問が出てきます。

「このアプリはFirebase上のどのプロジェクトに紐付けるの?」

先ほどFirebaseで作ったプロジェクトを選択しましょう。

firebaseでAngularプロジェクトをホスティングする方法の画像

また2つほど質問が出てきます。

  • 1つ目: 何をpublic directoryとして使いたい?
  • これはdist/{プロジェクト名}と入力。後ほど解説します。

  • 2つ目: SPAとして設定する?
  • AngularのシングルページアプリケーションなのでYesです。

なんでpublic directoryをdist/{プロジェクト名}と入力したのか。
(僕の場合は、プロジェクト名が「so-portfolio-app」なのでdist/so-portfolio-appとなります。)

このpublic directoryはFirebaseにデプロイする対象のファイルの場所を示します。

この後でfirebase deployというコマンドで、Firebaseにデプロイしますが、dist/{プロジェクト名}に格納されているファイルたちをFirebaseにデプロイするよという宣言になります。

ではなぜdist/{プロジェクト名}なのかというと、Angularのビルドファイル出力先がdist/{プロジェクト名}だからです。

Angular公式ホームページに書いてあります。

firebaseでAngularプロジェクトをホスティングする方法の画像

参考 DeploymentAngular公式ホームページ

実際の設定ファイルであるangular.jsonにも書いてあります。

firebaseでAngularプロジェクトをホスティングする方法の画像

MEMO
もしAngularのビルド先を変えたら、Firebaseのpublic directoryも同じく変える必要があるということです。ビルド先を例えばbuild-okkusoに変えたら、Firebaseのpublic directoryもbuild-okkusoとすること。Firebaseのpublic directoryを変えたいときは、もう一度firebase initコマンドをうって設定しなおせばOK。

アプリケーションをビルドする

Angularはデプロイするためにビルドする必要があるので、AngularCLIでビルドします。

コマンド
ng build --prod

firebaseでAngularプロジェクトをホスティングする方法の画像

するとビルドされたファイルが作られ、dist/{プロジェクト名}に格納されます。

これが先ほどFirebaseのpublic directoryで設定した場所と同じ必要があるということです。

ビルドできたらこれでデプロイ準備完了。

Firebaseにデプロイする

デプロイ自体はめちゃくちゃ簡単。

firebaseでAngularプロジェクトをホスティングする方法の画像

コマンド
firebase deploy

このコマンドを打つだけ。

これによって、設定したFirebaseプロジェクトに対して、ビルドしたファイルがデプロイされる。

firebaseでAngularプロジェクトをホスティングする方法の画像

これでデプロイ完了したので、「Hosting URL」と書かれているURLにアクセスすると、自分のアプリが見える。

万が一見えなければコメントください。

▼Angular6だと見えない(デプロイがうまくいってない)ことがありました。
angular-firebase-eyecatchAngular 6でFirebaseにデプロイしたのにアプリが起動しない(ホスティングできない)

今後はビルドとデプロイをすればOK

これでデプロイが完了したわけだけど、これからコードの修正をしたりするはず。

コードを修正したら、ビルドしてデプロイすればOK。

つまりng build –prodしてfirebase deployすれば新しいソースコードが反映される。

では今回はこの辺で。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です