どこにでもいるSEの備忘録

たぶん動くと思うからリリースしようぜ

Firebaseでwebアプリケーションをデプロイする

f:id:nogawanogawa:20190803224629p:plain

だんだん個人学習の成果をブログにアップするだけだと、表現が難しくなってきたので、ぼちぼち趣味で個人開発をしようかと思ってます。

とはいっても、あまり野望を大きく持ちすぎるとすぐ挫折するので、細々とやっていきたいと思います。

ざっくり概要

とりあえず、まずは動くものを公開するところからやってみたいと思います。 どうせ最初はうまくいかないんで、運用してうまくいきそうだったら、そん時ちゃんと設計しなおして作り直すスタイルで。

Firebase

全然知らなかったんですが、Firebaseは2014年にGoogleに買収され、現在はGCPのサービスとして組み込まれてます。

firebase.google.com

BaaS型のサービス、要はバックエンドの機能を提供してくれます。へえ。

Firebase事始め

Firebase

本題に入ります。今回はかんたんなWebアプリケーションをリリースしてみます。 まずはこちらの記事を参考に、アプリを公開するまでやってみます。

qiita.com

Firebaseプロジェクトの作成

何はともあれプロジェクトを作ってみます。

firebase.google.com

Googleアカウントでログインするとこんな感じの画面になるかと。。。

f:id:nogawanogawa:20190803085435p:plain:w500

「プロジェクトを作成」からプロジェクトを作成します。

f:id:nogawanogawa:20190803085740p:plain:w500

お好みでanalyticsと連携できるみたいです。

f:id:nogawanogawa:20190803085800p:plain:w500

あとは作成されるのを待つだけ。

f:id:nogawanogawa:20190803085913p:plain:w500

するとこんな感じ。

f:id:nogawanogawa:20190803090048p:plain:w500

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

f:id:nogawanogawa:20190803104709p:plain:w500

デプロイ

またfirebaseの画面に戻ってwebアプリを登録します。

f:id:nogawanogawa:20190803105319p:plain:w500

アプリの名前を入力すると、javascriptコードが出てきます。

f:id:nogawanogawa:20190803105652p:plain:w500

f:id:nogawanogawa:20190803105855p:plain:w500

これを先程のプロジェクトのindex.htmlに貼り付ければOKです。

あとは、デプロイするだけ。

firebase deploy

自分のアプリケーションを開いてみます。

firebase open hosting:site

先程の画面が出てくれば成功ですね。

f:id:nogawanogawa:20190803104709p:plain:w500

感想

こうやってリリースまで一人でできると意外と楽しいですね。 次はもうちょっと作ってみます。