しずかなインターネットの技術構成
こんなWebサービスをリリースしたので、技術的な話をまとめておこうと思います。 元々このサービスは、趣味の延長線のような感じで開発を始めました。競合にあたるnoteやはてなブログなどのサービスが確固たる地位を築いているということもあり、「お金にはならないだろうけど、自分の趣味を詰め込んだものにしよう」というゆるい気持ちで開発を続けています（楽しい）。 選定の方針 趣味と言っても文章投稿サービスなので、ユーザーが少数であったとしても長期間運営しなければなりません。そのため、ユーザー数が少なければランニングコストが数千円/月以下、ユーザー数が増えたときは段階的にコストが上がるように選定を行いました。 アプリケーション フルスタックNext.jsアプリケーションをCloud Runにデプロイしています。各APIエンドポイントはNext.jsのAPI Routesで生やしています。 Next.js
Webフロントエンド入門
まずはじめに HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ
個人開発で参考になるNext.jsリポジトリ10選
OpenStatus - ステータスページ App Router Turborepo Drizzle Clerk tRPC Tailwind shadcn/ui LLM Report - OpenAI モニタリング App Router Prisma NextAuth shadcn/ui Stripe Dub - URL 短縮 App Router Turborepo Prisma NextAuth Tailwind Stripe slug - URL 短縮 Prisma NextAuth tRPC Tailwind Cal.com - 日程調整 Turborepo Prisma NextAuth tRPC Tailwind Taxonomy - ブログ App Router Prisma NextAuth Tailwind Rowy - ローコード GUI Firebase Dorf -
ポエム特化のZenn2との噂の「しずかなインターネット」を使いはじめたので、ユーザーとしてどんな技術が使われているのかを確認していく。 sizu.me おもむろにbuiltwith.comにかけてみる。 builtwith.com ここで分かる情報はブラウザのDevTools眺めてても得られるのであまり収穫はない。 前段にCloudflareのCDNサーバーがいて Next.jsで生成されたレスポンスを返している ことがわかる。 この時点ではキャッシュのみCloudflareなのか、Pages/WorkersでNext.jsのSSRごと動かしているのかは判断できない。 認証 Set-Cookie: __Secure-next-auth.session-token=が含まれているのでNextAuth.jsを使っているのが分かる。 next-auth.js.org Emailでサインアップする
症状検索エンジン「ユビー」 では、ローンチ当初から Firebase Auth (GCP Identity Platform) を使っていましたが、OIDCに準拠した内製の認証認可基盤に移行しました。 認証認可基盤そのものは m_mizutani と nerocrux と toshi0607(退職済) が作ってくれたため、僕は移行のみを担当しました。 結果として、強制ログアウトなし・無停止でビジネス影響を出さずに、年間1000万円以上のコスト削減に成功しました[1]。その移行プロセスについて紹介します。認証認可基盤そのものの紹介はあまりしません。 移行した理由 大量の匿名アカウント ユビーでは、アクセスした全ユーザーに対して自動的に匿名アカウントを発行しています。これにより、ユーザーがアカウント登録しているかどうかに関わらず、同じID体系で透過的に履歴情報等を扱うことができます。アカウント
期限の制約なく無料で提供される「Free Tier」クラウドサービスまとめ、DBaaS/BaaS/その他編（2024年版）
期限の制約なく無料で提供される「Free Tier」クラウドサービスまとめ、DBaaS/BaaS/その他編（2024年版） いくつかのクラウドサービスでは、新規ユーザーに対する1年程度の無料トライアルや一定額のクーポンなどの提供だけでなく、期限の制約なくずっと無料で提供される、いわゆる「Free Tier」や「Always Free」と呼ばれるサービスが提供されています。 こうしたサービスは評価や一時的なテスト環境、あるいはホビー用途などに適しています。 本記事では期限の制約なく無料で提供されている主なクラウドサービスを、2024年版としてまとめました。（有料サービスの追加機能として無料で提供されているものは除外しています）。 ただしこれらの無料のサービスは、提供側の都合により一時的に申し込みや利用が制限されたり、提供が終了することがあります。提供側の都合に留意しつつ、良心的な範囲でご利用
オープンソースによるFirebase代替を名乗るBaaS（Backend as a Service）「Supabase」が正式サービス化を発表しました。 Supabaseはこれまで約4年間ベータ版としてサービスを提供してきました。現在は100万以上のデータベースをホストし、新規データベースも1日あたり2500以上増加しており、モバイルアプリケーションからエンタープライズ用途まで十分な機能と安定性、スケーラビリティが実証されたとしています。 Supabaseの主な機能はデータベースや認証、ファイルストレージなど SupabaseはBaaSとして主に以下のマネージドサービス群から構成されています。 PostgreSQLによるデータベースサービス 認証サービス ファイルストレージ エッジロケーションにおけるNode.jsDenoベースのサーバレス基盤 マルチプレイヤーゲームなどに対応するリアルタ
Google、開発者向けの無料プログラム「Google Developer Program」開始。WebIDE「Project IDX」のワークスペースを5つまでなど特典が提供
Googleは、Google CloudやFirebaseなどGoogleが提供するサービスを用いてアプリケーションを開発する開発者を支援するための無料のプログラム「Google Developer Program」の開始を発表しました。 Google Developer Programに参加することで、以下の特典が得られると説明されています。 Geminiベースの新WebIDE「Project IDX」のワークスペースに最大5つまでアクセス可能に チャットAIによるドキュメントページの解説、サンプルコードの生成、Google APIのテスト ラーニング プラットフォーム「Google Cloud Skills Boost」のインタラクティブラボクレジットを無料で利用可能。クレジットを使って実際のGoogle Cloud環境でスキルの練習ができます。 Google主催のコミュニティへの参加
Firebaseのセキュリティルールの設定を誤っていることが原因で数百のサイトが平文パスワードや機密情報を含む合計1億2500万件のレコードを公開してしまっているとセキュリティエンジニアの「Logykk」「mrbruh」「xyzeva」という3人がブログに投稿しました。 900 Sites, 125 million accounts, 1 vulnerability - env.fail https://env.fail/posts/firewreck-1/ セキュリティエンジニアの3人はChattr.aiというサービスでFirebaseの設定が間違っていることを発見しました。Chatter.aiではウェブサイト上の正規ルートで登録するとアカウントの権利が適切に制限されるものの、FirebaseのAPIを直接使用してアカウントを作成するとFirebase上のデータベース全てに対する権限が取
Firebase Authのリダイレクトログインを使っている人は今年の6月までに対応しないと大変ですよという注意喚起
公式ドキュメントに書いてあり、Firebaseからもメールなどで通知されていることではあるのですが、意外と見落としたままになっているかもしれない情報なので、啓蒙の意味も込めて記事にします。 結論 Firebase AuthのJavaScript SDKを使っている場合、今年6月までに以下のドキュメントに従った対応をしないとChrome/Edgeでリダイレクトログインが動かなくなります。 サードパーティのストレージ アクセスをブロックするブラウザで signInWithRedirect を使用する場合のベスト プラクティス 必要な対応 公式ドキュメントにある対応選択肢を、補足や注意点も含めた形で以下に焼き直してみます。 ポップアップ形式のログインでもいい場合 同一タブ内でリダイレクトしてログインする形式から、ポップアップウインドウを開いてログインする形式に切り替えましょう。 （公式ドキュメン
この記事でできるもの デモ https://react-pokemon-app-c3d8a.firebaseapp.com/ ※画像は非表示にしています ソースコード https://github.com/hato-taka/pokemon-app はじめに この記事の目的は React開発の楽しさを伝えることです！ 詳しい内部のロジックには触れていません。 楽しく学んでもらうために、PokeAPIというポケモンデータを集めたAPIを使用します。 https://pokeapi.co/ この記事を作成するにあたり下記２つの動画を参照しました。 【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座 Build Pokemon App Using React Js |Pokemon Api |2022 記事の対象者 Reactの
はじめに こんにちは！！@Sicut_studyです！ クラウド破産しかけました！ギリギリ払えるくらいやばかったです！！ 普段サービスを Firbese でデプロイしているのですが、この度自分でサービスをリリースした時に破産しそうになった話を共有していきます。 自分が使うためのサービスとみんなに利用してもらうためのサービスではこの点が大きく違うんだなとしみじみ感じたので、自分以外が使うサービスをリリースする方には参考になるかと思います 0. アラートは突然に とあるメールが自分のもとに届きました !?!??!??!??!?!!!?? やばいまだ11月始まって6日なのに予算の半分を使ってしまっただと！？！ とくにリリースなどは行っていなかったのでなぜか今月になって請求額があがるようになっていました 仕事中にメールが来たのですが、気になりすぎてまったく集中できませんでした😅😅😅😅 1.
オウンドメディア担当者が知っておきたい GA4 × BigQuery 後編（寄稿：小川卓） - はてなビジネスブログ
株式会社HAPPY ANALYTICSの小川卓（id:ryuka01）です。 今回は、全2回で Google アナリティクス4（以下「GA4」) × BigQuery に関して紹介をしていきます。 後編となる第2回は、BigQueryとGA４の連携方法や、GA4のデータをより活用するための方法についてご紹介していきます。GA4 × BigQuery を活用することで、オウンドメディアの分析や効果の可視化に大きく役立つと思いますので、ぜひ参考にしてみてください。 なお、BigQuery内でGA4データがどのように保存されているかなど、データ構造に関しては本記事で詳しく触れませんのでご理解いただければ幸いです。 BigQueryとGA4の連携方法 BigQueryのセットアップ Google Cloudのアカウントを作成 BigQueryのプロジェクトを作成する GA4からBigQueryにデ
Google I/O 2024で発表されたFirebase Data ConnectをVSCodeのエミュレーターで試してみた
執筆時点でIDXを使った記事は見かけるものの、VSCodeを使ってローカルで試している日本語記事は自分はまだ見かけていないので、おそらく日本語では初の記事なんじゃないかと思います。 少なくともZennでは自分が最初の1人でした。 Firebase Data Connectとは Google I/O 2024で発表されたFirebaseの新機能です。 これを使うことで、GraphQLを介して、Cloud SQL For PostgreSQLへアクセスしデータのCRUDが可能になるようです。 Getting Start 記事執筆時点では限定公開プレビュー版なので、利用するためには限定公開プレビューへの申し込みが必要です。 申し込みはFirebaseプロジェクトの管理画面上から可能です。 ただし申し込み後すぐに使えるわけではなく、Googleさんの方で手続きをして頂いたのちに利用可能となります。
はじめに 下の画像を見てください。これはとあるアプリの Firebase Console の App Check の Cloud Firestore のモニタリング画面です。この画面で 不正リクエストがどのくらいあるかが確認できます。 え？小さくてよくわかりませんか？もう少し拡大してみましょう。 ↓拡大してみました。不正リクエストは 2% ありました。30日間で不正リクエストは57万回あったということです！ さらに Authentication は 18% も不正リクエストがありました！ これは、どうにかしないといけない。。。ということで、最近 Firebase App Check を個人開発した Flutter アプリに導入したので、導入手順について紹介します！ コードの修正は簡単ですが、Firebase 側の設定がなかなか難解ですし、公式サイト は手順がひとつにまとまっていなくてわかり
この記事では紹介してないものも載せてます。 既に実装済みなとこは省略 簡単に説明すると、Vercel上のNext.js製のWebアプリを作り、CMSはmicroCMSを利用してAPI経由でデータ（記事）を取得・表示させたWebアプリです。今回は「いいね機能」だけにフォーカスしているのでそれ以外の実装済みの部分は割愛しています。 記事に関する処理や表示に関して 簡単に説明します microCMSを使ってAPI経由でデータを取得 主に記事の一覧ページと詳細ページがある構成 getStaticPathsとgetStaticPropsをつかってSGしてます ルーティングはDynamic Routingを用いています 参考 ディレクトリ 「いいね」機能を実装するにあたって、関連するディレクトリとファイルを以下に示します。 ディレクトリ構成の図解 . ├── src │ ├── component
「Firebase CLIのNext.jsデプロイ対応について調べる」ではCloud FunctionsにカスタムビルドしたNext.jsアプリがデプロイされていたが、Cloud Functions (2nd gen)でCloud RunベースになったのでNext.jsのデプロイもApp HostingでCloud Run版になった 基本的なデプロイまでの手順以下のドキュメントにある。本記事ではこれを参考に内部動作を調べる firebase-tools firebase-cliの最新版に以下のコマンドが追加されている ❯ firebase --help | grep apphosting: apphosting:backends:list [options] list Firebase App Hosting backends apphosting:backends:create [opt
はじめに Flutter と Firebase を使って個人でアプリ開発をするときのロードマップを紹介します。 本記事を一通り読めばアプリを公開するまでにやるべきことの大枠をイメージできるようにしました。 広く浅く紹介しているので、もし気になる内容があれば、個別に深掘りしてみてください。 個人開発にフォーカスした記事になっているとはいえ、いくつかの Flutter のお仕事を請けた私自身の経験も反映しているため、お仕事でも活用できる内容も含まれていると思います。 本記事は、ざっくり次の流れになっています。 アプリの構想と具体化 実装に入る前の準備 基本機能の実装 よりよい実装にするための Tips 開発フロー アプリの公開 収益化の話 想定読者 Flutter × Firebase を使って個人開発をしようとしているひと または、既に個人開発をしているひと Flutter を導入するか悩ん
Firebase Cloud Messagingとは Firebase Cloud Messaging（以下FCM）は、Push通知の実装やコンバージョン取得等、運用をサポートする便利なツールです。簡易的なモック開発を行う際はもちろん、通常リリースするAndroid／iOSのアプリに共通の通知機能があるものを開発する際に非常に有効活用でき、モバイルアプリ開発では「なくてはならないもの」となっています。 今回はそんな便利なFCMのPush通知の機能について記述させていただきます。 （2023年8月時点でのFirebase管理画面上では、”Messaging”として今回の主題となる「通知（Push通知）」以外に「In-App Messaging」の2つの機能がまとめられています） FCMが対応するプラットフォーム FCMはiOS、Android、さらにはブラウザへのWeb Pushなど、主要な
Flutterアプリから送信したFirebase AnalyticsのデータをBigQueryにエクスポートして解析する
はじめに こんにちは！Altive株式会社のFlutterアプリ開発者の小林遼太（@naipaka）です🦙 みなさんはアプリの利用状況を把握するためにどのような方法を使っていますか？ これまでFlutterでアプリを開発していて、Firebase Analyticsを使ってアプリの利用状況を確認することはあったのですが、 それだけだとアプリの利用状況の詳細を把握するのに不十分で、クライアントの要望に応えることができないことがありました。 Firebase Analyticsへ送信したデータをBigQueryにエクスポートして解析できるようにしたことでアプリの利用状況をより詳細に把握することができるようになったので、 今回はFlutterアプリから送信したFirebase AnalyticsのデータをBigQueryにエクスポートして解析するまでの手順をまとめました。 イベント送信 送信す
2022年夏、 我々はアプリケーションのバックエンドとして利用していたFirebaseをやめる決断をした。それは事業とソフトウェアの成長に伴いユースケースが合わなくなってきたことが主な理由だ。 これはFirebase、特にNoSQLドキュメントデータベースであるFirestoreから自分たちでRDBを使ったREST APIを開発し移行する物語。 何を考え、何を行うか、RDBとは異なるデータ構造のFirestoreのデータをどのように再設計/開発/移行するかについて愚直に語ります。 同じような悩み、課題もつ皆さんになんらかのきっかけを与える45分に。 スピーカー： 西谷 圭介 氏 (CTO, Singular Perturbations Inc） セッションに関する情報： ・想定聴講者の役割/開発対象：Web バックエンド / サーバーサイド開発 ・セッションのトピック：Web バックエ
FirebaseとSupabase FlutterFlowでどっちを使うか問題 2023年版｜ノーコードで事業開発 / SUNUP合同会社
FlutterFlowを最近使い始めた人によく聞かれる質問なので、ここで改めてプロコンを比較して個人的な推しをお伝えできればと思います。 結論：いろいろ考えたらSupabaseいいよね SUNUP合同会社はい、結論から言ってしまいました。 ご存知の通り FlutterflowではSupabaseがFirebaseと共に公式サポートされており、プラットフォーム上で統合されています。 どちらも同じBaaS（Backend as a Service）であり、Fireabaseは特にモバイルに特化しているのでmBaaS（mはmobileのM）と言われたりもしています。 なので、この記事では同じBaaSである両者をFlutterFlowを活用する前提で基本的に知っておくべき共通点と違いを比較していきたいと思います。 基本情報Firebase：2011年創業 Supabase：2020年創業 そもそも
これはなに？ こんにちは、エンジニアの冨永です！ モバイルアプリを開発していると、コード量や処理が増えることで徐々に起動時間が遅くなることがありますよね。SNKRDUNK でも一時期起動時間が遅くなっていて改善をしたことがあります。 この記事では、その改善をするために取り組んだことをまとめました。 Firebase Performance Monitoring の導入 Firebase Performance Monitoring とは Firebase Performance Monitoring サービスを使用すると、Apple アプリ、Android アプリ、ウェブアプリのパフォーマンス特性を把握できます。 Performance Monitoring SDK を使用してアプリからパフォーマンス データを収集し、Firebase コンソールでデータのレビューと分析を行います。これによ
Firebase Authenticationを用いた「やってはいけない」システム設計の話 - Xtone Design & Tech Talk
エクストーンの豊田です。先日、エクストーン社内で技術勉強会があり、そちらでFirebase Authenticationを利用してWebサービスを設計・運用した際に困った話をさせていただいたので、こちらでも紹介させていただきたいと思います。 Firebase Authentication FirebaseはGoogleが提供しているモバイル・Webアプリケーション向けのプラットフォームで、認証やストレージ、関数実行等の機能を提供します。今回はFirebaseが提供する認証サービスであるAuthenticationについてお話しします。 Firebase Authenticationはユーザーの管理や認証を行うサービスで、メールアドレス・パスワードによる認証の他に、同じユーザーに対してGoogleアカウントやApple IDを利用した認証を紐づける等が可能です。ユーザーの管理自体をFireb
Ship modern, server-rendered web apps at planet-scale, without managing any of the backend infrastructure. Full-stack Javascript frameworks like Angular and Next.js make it simpler to get the benefits of server-side rendering (improved SEO, faster initial load times) with the ease and familiarity of the tools we use to build frontends. However, because these frameworks need a server, deploying an
こんにちは！SSRを刺されと読むMizutani(@sirycity)です。CSRは腐れです。 今日はFirebaseとAstroとSSRについてです。 結論 Firebase Hosting(とFunctionsとCloud Run)ではAstroをSSRモードで動かすことができます。だが設定が本当にめんどい。 はじめに Firebase hosting(以下hosting)は静的サイトのホスティングサービスです。で、Astroは静的サイトジェネレーターです。つまりAstroで作ったWebサイトはhostingにデプロイできます。まあ当たり前ですね。 hostingのサーバーサイドレンダリング(SSR)について hostingは一部のFWについては例外的にサーバーサイドレンダリング(以下SSR)をサポートしています。サポートしてるFWは以下の通り。 FirebaseExtended/fi
概要 Firebase AuthenticationとGoogle Workspaceからのメール送信が必要なシステムで、SPFレコードを以下のように登録していた。 v=spf1 include:_spf.firebasemail.com include:_spf.google.com ~all mxtoolbox でSPFの構成をチェックしたところ、以下のような警告を発見。 Too many included lookups (11) Too many DNS Lookups? Solve this problem with SPF Flattening SPFにおけるDNSルックアップの最大回数は10回までという制限がある。 疑問 FirebaseはGoogleのサービスだからSPFのアドレスも重複しているのでは? 調査 redditにも同じような投稿があった。 It looks li
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「しずかなインターネット」の技術スタックを調べる - laiso
Firebase Authから内製認証基盤に無停止移行して年間1000万円以上削減した
オープンソースによるFirebase代替を名乗るBaaS「Supabase」が正式サービスとして提供開始
数百サイトがFirebaseのセキュリティルール設定を誤って合計1億2500万件の機密情報が公開されてしまっていた
【初学者歓迎🔰】 Reactでつくるポケモン図鑑📖 - Qiita
Next.jsをFirebaseにデプロイしたら高額請求がきて貯金がなくなりかけた話 - Qiita
【Flutter】App Check を導入して Firebase を守ろう！【2023年9月】
Next.jsとFirestoreを用いたmicroCMS記事の「いいね」機能の設計と実装
Firebase App HostingにNext.jsがデプロイされる仕組み
Flutter × Firebase ではじめる個人開発
FirebaseでPush通知を実現しよう！ Firebase Cloud Messagingを用いた通知システム
脱 Firebase. 我々はどう生きるか | AWS Dev Day 2022 Japan #AWSDevDay
モバイルアプリの起動時間の監視・改善するためにやったこと
Introducing Firebase App Hosting
Firebase HostingでAstroをSSRモードにして動かす時の設定 | JavaScriptに関するお知らせ
FirebaseのSPFレコードを登録してる場合はGoogleのSPFは不要という話 - Qiita