Googleの「Firebase Hosting」がNext.jsとAngular Universalによる動的Webサイトもサポート、コマンド一発でデプロイ。Firebase Summit 2022
Googleの「Firebase Hosting」がNext.jsとAngular Universalによる動的Webサイトもサポート、コマンド一発でデプロイ。Firebase Summit 2022 Googleは10月18日に米ニューヨークでモバイル向けのバックエンドサービスであるFirebaseにフォーカスしたイベント「Firebase Summit 2022」を開催しました。 このイベントでGoogleは、これまで静的なWebサイトのホスティングサービスだったFirebase Hostingの新機能として、Next.jsとAngular Universalを用いたサーバサイドレンダリングによる動的なWebサイトにも対応することを発表しました。 これまでFirebase HostingでNext.jsやAngular Universalのようなサーバサイドレンダリングのためのフレーム
React×Firebaseでちゃんと開発するときの環境構築手順と解説
はじめに ReactとFirebaseを用いてフロントエンド開発するにあたって、追加で入れておきたい各種パッケージや設定を組み込んだ環境構築手順です。 この記事で構築する環境は以下の通りです。 ローカルで開発した内容をGitHubにpushすると、構文チェック→テスト→ビルド→デプロイされます。 また、mainブランチにpushしたらFirebaseの本番環境にデプロイされ、developブランチにpushしたらFirebaseの開発環境にデプロイされます。 事前準備 環境構築をするにあたって、以下は事前に準備してください。 VS Codeのインストール GitHubのアカウント登録 Node.jsのインストール 今回はv16.14.0を利用します Firebaseのプロジェクト作成 GitHubリポジトリの作成 GitHubのリポジトリを作成します。 公開範囲はPublic,Privat
なるべくお金をかけずに個人アプリを運用したい - くりにっき
前々からこの手のことを書きたいとは思ってたけど id:k0kubun さんの下記エントリに触発されて書きました。 k0kubun.hatenablog.com tl;dr; 個人アプリ開発歴 前提 Heroku GCP Google App Engine Cloud Run Firebase Cloud Functions GitHub Pages 2022/8/14追記 GitLab Pages 2022/5/7 17:00追記：ブコメレス tl;dr; HerokuやFirebaseを駆使すれば割と無料でいける 若干お金を払えばもっと選択肢は増える 個人アプリ開発歴 2001～2002年あたりから個人HPでアプリを公開。後にVectorにも公開 アカウントは残ってるのでいまだにVectorからのレポートメールが毎月届いてます 2009年くらいから色々ウェブアプリを開発 Google A
【無料】オリジナルの短縮URLを作る方法【プログラミング不要】 | すずきライフ
あけましておめでとうございます！2021年もよろしくおねがいします！ 最近、bitlyでURLを短縮してプロフィールに貼っている人を拝見しました。 まず一言言わせてください。 bitly等のURL短縮化サービスを法人で使うべきではありません 短縮URLのサービスは便利だし、サービス自体に問題は全くありません。 それを見て思うことがあったので記事としてまとめたいと思います。 bitlyなどを法人で使うべきではない理由 改めて言いますが、短縮URLのサービスは便利だし、bitly等のサービス自体に問題は全くありません。 そのため『絶対に使わないで』という話ではなく、『使うべきではない』という表現をしています。 それなりに理由があるので解説していきます。 危険なサイトと見分けがつかない 簡単に思い浮かぶ理由ですが、短縮URLは危険なサイトと見分けが付きません。 クリックしないと飛ぶ場所が分からな
ネットで知り合った仲間と農家の3代目の困りごとをFirebaseで解決した話 - Qiita
はじめに ※この記事はfreee APIで業務を楽しく便利にハックしよう！アドベントカレンダー2021の6日目の記事として投稿しています。 はじめまして。今年の1月からプログラミングの勉強をしているものです。 今回は、ネットで知り合った仲間とともに（顔もフルネームも知らないもの同士で）半年間、開発を行い、農家の3代目の困りごとを解決するアプリを作った話をしたいと思います。 きっかけ 私は技術力を身につけたいと思い、今年の1月〜4月ごろまで独学で勉強を進めていました。しかし次第に写経に飽き、このままUdemyなどで写経をして学習するより実際になにか動くものを作るほうが楽しいだろうなと思うようになりました。 また、せっかくなら1人でやるより誰かと一緒に開発する方がもっと楽しいだろうなと思い、勇気を出してネットで仲間を募り、アプリのチーム開発を始めてみることにしました。 募集したメンバーのうちの
【感想】『りあクト！ Firebaseで始めるサーバーレスReact開発』： #りあクト でmBaaSへ - Rのつく財団入り口
表紙は親密度の上がった笑いあう二人。尊い…(違) 技術同人誌の『りあクト！』３部作と続編も読んだので、5作目を読みました。 今回はこれまでのReact開発の知見を活かし、BaaSあるいはmBaaSの代表格Firebaseにバックエンドをお任せし、世の中に公開していく実際のサービスをサーバーレスで開発していく本となっています。今回もまたまた本文は会話形式で読みやすいです。 表紙は親密度の上がった笑いあう二人。尊い…(違) 第1章 プロジェクトの作成と環境構築 第2章 Seed データ投入スクリプトを作る 第3章 Cloud Functions でバックエンド処理 第4章 Firestore を本気で使いこなす 第5章 React でフロントエンドを構築する 第6章 Firebase Authentication によるユーザー認証 まとめ：Firebaseを使ったサーバーレス開発がわかる本
実質無料で使える Hosting Service の比較や使い分けの紹介 2021 (Firebase Hosting, Cloudflare Pages, Vercel, Netlify, GitHub Pages, Amplify, CloudRun)
実質無料で使える Hosting Service の比較や使い分けの紹介 2021 (Firebase Hosting, Cloudflare Pages, Vercel, Netlify, GitHub Pages, Amplify, CloudRun)2021-10-04 ホスティングサービスに何を使えばいいのか分からないという話はよく目にしますし、僕もたまに思います。 そこでこれまで自分が使ったサービスの特徴や for me, not for me な点を紹介します。 静的ページ、および NextJS を前提としたサービス選定で、Firebase Hosting, Cloudflare Pages, Vercel, Netlify, GitHub Pages, Amplify, CloudRun を紹介します。 また、それらはフリープラン前提の話であり、not for me な点は課
あなたのプロダクトにも脆弱性が!? Flatt Securityが「Firebase」のセキュリティを重要視するワケ
バックエンドの構築を最短化することができることで有名な、GoogleのFirebase。 煩わしいサーバーの構築をスキップし、目的のウェブアプリケーションやモバイルアプリケーションを構築できるmBaaS（mobile Backend as a Service）と呼ばれる類のクラウドプラットフォームです。 しかし、その便利さの陰で見逃されがちなのが、セキュリティ。 手軽な開発を進められるその裏で、世に生み出されたプロダクトにはFirebase特有の脆弱性が大量に潜んでいることをご存知でしょうか？ 今回はFirebaseにまつわる脆弱性や、Firebaseを用いるうえで実際に気を付けるべきセキュリティについて、Flatt Securityにて執行役員を務める豊田恵二郎さん、セキュリティエンジニアの梅内翼さん・ぴざきゃっとさんの3名へお話を伺いました。
5000万件越えのRDS大量データをFirestoreに移行する勘所 - ANDPAD Tech Blog
はじめまして、開発部の@taikishiinoです。 2020年3月にアンドパッドにジョインし、約一年が経ちました。 現在、チャットサービスの開発・運用をするチームに所属しており、その中で最近、RDSからFirestoreへのデータ移行を行いました。 本記事では、その際の課題やそれに対して実際に行ったことなどを中心にご紹介していきます。 データ移行の背景 僕たちのチャットサービスを開発するチームでは、現在、プロダクトのデータベースをRDSとFirebase RealtimeDatabaseのミックスからFirestoreに移行する大規模プロジェクトが行われています。 旧環境「RDSとFirebase RealtimeDatabase」の課題として、 チャットのアクセスを処理しているAPIサーバーのバックグラウンド処理は複数プロダクト共通で利用しており、チャット起因で負荷が高まってしまうとい
Firebaseでお手軽！データ管理画面をつくる | フューチャー技術ブログ
はじめにこんにちは！ 2017年9月入社の柏木です。夏休み自由研究連載13日目の記事です！ 🏖️ 昨日は【入門】私を苦しめたDynamoDBという読み応えたっぷりの記事でした。 今回は、Firebaseを使って画面を開発してみようと思います。 本記事のゴール下記を最短経路で作ってみます。 システムアドミンの人が使うようなマスタデータ管理画面を想定して、限られたユーザーにアクセスを制限すべく、認証機能も入れました。 Typescript×Reactのアプリを立ち上げる Firebaseのデータベース（Firestore）にデータを用意する Firebase Hostingを用いてデプロイする Firestoreに格納されているデータを画面に表示する Firebase Authenticationで認証する 環境 macOS Catalina (v10.15.6) Node.js (v14.
サーバーレスな Headless CMS を自作して始める Jamstack - 病みつきエンジニアブログ
この記事は Jamstack Advent Calendar 2020 の 23 日目の記事です。 Jamstack なサイトのアーキテクチャ Jamstack の厳密な定義などは一旦置いといて、今回は、次のような構成のサイトについて考えます。あまりわかりやすい図ではないかと思うのですが、上段は非同期アクセス、下段はエンドユーザー(閲覧者)からのリアルタイムアクセスです。 Jamstack構成図 この構成はざっくりいうと、 データは「Headless CMS」と呼ばれる CMS で管理されており、エンドユーザーには見えない エンドユーザーは静的な HTML のみを閲覧する *1 なんらかの方法で、「静的な HTML」は非同期に動的更新される (Webhook や Incremental Static Regeneration など) といった特徴があります。Django や Rails な
【React+TypeScript】Netflixのクローンを作るチュートリアル
このチュートリアルではNetflixクローンを作る過程で、React・TypeScriptの基礎やAPIを利用したWebサービス開発について学んでいきます。 【学べる事】 - Reactの関数コンポーネントとTypeScriptの基礎理解 - React Hooksによるstate管理 - Reactでの外部APIとの連携方法 - Postmanを使ったAPIテストの方法 - コンポーネント分割の考え方 - Tailwind CSSの基礎理解 - Vercelを使ったデプロイ方法 【余談】 また直接、プロダクトコードには関連しないですが、余談として以下の解説も行なっています。 - APIとは？ - HTTPステータスコードのついて - ReactフレームワークとReact環境の選択肢 - .envについて - 非同期処理について - スプレッド構文とは？ - 三項演算子 VS 条件式(if
2020年の個人的Firebaseのまとめ
（この記事はFirebase アドベントカレンダー 2020の記事です） もうアドベントカレンダーの季節かーって感じですね。もともと引きこもるのが好きだったのが、引きこもる大義名分を得た年だったのでずっと家にいて季節感がなかった年でした。 そんなことは関係なく、2020年もFirebaseは進化していたのアップデート内容を個人的興味があったものまとめていきます。 Emulator Suite UI Emulator SuiteはローカルやCI/CDでFirebaseの機能をテストできるツールです。Emulator Suiteが出るまでは本物のFirebaseプロジェクトを利用する必要がありましたが、Emulatorの登場で複数人開発やCIでのテストもやりやすくなりました。 5月のリリースでEmulator SuiteにUIが付きより視覚的にローカルでのテストがしやすくなり、Firebase
Firebase公式のGitHubとHostingのインテグレーションが熱い🔥
ウェブコンテンツをホスティングする際に Firebase Hosting という大変便利なサービスがあります。 2020/10/8にGitHub ActionsとFirebase Hostingの統合が強化され、より便利に利用できるようになったのでご紹介します。 なお、公式のドキュメントは以下となります。 現時点では機械翻訳のため、言語をEnglishにして読んだほうが正確です。 GitHubプルリクエストを介してライブチャンネルとプレビューチャンネルにデプロイする できるようになったこと できるようになったことは主に以下の3つです。 GitHub ActionsでPull requestを作成時に、プレビューサイトをデプロイできる GitHub ActionsでPull requestをマージ時に、本番サイトにデプロイできる Firebase CLIツールのコマンドでGitHub Act
ちょっとでもセキュリティに自信がないなら、 Firebase Authentication を検討しよう
note のやらかしのあのへんについて。 認証自作、 Rails 、 Devise - Diary パーフェクト Rails 著者が解説する devise の現代的なユーザー認証のモデル構成について - joker1007’s diary 認証サーバーの実装は本質的に難しいです。セキュリティが絡むものは「簡単な実装」などなく、プロアマ個人法人問わず、個人情報を守るという点で、同じ水準を要求されます。悪意あるハッカーは常にカモを探していて、もし認証が破られた場合、自分だけではなく大多数に迷惑が掛かります。初心者だから免責されるといったこともありません。全員が同じ土俵に立たされています。 とはいえ、認証基盤を作らないといろんなサービスが成立しません。そういうときにどうするか。 Firebase Authentication で、タイトルの件なんですが、 Firebase Authenticat
Firebaseの存在をフロントエンドから隠蔽するために
「Firebase は安いし楽だしマジ最高」という一心で技術選定してしまったプロダクトが成功して見えてきた課題、割高なコスト・権限管理・カスタマイズ性、そして （特性やスキルセット的に）RDB 製品が適していたのに無理やり Firestore を採用したことによるデータ不整合。 その結果チーム内で Firebase を抜ける機運が高まるも、Firebase べっとりなアプリケーションすぎて移行しづらいといった問題に出会うかもしれません。 そのような場合に備え、Firebase の存在を隠蔽して開発することに挑戦してみましょう。 注意: Firebase を剥がしているときに「俺、次は絶対そうするわ」と感じたものを書いているだけであり、まだ実際にはこのパターンでプロダクション導入していません。 あくまで個人開発で試してみていけそうと思ったので、提案しますという体です。 また Firebase
フロントエンドエンジニアのためのFirebaseサーバーレス開発徹底解説
「チャリティカンファレンス沖縄2020 Vol.1 フロントエンド」での登壇資料です。 これまで様々な開発案件でFirebaseを用いたサーバーレス開発を実践してきた経験をもとに、以下のポイントを徹底解説します。 ・Firebaseで何ができるのか？ ・Firebaseで簡単ユーザー認証。 …
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React + Firebase入門
Build A CRUD To-Do App With Authentication Using Vue JS & Firebase
shiodaifuku.io
