‘JavaScript’ カテゴリーのアーカイブ
Firebase Genkitを試してみた
Firebase Genkit は、本番環境に対応した AI 搭載アプリの構築、デプロイ、モニタリングに役立つオープンソース フレームワークです。
今回、以下を試してみます。
- ブラウザからFirebase Functionを呼び出し実行
- Firebase Local Emulator Suiteを使ってローカルで開発
- Cloud Firestore vector storeを使ってRAG（Retrieval Augmented Generation）のインデックス作成と検索を行う
- モデルにGoogle AIのGemini ProとOpenAIのGPT-4oを使う
Framework7 Vue を調査する
- 2022/04/04
- murave
- Framework7
- Vue.js
以前の記事『Framework7のrouter.backで戻っても最新データに更新したい』でいろいろと調べてたときの手法をまとめてみるなど。
情報収集からデバッグ手法まで雑多なので曖昧な「調査する」というタイトルにしてみました。
そうそう、せっかくなので本家(https://framework7.io/)のスポンサーのところをキャプチャして貼っときますね。弊社が載ってます。
この記事にもスポンサーが更新されてない日本語サイト(https://framework7.jp/)しかでてこなかったりしますし、少しは主張を。
Framework7のrouter.backで戻っても最新データに更新したい
- 2022/03/31
- murave
- Framework7
- Vue.js
Nuxt.js 開発サーバーでのSSEがランダムポートになって困ってた
説明しよう！
- Nuxt.js で開発やってると開発サーバーを使うでしょ？
- プログラム修正したら自動的にビルドしてくれて素敵！
- そして画面を自動リロードしてくれて親切！
なんです。
ところで、Nuxt Screens Module(https://github.com/nuxt/screens)がローディング表示のためにSSE(Server-Sent Events)を使ってまして、最近、使用するポートがランダムになりました。
この変更は開発中のパフォーマンス問題への対策らしいです。良いことです。
しかし特定ポートをフォーワードして開発している人なんかは困ったことになります。
僕とか。
(さらに…)
CORSに@nuxtjs/proxy
Nuxt.js でspaの開発やってたら普通は開発サーバーを使いますよね。
例えばyarnをパッケージマネージャーに採用している場合だと
$ yarn run dev
yarn run v1.21.1
$ nuxt
╭───────────────────────────────────────────────╮
│ │
│ Nuxt.js v2.12.2 │
│ Running in development mode (spa) │
│ │
│ Listening on: http://127.0.0.1:3000/ │
│ │
╰───────────────────────────────────────────────╯
ℹ Preparing project for development 13:54:32
ℹ Initial build may take a while 13:54:32
✔ Builder initialized 13:54:32
✔ Nuxt files generated 13:54:32
✔ Client
Compiled successfully in 25.76s
ℹ Waiting for file changes 13:55:00
ℹ Memory usage: 241 MB (RSS: 451 MB) 13:55:00
ℹ Listening on: http://127.0.0.1:3000/
といった感じ。通常だとポートは3000になります。
サーバー側APIは別のポートで提供することになるので別オリジンになり、そのままだと開発中にAPIアクセスができません。
Firebase Cloud Functions のNode.js 10更新、わたしの場合
2020年5月某日、
「Node.js 8のFunctionは来年3/15には止まるから10にしてね。あと、10は無料プランじゃ使えないからそこんとこヨロシク」(要約)
というメールがGoogleさんから来ました。
詳しくはその内容を整理してくださってるステキな記事をどうぞ。
【Firebase】Cloud Functionsが従量課金プランでしか使えなくなるらしい
(https://qiita.com/azukiazusa/items/edd6ca9cba2d48c4c3e2)
1年くらい前(2019年3月末)にリリースしたシステムが該当しており放置すると来年の3月には死。
あの時はまだNode.js 8すらベータ版だったやんか。1年でこんなことになるとは…
FirestoreのServerTimestampさん
有能！
サーバー側で採時するので集計対象の抽出などに安心して使用できます。
これのおかげで必要なデータ取得数を大幅に削減できています。
Firestoreだとデータ取得数は速度や効率だけでなく課金に直結しますしね。
管理画面でデータを時系列に並べたりするのにも便利なのでドキュメント登録時には必ず入れておいたほうが良いくらいの有能さです。
Webでは
import firebase from '~/plugins/firebase'
payload.createdAt = firebase.firestore.FieldValue.serverTimestamp()
await db.collection('コレクション名').add(payload)
Firestoreのセキュリティルールのこと
バックエンドをFirebaseでSPAのシステムを作る場合、データを守る砦はデータベース(今回はFirestore)のセキュリティルールです。
Authenticationのログイン情報とFirestore上のユーザー情報を紐付けし権限によりドキュメントへのアクセスを制限するなど、適切な設定しなければなりません。
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth != null;
}
}
}
これは「ログインしているユーザーはフルアクセス」という最低限設定しておくべきルールです。開発中はお世話になりました。
しかし最終的にはもっとこまかく制限をかける必要がありますから、それを前提にデータ構造を設計しておいたほうが良いです。
例として今回作ったシステムのデータ構造とセキュリティルールの一部について解説します。
Nuxt.js 悩み解決の小ネタ集
ここ1ヶ月程Nuxt.js + FirebaseでSPAのシステムを作っていました。
短期構築がご要望でリアルタイム性が求められる内容。Firebaseに向いていると判断、提案したところ技術構成は自由にやらせていただけることになりました。
別件で一昨年末あたりからずっとバックエンドはLaravel、フロントエンドは素のVue.js + Vuex + Vue Routerで開発やってるんですが、PWA化したほうがよさそうだったこともあってNuxt.js(以降Nuxt)使ってみようかなってことで採用。
Nuxt、便利ですね。特にプラグインとミドルウェアが素敵！
Firebase(今回使用したのはAuthentication、Firestore、Hosting、Functions)との相性もバッチリでした。
ですが初めてということもありいろいろと悩んだりもするわけで…
それらをどう解決したか？の小ネタ集です(というか今回の落とし所、かな)
