※翻訳勉強中のため、間違っている可能性があります。
https://github.com/firebase/firebase-tools/releases/tag/v7.8.1
ext command and enables it to run without a project.EADDRINUSE error (#1815).ext コマンドを修正し、プロジェクトなしで実行できるようにしました。EADDRINUSE エラーを引き起こす問題を修正しました。(#1815)Written with StackEdit.
※翻訳勉強中のため、間違っている可能性があります。
https://github.com/firebase/firebase-tools/releases/tag/v7.8.0
firebase ext:update to not perform update if the extension is already up to date.firebase init emulators command.firebase ext:updateを変更しました。firebase init emulatorsコマンドを追加しました。Written with StackEdit.
※翻訳勉強中のため、間違っている可能性があります。
https://github.com/firebase/firebase-tools/releases/tag/v7.7.0
batchGet とトランザクションがRESTで機能しないFirestore Emulatorの問題を修正しました。setIamPolicy 呼び出しを行って、それらが引き続き公開されていることを確認します。Written with StackEdit.
※翻訳勉強中のため、間違っている可能性があります。
https://github.com/firebase/firebase-tools/releases/tag/v7.6.2
\n in the --releaseNotes option of the appdistribution:distribute command (#1739).rounds=0 が受け入れられていたバグを修正しました。(#1617)appdistribution:distribute コマンドの --releaseNotes オプションで \n の使用をサポートします。(#1739)Written with StackEdit.
※翻訳勉強中のため、間違っている可能性があります。
https://github.com/firebase/firebase-tools/releases/tag/v7.6.1
ext:update.ext:update.ext:update 中に間違った updateMask が送信されていたバグを修正しました。ext:update を実行中に変更されていないパラメーターの入力を求められていたバグを修正しました。Written with StackEdit.
Firestoreからデータを取得して表示するサンプルを作成します。
Jest でテストもします。
完成したプロジェクトは以下のリポジトリになります。
https://github.com/TAC/nuxt-firestore-example
まずはFirestoreへ接続します。
Firebaseのアカウント作成などは他のサイトなどで確認して下さい。
接続情報は.env/development.jsに記載して、nuxt.config.tsで読み込むようにします。
.env/development.js
module.exports = {
apiKey: "<your apiKey>",
authDomain: "<your authDomain>",
databaseURL: "<your databaseURL>",
projectId: "<your projectId>",
storageBucket: "<your storageBucket>",
messagingSenderId: "<your api messagingSenderId>"
}
app/nuxt.config.ts
import NuxtConfiguration from '@nuxt/config'
import pkg from './package.json'
import envSet from '../.env/environment.js'
const nuxtConfig: NuxtConfiguration = {
mode: 'universal',
srcDir: 'src',
env: envSet,
...
}
設定値はprocess.env.apiKeyという形式で利用できます。
次にFirebaseと Firestore の初期設定を行うプラグインを作成します。
app/src/plugins/firebase.ts
import firebase from 'firebase/app'
if (!firebase.apps.length) {
firebase.initializeApp({
apiKey: process.env.apiKey,
authDomain: process.env.authDomain,
databaseURL: process.env.databaseURL,
projectId: process.env.projectId,
storageBucket: process.env.storageBucket,
messagingSenderId: process.env.messagingSenderId
})
}
export default firebase
ここまでは 前回のAuthenticationの実装 でやりました。
Firestore へ接続するプラグインは以下のように記述します。
app/src/plugins/firestore.ts
import firebase from '@/plugins/firebase'
import 'firebase/firestore'
const db = firebase.firestore()
export default db
ユーザのニックネームを Firestore へ保存します。
users コレクションを作成して、ドキュメントIDには Authentication の ユーザーUID を利用します。
認証データをそのまま保存していた store/models/users.ts を変更していきます。
store/models/users.ts
import {
VuexModule,
Module,
getter,
mutation,
action,
getRawActionContext
} from 'vuex-class-component'
import firebase from '@/plugins/firebase'
import db from '@/plugins/firestore'
import Users from '@/types/store/models/users'
const timestamp = firebase.firestore.FieldValue.serverTimestamp()
@Module({ namespacedPath: 'models/users/', target: 'nuxt' })
class Store extends VuexModule {
@getter user: Users = {}
get isAuthenticated() {
return !!this.user.id
}
@mutation
public SET_USER(payload: Users) {
this.user = payload
}
@mutation
public UNSET_USER() {
this.user = {}
}
@action({ mode: 'raw' })
public async set(uid: string) {
if (uid) {
const ref = db.collection('users').doc(uid)
const doc = await ref.get()
if (doc.exists) {
const data: Users = {
id: doc.id,
nickName: doc.data()!.nickName,
createdAt: doc.data()!.createdAt,
updatedAt: doc.data()!.updatedAt
}
const context = getRawActionContext(this)
context.commit('SET_USER', data)
}
}
}
@action({ mode: 'raw' })
public async unset() {
const context = getRawActionContext(this)
context.commit('UNSET_USER')
}
@action({ mode: 'raw' })
public async create(uid: string) {
if (uid) {
const ref = db.collection('users').doc(uid)
const doc = await ref.get()
if (!doc.exists) {
const nickName = ''
await ref.set({
nickName,
createdAt: timestamp,
updatedAt: timestamp
})
const data: Users = {
id: uid,
nickName
}
const context = getRawActionContext(this)
context.commit('SET_USER', data)
}
}
}
@action({ mode: 'raw' })
public async update(user: Users) {
const ref = db.collection('users').doc(user.id)
const doc = await ref.get()
if (doc.exists) {
await ref.update({
nickName: user.nickName,
updatedAt: timestamp
})
const context = getRawActionContext(this)
context.commit('SET_USER', user)
}
}
}
export default Store.ExtractVuexModule(Store)
以前は mutation しかありませんでしたが、 action を追加して、そこでユーザデータの登録・作成を行うようにしています。
認証のサインイン時の処理も修正します。
store/modules/auth.ts
@action({ mode: 'raw' })
public async signIn(provider) {
const context = getRawActionContext(this)
context.commit('models/users/UNSET_USER', null, { root: true })
await firebase
.auth()
.signInWithPopup(provider)
.then(result => {
if (result && result.user && result.additionalUserInfo) {
if (result.additionalUserInfo.isNewUser) {
// new user
context.dispatch('models/users/create', result.user.uid, {
root: true
})
} else {
// exists user
context.dispatch('models/users/set', result.user.uid, {
root: true
})
}
}
})
.catch(error => {
console.error(error)
throw error
})
}
result.additionalUserInfo.isNewUser をみて新規ユーザかどうかを判定して、users コレクションへの登録処理を実行しています。
一度認証してしまっていると上記の値が false になってしまうので、動作確認する場合は新しいアカウントか Firebase Console で認証情報を削除すると users コレクションが登録されると思います。
認証処理の時にも使った firebase-mock を使ってテストケースを作っていきます。
app/tests/store/models/users.test.js
import db from '@/plugins/firestore'
...
describe('store/models/users.ts', () => {
beforeAll(() => {
db.autoFlush()
})
beforeEach(async () => {
// mock data
user = {
nickName: 'alice',
createdAt: '2019-10-26 00:00:00',
updatedAt: '2019-10-26 00:00:00'
}
await db
.collection('users')
.doc('alice')
.set(user)
})
plugins/firestore の import を追加してます。
前回の設定で firestore の呼び出しはモックになっています。
beforeAll でFirestoreへの処理がすぐ反映されるように autoFlush() を実行しておきます。
beforeEach でモックデータを登録しています。
モックなので実際にFirestoreには登録されません。
app/tests/store/models/users.test.js
describe('actions', () => {
test('set', async () => {
await store.dispatch('models/users/set', 'alice')
expect(store.getters['models/users/user']).toMatchObject(user)
})
test('unset', async () => {
await store.dispatch('models/users/unset')
expect(store.getters['models/users/user']).toMatchObject({})
})
test('create', async () => {
await store.dispatch('models/users/create', 'bob')
const checkData = {
id: 'bob',
nickName: ''
}
expect(store.getters['models/users/user']).toMatchObject(checkData)
})
test('update', async () => {
const updateData = {
id: 'alice',
nickName: 'test'
}
await store.dispatch('models/users/update', updateData)
const data = store.getters['models/users/user']
expect(data).toMatchObject(updateData)
expect(data.updatedAt).not.toBe(user.updatedAt)
})
})
追加した action メソッドのテストを作成します。
なお、getters や mutation は動作を変えていないので、修正しなくても正常にテストを通過するはずです。
以上、簡単にですが Firestore への接続とテスト方法の紹介でした！
Written with StackEdit.
※翻訳勉強中のため、間違っている可能性があります。
https://github.com/firebase/firebase-tools/releases/tag/v7.6.0
strictTriggerValidation.Realtime Database の設定 strictTriggerValidation の管理のサポートが追加されました。refs にアクセスすると prod を指すバグを修正しました。(#1682)Written with StackEdit.
※翻訳勉強中のため、間違っている可能性があります。
https://github.com/firebase/firebase-tools/releases/tag/v7.5.0
auth.export within a scripting environment.Windows Subsystem for Linux で空きポートを見つけられなかったバグを修正しました。auth.export での無効なJSON出力を修正しました。Written with StackEdit.
※翻訳勉強中のため、間違っている可能性があります。
https://github.com/firebase/firebase-tools/releases/tag/v7.4.0
appdistribution:distribute command. Refer to the Firebase App Distribution Firebase CLI documentation for Android and iOS for more information about using the Firebase CLI to quickly distribute pre-release versions of your apps to testers.ext:* commands. Refer to the CLI documentation for more information about the available commands.appdistribution:distribute コマンドの初期リリース。Firebase CLIを使用してアプリのプレリリースバージョンをテスターにすばやく配布する方法の詳細については、Firebase App Distribution Firebase CLI documentation for Android および iOS を参照してください。ext:*コマンドの初期リリース。 使用可能なコマンドの詳細については、CLIドキュメントを参照してください。Written with StackEdit.
※翻訳勉強中のため、間違っている可能性があります。
https://github.com/firebase/firebase-tools/releases/tag/v7.3.2
auth:export results are fully flushed to the output file.update_time populated.auth:export の結果が出力ファイルに完全にフラッシュされるようにします。update_time が入力されていたFirestoreエミュレータのバグを修正しました。Written with StackEdit.
※翻訳勉強中のため、間違っている可能性があります。
https://github.com/firebase/firebase-tools/releases/tag/v7.3.1
auth:export command could export the same page of users multiple times.auth:export コマンドが同じページのユーザーを複数回エクスポートできるバグを修正しました。Written with StackEdit.
※翻訳勉強中のため、間違っている可能性があります。
https://github.com/firebase/firebase-tools/releases/tag/v7.3.0
list コマンドを非推奨としてマークします。setup:web コマンドを非推奨としてマークします。tools:migrate コマンドを非推奨としてマークします。Cloud Firestore エミュレーターのバグを修正しました。Written with StackEdit.
※翻訳勉強中のため、間違っている可能性があります。
https://github.com/firebase/firebase-tools/releases/tag/v7.2.4
Written with StackEdit.
※翻訳勉強中のため、間違っている可能性があります。
https://github.com/firebase/firebase-tools/releases/tag/v7.2.3
projects:create, projects:list, projects:addFirebase.apps:create, apps:list, apps:sdkconfig.init command to be able to create a new project.Functions エミュレーターを実行するために認証が不要になりました。projects:create, projects:list, projects:addFirebaseapps:create, apps:list, apps:sdkconfiginit コマンドを改善して、新しいプロジェクトを作成できるようにします。Written with StackEdit.
※翻訳勉強中のため、間違っている可能性があります。
https://github.com/firebase/firebase-tools/releases/tag/v7.2.2
GOOGLE_APPLICATION_CREDENTIALS environment variable into the functions emulator.GOOGLE_APPLICATION_CREDENTIALS 環境変数を Functions エミュレーターに渡すことを許可します。Functions トリガーの upsert APIをデータベースエミュレーターに追加します。upsert APIを使用して Functions トリガーを登録することにより、1つのRTDB関数のみを登録できるバグを修正しました。Written with StackEdit.
※翻訳勉強中のため、間違っている可能性があります。
https://github.com/nuxt/nuxt.js/releases/tag/v2.8.1
バグ修正
vue-renderer vue-appconsole.logcli vue-renderer vue-app console.log をオーバーライドしないようにしたcli リファクタ
typescript typescript Typescript サポートを準備するWritten with StackEdit.
以前、こちらの記事で
以下のエラーに対応するために core-js@2.6.7 を別途追加する
旨の記載をしましたが、対応が間違っていたようです。
こちらのリポジトリを修正してあります。
https://github.com/TAC/nuxt-firebase-auth-example
These dependencies were not found: friendly-errors 16:19:36
friendly-errors 16:19:36
* core-js/modules/es6.array.find in ./.nuxt/client.js friendly-errors 16:19:36
* core-js/modules/es6.array.iterator in ./.nuxt/client.js friendly-errors 16:19:36
* core-js/modules/es6.date.to-string in ./.nuxt/utils.js, ./src/helpers/cookies.ts friendly-errors 16:19:36
* core-js/modules/es6.function.name in ./.nuxt/client.js, ./src/store/models/users.ts friendly-errors 16:19:36
* core-js/modules/es6.object.assign in ./.nuxt/client.js friendly-errors 16:19:36
* core-js/modules/es6.object.keys in ./.nuxt/index.js friendly-errors 16:19:36
* core-js/modules/es6.object.to-string in ./.nuxt/router.scrollBehavior.js, ./.nuxt/components/nuxt-link.client.js and 2 others friendly-errors 16:19:36
* core-js/modules/es6.promise in ./.nuxt/client.js friendly-errors 16:19:36
* core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js friendly-errors 16:19:36
* core-js/modules/es6.regexp.match in ./.nuxt/client.js friendly-errors 16:19:36
* core-js/modules/es6.regexp.replace in ./.nuxt/store.js, ./.nuxt/components/nuxt.js friendly-errors 16:19:36
* core-js/modules/es6.regexp.search in ./.nuxt/utils.js friendly-errors 16:19:36
* core-js/modules/es6.regexp.split in ./.nuxt/store.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-build-indicator.vue?vue&type=script&lang=js&
* core-js/modules/es6.regexp.to-string in ./.nuxt/utils.js, ./src/helpers/cookies.ts friendly-errors 16:19:36
* core-js/modules/es6.string.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other friendly-errors 16:19:36
* core-js/modules/es6.string.iterator in ./.nuxt/App.js friendly-errors 16:19:36
* core-js/modules/es6.string.repeat in ./.nuxt/utils.js friendly-errors 16:19:36
* core-js/modules/es6.string.starts-with in ./.nuxt/utils.js, ./src/helpers/cookies.ts friendly-errors 16:19:36
* core-js/modules/es6.symbol in ./.nuxt/store.js, ./.nuxt/components/nuxt-link.client.js friendly-errors 16:19:36
* core-js/modules/es7.array.includes in ./.nuxt/store.js, ./.nuxt/components/nuxt-link.client.js and 1 other friendly-errors 16:19:36
* core-js/modules/es7.object.get-own-property-descriptors in ./.nuxt/utils.js friendly-errors 16:19:36
* core-js/modules/es7.promise.finally in ./.nuxt/client.js friendly-errors 16:19:36
* core-js/modules/es7.symbol.async-iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js friendly-errors 16:19:36
* core-js/modules/web.dom.iterable in ./.nuxt/App.js, ./.nuxt/components/nuxt-link.client.js
確かに core-js@2.6.7 を追加することでエラーは解消し、正常に動作するようになりますが、どうやら yarn.lock を削除して node_modules を構築し直すとエラーは解消するようでした。
バージョンアップによって依存関係が正しく変更されなかった影響のようです。
Nuxt 2.5.0 にバージョンアップしたら core-js のエラーが出るようになった
core-js problems with 2.5.0
Written with StackEdit.
「NuxtでFirebaseのAuthenticationを使った認証を行う」でつかったプロジェクトのモジュールをアップグレードした際に vuex-class-component がバージョンアップしていたことではまったので、その内容と解決方法を記録しておきます。
修正内容は以下のリポジトリに反映してあります。
https://github.com/TAC/nuxt-firebase-auth-example
「Nuxt を 2.4.0 から 2.9.2 にバージョンアップする」でやった手順をもとにバージョンアップしたところ、以下のエラーが発生するようになりました。
ERROR [Vue warn]: Error in render: "TypeError: Cannot redefine property: user"
当初はどこに問題があるのかわからなかったのですが、調べていくうちに vuex-class-component が1.6.0 から 2.0.4 へ大きくバージョンアップして、使用方法が変わっていることにたどりつきました。
さらに調べた結果、バージョンアップの影響で state に getter を付与する方法だと、上記のエラーが出るようになってしまっていたので、該当箇所は以下のように変更しました。
app/src/store/models/users.ts
- @getter user: User | null = null
+ private user: User | null = null
+ get get() {
+ return this.user
+ }
app/src/pages/index.vue
export default class extends Vue {
- @Users.Getter('user') user
+ @Users.Getter('get') user
nullやundefineを設定していた場合に出るエラーのようでした。- @getter user: User | null = null
+ @getter user: User = {}
get isAuthenticated() {
- return !!this.user
+ return !!this.user.uid
}
@mutation
public UNSET_USER() {
- this.user = null
+ this.user = {}
}
これでビルドは通ったのですが、Sign-In Google のボタンを押下したときに以下のエラーが出るようになりました。
[vuex] unknown local action type: modules/signIn, global type: modules/auth/modules/signIn
どうやらモジュールモードでのパスの設定がうまく行っていないようでした。
該当箇所を以下のように修正することで対応できました。
app/src/store/modules/auth.ts
- @action()
+ @action({ mode: 'raw' })
public async signInGoogle() {
+ const context = getRawActionContext(this)
const provider = new firebase.auth.GoogleAuthProvider()
- await this.signIn(provider)
+ await context.dispatch('signIn', provider)
}
Written with StackEdit.
※翻訳勉強中のため、間違っている可能性があります。
https://github.com/nuxt/nuxt.js/releases/tag/v2.8.0
開発者の体験
pages/ creation when default page displayedpages/ の作成に注意してください。バグ修正
vue-renderer server builder generator types babel.presetsvue-app utils serializeFunction edge casevue-renderer server builder generator types babel.presets のタイプ定義を追加vue-app utils serializeFunction エッジケースの処理機能
vue-renderer リファクタ
core require.resolve instead of Module internalsbuilder nuxtOptionsvue-app general core Module 内部の代わりに require.resolve を使用builder nuxtOptions としてテンプレートに渡しますvue-app general 事例
auth-jwt typescript (※) Vuexモジュールモードのことと思われる
雑用
ci general ci general cross-env を削除しますFUNDING.md を追加しますreadme のリンクを改善するテスト
general Written with StackEdit.
※翻訳勉強中のため、間違っている可能性があります。
https://github.com/firebase/firebase-tools/releases/tag/v7.2.1
.inspect/coverage.json route.Host headers not containing "localhost"..inspect/coverage.json ルートでエラーを提供する原因となるバグを修正しました。"localhost" を含まない Host ヘッダーのリクエストを拒否するバグを修正しました。
- Fixed bug causing Realtime Database emulator to serve errors on the
.inspect/coverage.jsonroute.
こちらの .inspect/coverage.json` route というのがよくわからなかったので調べました。
Realtime Database エミュレータ起動時に http://localhost:9000/.inspect/coverage?ns=<database_name> にアクセスするとテストレポートが生成されるようです。
その際に起きていたエラーのバグを修正したということのようでした。
Error: Unexpected server error. At /.inspect/coverage.json?ns=foo
テストレポートを生成する
Written with StackEdit.