Angularで作成したwebアプリをfirebaseを使ってデプロイした記録。
以前作成してローカル環境では一応完成していたルーレットアプリをfirebaseを使ってデプロイしました。
環境
動画を見ながら公式ドキュメントも参考にして作業は行いました。公式、非公式共に解説の動画や記事がとても多くて助かりました。
特に以下の動画はとても丁寧で参考になりました。ありがとうございます。
公式の動画は当然すべて英語でしたが、字幕の翻訳がしっかりしていたので英語力は必要なかったです。しかし、firebaseの機能が多岐にわたるので特定テーマに絞って解説してくれるシリーズ動画はありがたいです。
基本的には動画の手順に従い
1.npm でfirebaseをインストールする。
2.コマンドfirebase initでfirebaseに関するファイルを作る。
3.その際に、いろいろ質問に答える。
4.完成
でした。詳しくは上記の動画を含めていろんなところで詳しく解説してあります。（だいぶ端折りました、すみません。）
基本的には手順通りに行うだけで簡単でしたが、2ヵ所ほど困った点がありました。
一つは、上記手順の３で指定したファイルのindex.htmlは既に存在するが書き換えるか？と質問されるのですが、ここでうっかりyを選択してしまうとデプロイしたいものとは異なるものができてしまいます。
もう一つは、動画の手順ではreactを使っていたのですが僕がデプロイしたかったファイルはAngularだということでした。基本的な手順は変わらなかったのですが、不安ですし微妙な違いでデプロイに失敗したりもしました。
最終的にはAngularの公式ドキュメントを読んで解決しました。
次のステップとしては、今回ホスティングしたアプリケーションをfirebaseを使って進化させるか、以前作った執筆支援のangularアプリもホスティングして経験値をためるかだと思います。
ちなみに失敗が重なって仕切りなおす時は、
ng build
で生成されたファイルと
firebase init
で生成されたファイルをすべて削除してからやり直しました。奨励されている手順ではない気がしますが、うまくいきました。
Discussion