Vue.jsとfirebaseでサーバーレスを試してみる
はじめに
最近何かとよく聞くサーバレス。
firebaseで簡単にできるみたいな記事をよく見るので今回は自分でやってみる。
構成はfirebase + Vue.jsでやる。
内容としては超絶簡単なプロフィールみたいなものを作る。
TL;DR.
https://mypage-e6eae.firebaseapp.com/
前提
Nodeが入っている。
Googleアカウントがある。
firebaseの設定
まずはコンソールにアクセスしてプロジェクトを作っておく。
名前等は何でもOK。
プロジェクトを作れたらnpm install -g firebase-toolsでCLIをインストール。
インストールできたら下記手順で設定する。
$ firebase login > #ブラウザが立ち上がるので、任意のGoogleアカウントにログイン $ firebase init # ホスティングで使いたいので、Hostingにチェック ? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. ◯ 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 # deployするアプリ(今回だとVueのビルド結果)のディレクトリpublicにするか聞かれる What do you want to use as your public directory? # SPAにするか聞かれる Configure as a single-page app (rewrite all urls to /index.html)? # index.htmlあるけど、上書きするか(ファイルある場合。無いと勝手に生成される) File public/index.html already exists. Overwrite?
これで設定は問題ないはず。
Vueの設定
VueCLIで作ったプロジェクトをそのまま使う。
具体的なVueの設定は前にやったので、そちらを参照してください。
コードは一部内容をプロフィールっぽくするのとfirebaseの設定を記載。
画像みたいなアイコンをクリックするとウェブアプリにfirebaseを追加みたいなポップアップが出てくる。
// Initialize Firebaseって書いてあるconfigをmain.tsに追記する。
ビルドの出力先を変えたいのでnpm run build -- --dest publicで実行。
buildの内容はデフォルトのまま。
デプロイしてみる
firebase deployでOK。
デプロイが完了するとURLが表示されるのでそこにアクセスする。
$ firebase deploy === Deploying to 'mypage-e6eae'... i deploying hosting i hosting[mypage-e6eae]: beginning deploy... i hosting[mypage-e6eae]: found 14 files in public ✔ hosting[mypage-e6eae]: file upload complete i hosting[mypage-e6eae]: finalizing version... ✔ hosting[mypage-e6eae]: version finalized i hosting[mypage-e6eae]: releasing new version... ✔ hosting[mypage-e6eae]: release complete ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/mypage-e6eae/overview Hosting URL: https://mypage-e6eae.firebaseapp.com
まとめ
今回はVue + firebaseでサーバレスを試してみた。
firebaseが思ってたより簡単だし、無料で使えるしとっつきやすいと思った。
そのうちこのプロフィールページも充実させていこう……
