前回の、社内プライベートポッドキャスト実現方法で、ポッドキャストサイトを静的配信しつつBasic認証をかけるというアイデアを書いた。しかし、Basic認証などなかなか使わなくなり、ネイティブでサポートしている静的ホスティングサービスも少ない。今回はCloudflare PagesのFunctions機能でリクエストをラップするミドルウェアを書けば実現できることが分かり、その方式を採用することにした。多少実装必要になるのと、認証周りを自前で書くのはあまりやりたくはないが、廉価に比較的省力で実現できるので受け入れる。 ネット上にいくつかサンプルは見つかるが、今回実装するにあたっては以下の点を留意した。 コード内に認証情報を載せない 複数ユーザーのIDとパスワードを管理できるようにする パスワードは定数時間比較してタイミング攻撃を防ぐ これらを以下のように解決することとした。 認証情報は環境変数
はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にも Web に関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！ Cloudflare Workers とは？ Cloudflare Workers とは、一言で言うと、Cloudflare のエッジで動くサーバーレスの JavaScript 実行環境のことです。 ...と言っても、これだけだとよくわからないですよね。だから、今回は初めて触る人でもわかるように、順序だててわかりやすく解説していきます。 Cloudflare Workers 理解するための道のり Cloudflare Workers を理解するためには以下の3つのキーワードを理解することが重要です。 CDN エッジコンピューティング JavaScript 実行環境 こ
概要 Cloudflare の利用を徐々に減らし、Akamai Connected Cloud へ移行しているのでそれを記録していくことにする。 移行理由 ただのアンマッチで、自分のサービス選定ミス。 自社の商用サービスが期待するレベルのサポートを得るには、Cloudflare エンタープライズプランが必須な事をわかっておらず、費用面でアンマッチになった。 サポートが必要になった状況 WebSockets · Cloudflare Network settings docs 商用環境で WebSocket を利用する場合はサポート契約が必要 サポートに問い合わせ、年 2400 ドルのビジネスプランを契約を推奨されたので契約 Cloudflare LB で WebSocket が突然切断される問題 問題の報告から 6 ヶ月以上経過しても、連絡も無く問題も継続して発生 8 ヶ月目にやっと返信が
どういうこと？/TL;DR AWS → Cloudflareに移行したら費用が99%削減できました。 対象読者 今CloudFront + S3で構築しているけど転送量に困っている人 Cloudflare R2を検討している人 (CloudFrontとCloudflareをよく間違える人) はじめに 元々、動画CDNの構築はCloudFront + S3で構築していました。 この構成の場合、課金ポイントは主に三つあります。 CloudFrontのアクセス数に対する課金: そこそこ(多量ではない) S3の保管に対する課金: 200GB程度 CloudFrontの転送量(Egress)に対しての課金: 数TB そのため、毎回イベントごとにかなり費用がかかる状態でした。 動画の数もアクセス数もそこそこではあったのですが、動画特有の転送量が非常に多い… そういった状態でした。 導入前夜 この時はち
この記事は、「HTB Development Team with Friends Advent Calendar 2023」の12月７日分の記事です。 副題は「副題：三浦さんとCloudflareとCache Eviction（と大栗さん）」です。 今年三浦さんとの付き合いといえば、Cloudflare Meet-upを1月に立ち上げてもらったことと、お仕事でも付き合いがあったことです。 肝煎りコンテンツの新作動画配信でCloudflareを採用してもらいました。 完全なる従量課金ではなく、１年間毎月新作公開をしても予算を超過しないという思い切った提案となりました。クラウドの従量課金は素晴らしい考え方であることは事実ですが、企業全体がまだデジタルに造詣が浅い場合、様々な試行錯誤とコストが連動するため、確定効果が見込めないものは承認がされないケースなどが考えられます。せっかくならデジタル領域
Google DomainsがSquarespaceに買収されるので、持っているドメインとカスタムドメインのメールアドレスをCloudflare Registrarに移管した。 Cloudflare Registrar · Cloudflare Registrar docs 基本的にはCloudflare Registrarに表示される手順でやっておけば、問題は起きなかったので、よくできてると思った。 次のような手順で順番に移管していたので、移管時のメモ。 手順 Google Domainsの移行準備 Cloudflareのname serverを使うように移行する ドメインの移管 メールの転送設定 Google Domainsの移行準備 移管する前に、Google Domainに登録しているドメインの設定を変更しておく。 それぞれONになってると移管時に問題が発生する。 DNSSECを無
この記事は以前7月に自分で書いた「Hono + htmx + Cloudflare is a new stack」という記事を一部修正し、訳したものです。 Hono + htmx + Cloudflareは新しいスタック 以前、バックエンドエンジニアだった身からすれば、Reactは複雑だと感じることがあります。さらに（私はフレームワーク開発者なのですが）フレームワーク開発者にとってはハイドレーションの仕組みを作ることは厄介です。しかし、しばしばReactを使うことになります。 Reactの優位な点の一つは「JSX」です。最初見た時、JSXは奇妙に思えました。「なんでJavaScriptの中にHTMLのタグが入っているんだ！」。しかし、一度慣れると、JSXは柔軟で、書きやすいことに気づきました。 今日はこれから、JSXをサーバーサイドのテンプレートとして使う技術スタックを紹介します。これはつ
Cloudflareは、100カ国以上、300以上の都市で事業を展開しており、12,000を超えるネットワークプロバイダーと相互接続することで、数百万人のお客様に幅広いサービスを提供しています。当社のネットワークと顧客基盤の広さは、インターネットの回復力について独自の視点を提供し、インターネットの中断による影響を観察することを可能にしています。 2023年第2四半期は、インターネットの混乱、特に政府主導のインターネットの遮断で特に忙しい時期でした。その四半期の間、短期間の混乱が数多く見られましたが、長期にわたる混乱も相当数ありました。 政府主導のインターネットの遮断に加え、また、悪天候、ケーブル損傷、停電、一般的または不特定の技術的問題、サイバー攻撃、軍事行動、およびインフラストラクチャのメンテナンスによる部分的または完全な障害も観測されました。 これまでも述べてきたように、この投稿は観測
これはなにか cloudflare スタックを使ったマイクロフロントエンドの提案。 特に service-binding を活用することで異なるサービス(ここでは cloudflare worker)から配信されるフロントエンドを統一的にSSRしつつ、開発単位を分離している。 RTT最適化のために qwik で書かれているが、SSR を意識しなければ他のライブラリを採用しても良い。 $ tree . -I node_modules . ├── README.md ├── body │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── Body.css │ │ ├── entry.ssr.tsx │ │ └── root.tsx │ ├── tsconfig.json │ ├── vite.config.t
どうも！西村祐二です。 最近、Rustを勉強しています。 Cloudflare WorkersでRustが動かせることを知ったので、Rustのプログラムを動かしてみたいと思います。 環境 今回、試した際の環境情報です。 macOS Big Sur: 11.6 rust: v1.56.0 wrangler: 1.19.4 APIキーを取得 今回、CLIからworkerを作成したりデプロイしたりするので、はじめにAPIキーを取得します。 workersのコンソール画面にAPIキー取得するためのリンクがあるのでそこから移動します。 API Tokensの「Create Token」を選択 Edit Cloudflare Workersの「Use template」を選択 今回は動作確認が目的なので必須な項目の「Account Resources」「Zone Resources」を適当に埋めて、「
Cloudflare Workersはサーバレスエッジコンピューティングサービスです。そしてデータの永続的保存オプションとして以下が用意されています。 KV : key-value型永続ストレージ R2 : AWS S3互換ストレージ Durable Objects : オブジェクトストレージ D1 : エッジで動作するSQL Liteデータベース(2023/02/05 時点でアルファ版です） Queues : ジョブのキューイング この記事ではKVを使ってJavaScriptで簡単なTodoを作ってみます。記事前半分の土台となっているのはこのブログですが、英語であり、また手順として少し初心者にハードルが高く、Cloudflareのバージョンアップにより画面イメージも変更となっているため再構成しています。 後半部分は少し難易度があがりますが、追加シナリオです。ぜひ挑戦してみてください。 な
こんにちは！株式会社マクアケでエンジニアをやっている @Jerome_1010です。フロントエンド領域を組織横断的に扱うFrontend Working Groupと、実行者やキュレーターのためのシステム開発を行うOperation Engineeringチームに所属しています。 これまで公式アカウント的な投稿が多かった本noteですが、よりtech blogらしい投稿を展開していこうということで、今回は自分が自作ブログをCloudflare Pagesでホスティングしてみて良かった点などを書いていこうと思います。 この記事を読んでわかることCloudflare Pagesの概要 実際に使ってみてわかったざっくりとしたメリデメ この記事のターゲットはこんな人Cloudflare Pagesに興味がありざっくりと知りたい人 Cloudflareの採用を検討するためにざっくりと特徴を知りたい人
イラストレーターの妻が「ポートフォリオサイト欲しい」と言い始めたので、面白そうだと思い開発を開始しました。 静的サイトなら Jamstack ってのがイイらしいと最近よく聞くものの、何かはわからないので勉強してみて、巷の Jamstack 構築環境をできる限り自分の家の中に作ってみます。 結論から言うと適材適所なのですが、皆さんもコーポレートサイトやブログなど「これって Jamstack がハマるんじゃないかな」と思える箇所があると思います。 是非、検討する材料としてこの記事をご覧ください。 Netlify 社が定義した JavaScript + API + Markup (JAM) の構成を Jamstack と呼ぶようです。 まずは Jamstack の何が嬉しいか、見ていきましょう。 従来の Web サイト 従来の構成でサーバサイドがレンダリングした Web サイトを表示するまでの
2022/12/15 追記 手順の変更 以前の記事との違いは、 Argo Tunnelという名前がなくなった cloudflaredの設定にトンネル先を入れていたが、それはCfのWebで入力したものをリアルタイムに反映するようになった。ようするに設定値はトークンだけ。 Tunnelの作成 これで自宅内LANとCfの間のVPN（のようなもの）を確立させる。 ここでインストールする cloudflared が動作していないと公開できないので注意 Cloudflare(以下Cf) のダッシュボードにログイン 左側メニューから Zero Trust をクリック 左側メニューの Access -> Tunnels をクリック 右上、Create a tunnel をクリック トンネルの名前（何でもよい）を入れて次へ cloudflared を動かすための情報が表示されるのでどれかを実行。一番楽なのは
CloudflareというCDNサービスを使いながら、WordPressを使ったサイト運営をしている方も多いのではないですか。 そんなサイトでも、WordPressを使っています。ですが、CloudflareのようなCDNは未導入。 エックスサーバーを使っていて、現状その速度に不満がないというものありますが、正直CloudflareのようなCDNにはデメリットもあり、簡単に使う気にはなれません。 特に、無料でも使えるCloudflareは、個人サイトを中心に人気を博していますが、メリットとデメリットを理解して利用しているのか疑問です。 「じゃあ、何がデメリットなの？」 ということで、Cloudflareのデメリットを中心に解説していきます。
Cloudflare、インターネット上のすべてのアプリケーションをよりプログラムしやすくする「Cloudflare for Platforms」を発表ニーズに応じてあらゆるアプリケーションを簡単にカスタマイズ・構築可能に セキュリティ、パフォーマンス、信頼性を備えたより高度なインターネットの構築を支援するCloudflare（クラウドフレア）は、本日、新たなツールスイート「Cloudflare for Platforms」を発表しました。「Cloudflare for Platforms」を使用することで、あらゆるアプリケーションをプログラム可能なプラットフォームに変換でき、開発者はその上で開発を行うことができます。つまり、「Cloudflare for Platforms」を活用すれば、eコマースソリューションからチャットアプリまで、あらゆるアプリケーションを容易に変換できるようになり、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く