Next.jsでFirebase Local Emulatorを使う
Firebase Local Emulator Suiteを使うとローカルでFirestoreやAuthが使えるようになる。 公式ドキュメントのサンプルだと location.hostname の値を元に useEmulator の切り替えを行っていたが、よりシンプルにして NEXT_PUBLIC_USE_FIREBASE_EMULATOR 環境変数がtrueの場合はEmulatorを利用するようにした。 lib/firebaseHelpers.tsimport 'firebase/firestore' import firebase from 'firebase/app' const isEmulator = () => { const useEmulator = process.env.NEXT_PUBLIC_USE_FIREBASE_EMULATOR return !!(useEmu
[Firebase] Functionsで環境変数を参照/設定する - ねこの足跡R
Firebaseでの「環境変数」は、OSなどから提供される情報が得られる物と、Firebaseが独自に提供する2種類の機能があります。前者が他の環境でも一般的に環境変数と呼ばれる物ですね。 ここではそれぞれの利用方法を見ていきます。 Firebaseの独自機能 CLIで設定する Functionsで利用する ローカルのテストで利用したい 一般的な意味での環境変数 環境変数を参照する 環境変数を追加する 環境変数を一覧表示 実際の内容 おまけ 参考ページ Firebaseの独自機能 独自の環境変数を新たに設定したくなったら、原則こちらを利用します。Firebaseがこの領域にデータを保存することはないので何か重要な情報を上書きしてしまうことがなく安全です。システム全体で利用できるグローバル変数のように扱うことができます。 CLIで設定する 値はCLIからセットします。当初firebase.j
![[Firebase] Functionsで環境変数を参照/設定する - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/49f8de2b8114320689d83ce0edcf30a00acf07ad/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F820878482973262145%2F6801883189061407422%2F1701429863)
Cloud Functions for Firebaseの利用で、異様にGCPのStorageが消費されると思ったら..
知っている人には当たり前の知識かもですが、地味に不安だったことなのでメモ。 起こったこと Firebase でアプリを作っていたら、なぜか Storage のリソースが異様に消費されてることに気がつきました。 このプロジェクト自体は Cloud Functions for Firebase をメインに使っていて、Storage 自体にはほぼファイルはありませんでした。 しかし、上記画像の通り異様にアクセスされています。 さらに GCP で Storage をみると見覚えのないファイルが大量に！ なぜ...🤔 原因 原因は Cloud Functions for Firebase のデプロイ時に自動保存されるソースコードでした。 Cloud Functions for Firebase のデプロイは以下手順で行われるようです。 関数のソースコードを含むアーカイブを Cloud Storag
ちょっとでもセキュリティに自信がないなら、 Firebase Authentication を検討しよう
note のやらかしのあのへんについて。 認証自作、 Rails 、 Devise - Diary パーフェクト Rails 著者が解説する devise の現代的なユーザー認証のモデル構成について - joker1007’s diary 認証サーバーの実装は本質的に難しいです。セキュリティが絡むものは「簡単な実装」などなく、プロアマ個人法人問わず、個人情報を守るという点で、同じ水準を要求されます。悪意あるハッカーは常にカモを探していて、もし認証が破られた場合、自分だけではなく大多数に迷惑が掛かります。初心者だから免責されるといったこともありません。全員が同じ土俵に立たされています。 とはいえ、認証基盤を作らないといろんなサービスが成立しません。そういうときにどうするか。 Firebase Authentication で、タイトルの件なんですが、 Firebase Authenticat
VueとFirebaseの基本機能全部使ってぬるぬる動くポートフォリオサイトを作ったのでソースと解説 - Qiita
絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね？」と危機を感じたので0から作り直しました。 サイト： https://pf.nekobooks.com/ ソース： https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか
Firebase と Nuxt.js で個人ブログを作った話 - Mobile Factory Tech Blog
こんにちは、 2018年モバイルファクトリーアドベントカレンダー 12/7担当の id:yunagi_n です。 はじめに 個人的な趣味で、 Firebase と Nuxt.js でブログを作っています。 そのことについて、いろいろ話します。 なお、会社で開発しているアプリ・プロジェクトとは一切関係ありません。 前提 以下の環境で開発、動作確認を行っています。 Firebase (Blaze プラン) Node.js 8.12.0 Windows Subsystem for Linux (WSL) Ubuntu 16.04 Nuxt.js 2.3.4 TypeScript 3.2.1 Firebase と Nuxt.js のプロジェクトは作成済み 本題のその前に なぜ nuxt generate で生成した静的ファイルを使わないのか、についてです。 あくまで個人的な思いなのですが、 記事を
真のフロントエンドエンジニアになるために、まずはNuxt.js + Firebaseを使って簡易メモ帳を作ってみた - LiBz Tech Blog
目次 目次 はじめに 前提条件 Nuxtってなに？ Nuxtの主な機能 Nuxt.jsやってみる Nuxt.jsのインストール Nuxt.jsでアプリ作成 nuxt.config.jsによる設定いろいろ Nuxtの構成 Nuxtでアプリ実行 ポート(3000の部分)を変更したい場合 アプリの説明/解説 レイアウト・コンポーネントの作成 レイアウト(layouts) ページ(pages) コンポーネント(components) データの扱い/保存 firebase firebaseでdatabase作成 firebaseで認証設定 store(Vuex) デバッグ ビルド herokuにデプロイ やってみて はじめに こんにちは! 11月にLiBに入社したアベと申します。 アラサー子持ちのエンジニア(エンジニアと名乗るのは憚れる...)です。 社会人3年目からWebの世界へ転身し、webデザ
【Firebase】Vue.jsで作ったWebアプリを公開する方法を解説【初心者向け】
誰向けの内容か？ この記事は下記のような悩みがある方に向けた内容となっています。 もし該当するものがあれば、ぜひFirebaseを試してみてください。 「制作したポートフォリオをできるだけ簡単に公開したい」 「Vue.jsやReactを使ってWebサービスを作りたいけれど、バックエンドは苦手なので避けたい」 「フロントエンドの勉強で何か作りたいけれど、バックエンドの実装に時間を掛けたくない」 Firebaseのメリット Firebaseは”mBaaS”(mobile Backend as a Service)、または”BaaS”(Backend as a Service)と呼ばれるサービスです。 Backendとあるように、Firebaseはバックエンド（サーバサイド）の機能を提供しています。 Firebaseを使うと、バックエンド機能をある程度まかなうことができるようになります。 サーバ
昔懐かしいインターネットの風物詩を最近の技術で作る話 - makoラボ
先日開催された、合同勉強会 in 大都会岡山 -2018 Summer-で「昔懐かしいインターネットの風物詩を最近の技術で作る話」というネタで登壇して来ました。 gbdaitokai.connpass.com 当日の様子はtogetterにまとまっているので見ていただければと。 togetter.com このイベントが立ち上がった時に話すネタが無いかなと思って考えていたところ、丁度その頃に社内の音楽サークルのサイトを作っていて、それが話のネタになるんじゃ無いかと思って登壇を申し込みました。 teijigo-beer-ti.me 昔懐かしいインターネットの風物詩を最近の技術で作る話 定時後ビールタイムというサークル名なので、サイトの雰囲気を「定時後におっさんたちがビール飲んで昔を懐かしみながら作ったサイト」という設定にしました。 昔懐かしいって何だろうと考えた時に思いついた物をひたすらに
Firebase でバックエンドエンジニアがいらなくなるは正しくない - Diary
Firebase でバックエンドエンジニアがいらなくなるは正しくない と思っている。 用語定義が曖昧だが、「バックエンドエンジニア」という言葉でなんとなく想像されるものとしては、 Rails とか Laravel とかでデータベースに CRUD する Web アプリケーションを書ける人を指すと思う。違いますかね。そんなに違ってないと思うが。 Firebase でこれらの知識をもつ人が不要か?というとある程度の規模、機能を持つアプリを作ろうと思うとこれは必須になる。 Firebase のデータベースは機能が少なく(とはいえ Firestore はわりと「これで十分じゃん」ではあるが)、なにか複雑なことをしようとすると、すぐに Cloud Functions という機能に頼ることになる。 Cloud Functions はようするに Firebase の Lambda + API Gatewa
🔥Firebase - みずぴー日記
夏休みなのでFirebaseの練習をした。 ライブフォトをシェアするSNSのプロトタイプを作った。ライブフォト好きだけど、他の人に共有しづらくて困っている。 📝参考にしたもの 基本的にFirebase Guidesを読んで作った。 これでだいたい分かるので、すごい。 ただ、Apple Developer Portalの設定が必要な箇所になると急に説明が雑になるので、そこは茅場町モバイルアプリもくもく会で教えてもらった。 🔥開発の様子: Firebase ログイン Firebase Authenticationを使うと、あっさりGoogleアカウントログインが作れる。便利。 Firestore Firestoreでプロフィール情報を保存するようにした。 コンソールからデータが確認できて便利。 データの保存にはCodableFirebaseが便利だった。 Codable な構造体を型安全に
サーバーサイドエンジニアによる完全無料SSPA30分クッキング - Qiita
はじめに 長い間サーバーサイド専属エンジニアをしていたので、フロント復帰の意思表示として Vue.js & ReactiveX & element-ui & Firebase で 完全無料サーバーレスシングルページアプリケーションを作成してみました。 最近ダイエット中なので、日々食べたものを登録していくアプリケーションにしてみようと思います。 フロントご無沙汰サーバーサイドエンジニアにどこまでできるのか・・・ Vue.js環境作成 vue-cliでプロジェクトの作成を行います。 # vue-cliのインストール yarn global add @vue/cli # project作成 # 1. manualを選択 # 2. javascriptを選択 # 3. In package.jsonを選択 # 4. Use Yarnを選択 vue create sample # projectの起
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
