だんだん個人学習の成果をブログにアップするだけだと、表現が難しくなってきたので、ぼちぼち趣味で個人開発をしようかと思ってます。
とはいっても、あまり野望を大きく持ちすぎるとすぐ挫折するので、細々とやっていきたいと思います。
ざっくり概要
とりあえず、まずは動くものを公開するところからやってみたいと思います。 どうせ最初はうまくいかないんで、運用してうまくいきそうだったら、そん時ちゃんと設計しなおして作り直すスタイルで。
Firebase
全然知らなかったんですが、Firebaseは2014年にGoogleに買収され、現在はGCPのサービスとして組み込まれてます。
BaaS型のサービス、要はバックエンドの機能を提供してくれます。へえ。
Firebase事始め
Firebase
本題に入ります。今回はかんたんなWebアプリケーションをリリースしてみます。 まずはこちらの記事を参考に、アプリを公開するまでやってみます。
Firebaseプロジェクトの作成
何はともあれプロジェクトを作ってみます。
Googleアカウントでログインするとこんな感じの画面になるかと。。。
「プロジェクトを作成」からプロジェクトを作成します。
お好みでanalyticsと連携できるみたいです。
あとは作成されるのを待つだけ。
するとこんな感じ。
CLIのインストール
今度はローカル側の環境を作っていきます。
npm install -g firebase-tools
続いて、ログイン。
firebase login
するとこんな感じに聞かれるんで、どちらでもOK。
Allow Firebase to collect anonymous CLI usage and error reporting information?
先に進むと、ブラウザが開くので、Googleアカウントでログインします。
firebase $firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
こんな感じのが出てきました。 そうすると、プロジェクトの初期化設定を聞かれるので、使うやつをSpaceキーで選んでいきます。
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◯ Database: Deploy Firebase Realtime Database Rules ◯ Firestore: Deploy rules and create indexes for Firestore ◯ Functions: Configure and deploy Cloud Functions ◯ Hosting: Configure and deploy Firebase Hosting sites ◯ Storage: Deploy Cloud Storage security rules
とりあえずHostingを選んでみます。
その後は先程作成したプロジェクトを選択して、Enterキー連打。
? Select a default Firebase project for this directory: fir-test-28254 (firebase-test) i Using project fir-test-28254 (firebase-test)
これで準備完了しました。 ローカルで動作確認します。
firebase serve
デプロイ
またfirebaseの画面に戻ってwebアプリを登録します。
アプリの名前を入力すると、javascriptコードが出てきます。
これを先程のプロジェクトのindex.htmlに貼り付ければOKです。
あとは、デプロイするだけ。
firebase deploy
自分のアプリケーションを開いてみます。
firebase open hosting:site
先程の画面が出てくれば成功ですね。
感想
こうやってリリースまで一人でできると意外と楽しいですね。 次はもうちょっと作ってみます。
