Web 技術解体新書 第二章 Cache 解体新書 Cache は Web に限らずシステム設計における最も難しいトピックの 1 つだ。 本章では、 Web における Caching の概念を `Cache-Control` だけでなく関連するあらゆる仕様の側面から解説する。 仕様は 2022/06 に公開された RFC 9111 および関連最新仕様に対応済み。 概要等は Chapter 01 [無料公開] に記載
Googleが検索結果から、キャッシュされたページへのリンクを削除しました。 検索結果からキャッシュへのリンクがなくなっている 数日前から削除されていると指摘 Google検索ではこれまで、検索結果にキャッシュへのリンクが添えられていました。キャッシュされたページは、当該ページが見られない場合や、当該ページの古いバージョンを見たい場合に利用されていました。 数日前から、検索結果からキャッシュへのリンクがなくなっていると一部で指摘されていました。Googleは公式X(Twitter)アカウントで、ユーザーから「検索結果からキャッシュのリンクはなくなったのか」との問い合わせに、「削除されました」と回答。 「悲しいことです。Googleの最古の機能の1つでした。しかし、キャッシュのリンクはページを表示できないことが多かったときに、ページにアクセスするのを助けるためのものでした。今では大幅に改善さ
PHP 7.0のリリースから約5年が経過し、そろそろPHP 8.0のリリースも見えてきました。人によっては使い始めて5年目になるはずのPHP 7.xですが、いまだに新しい発見があったりして面白いですね。 本稿ではPHP 7.0から入った定数配列に関する性能改善について紹介します。 PHP 5時代は配列の組み立てコストが大きかった プログラミング上のテクニックとして、辞書データを連想配列としてプログラム中に記述し、これを必要に応じて使うというものがあります。たとえば次のコード例を見てみましょう。このような連想配列を持っておけば、プログラム中で国名コードをを扱う際に実在するかをチェックしたり、国名の日本語表記に変換したりといった処理ができるわけです。 <?php $country_name = [ 'jp' => '日本', 'us' => 'アメリカ合衆国', 'ru' => 'ロシア連邦'
JavaScriptには、import * as という構文があります。これは、インポート先のモジュールの中身全部をオブジェクト(モジュール名前空間オブジェクト)として取得できる構文です。 import * as mod from "./some-module"; console.log(mod.foo, mod.bar); たまに、「この構文を使うとTree Shakingが効かなくなる」といった説明が見られることがありますが、必ずしもそうではありません。そこで、この記事ではimport * as構文とパフォーマンス最適化に関連する正しい知識と、その背景をご紹介します。 webpackで検証してみよう Tree shakingを行うのはモジュールバンドラであることが知られています。そこで、webpackを使って色々と構文を検証してみましょう。今回は次のような設定を用います。これは最適化を
MemoryDB はElastiCache の約1.5倍、Aurora の約1.2倍と若干高価です。 耐久性を重視するMemoryDBはElastiCacheで言うところの「クラスターモード」しか存在しないため、{シャード数} x {ノード数/シャード} x {インスタンス利用費} 分の利用費が発生する点にもご注意ください。 最後に Redisを永続的なデータストアとしても使える Amazon MemoryDB for Redis が爆誕しました。 データ耐久性のトレードオフとして書き込み速度は低下したものの、読み取りの速さはまさにRedisです。 クライアントはRedisコマンドを投げるだけで、MemoryDBが良しなにやってくれるため、使い勝手が良さそうです。 今後はDynamodB+DAXの代替として検討したり、RDB+キャッシュRedisなシステムを MemoryDB に集約すると
この記事では、Web アプリケーションにおけるデータ取得(データフェッチング)やレンダリングに関する各手法について比較・整理することを目的として、特に最近注目度が高まっている Next.js における SSG(静的サイト生成)や ISR(インクリメンタル静的再生成)、それ以外の手法(SSR、CSR 等)を具体的なテーマとしてお話しします。 Twitter もやっているのでよかったらフォローおねがいします! @_thesugar_ 記事内の解説は正確性を期すよう注意を払っておりますが、誤っている部分などがございましたらコメント欄や Twitter 等でご指摘ください はじめに Web アプリケーションを作るとき、レスポンスの速さをはじめとしたパフォーマンスの問題は開発者にとって大きな関心事となります。 たとえば、最近では Google が Core Web Vitals という Web のパ
S3 is a Key-Value store Amazon S3 は、一意のキー値を使用して、必要な数のオブジェクトを保存できるオブジェクトストアです。 Amazon S3 オブジェクトの概要 - Amazon Simple Storage Service Amazon S3の基礎技術は、単純なKVS(Key-Value型データストア)でしかありません。 Amazon S3における「フォルダ」という幻想をぶち壊し、その実体を明らかにする | DevelopersIO Amazon S3の実体はKey-Value storeという事実は、既にご存知の方々にとっては何を今更というようなことではありますが、それでも初めて聞くときには驚かされたものです。 さて、Key-Value storeと聞いて一般的に馴染みが深いのはRedisでしょう。そして、RailsにおけるRedisの役割としてCac
繰り返しますが、正確な図はプロセッサモデルによって異なります。ここでは見積もりのため、以下の目安で考えます。メインメモリのアクセスに60ns(ナノ秒)かかり、L1キャッシュへのアクセス速度はその約50倍高速だとします。 さて、プロセッサの世界には「参照の局所性(locality of reference)」と呼ばれる重要な概念があります。プロセッサがメモリ上の特定の場所にアクセスするとき、以下のように予測を立てます。 近い将来、メモリ上の同じ場所にアクセスする可能性が非常に高い これは「時間的局所性(temporal locality)の法則」です 近い将来、メモリ上のその場所からごく近い場所にアクセスする可能性が非常に高い これは「空間的局所性(spatial locality)の法則」です CPUにキャッシュが存在する理由のひとつが、この時間的局所性です。では空間的局所性を高めるにはど
Rustコードのコンパイルが遅いことは誰でも知っています。しかし筆者は、世の中のほとんどのRustコードはコンパイルをもっと速くできると強く感じています。 例えば、つい最近の記事にこのように書かれていました。 一方、Rustでは、プロジェクトやCIサーバーの性能にもよりますが、 CIパイプラインの実行に15~45分かかります。 これは筆者には理解できません。GitHub Actions上にあるrust-analyzerのCIの所要時間は8分です。しかも、これは100万行の依存関係に加え、20万行の独自コードが記述されたとても大規模で複雑なプロジェクトでの話です。 確かに、Rustは根本的な部分で非常にコンパイルが遅いのは間違いありません。Rustはジェネリクスのジレンマにおいて「遅いコンパイラ」を選び、全体的な設計思想としてコンパイル時間よりもランタイムを優先しています(この点に関する優れ
next.js 9.4 に Incremental Static Regeneration という実験的な新機能があります。 Blog - Next.js 9.4 | Next.js パッと見、「段階的な静的サイト生成…?なんのことだろう…」となったのですが、手元で試してみた感じ、これが既存のサーバーの実装アプローチを変える、革命的な機能ではないかと思いました。 解説を書きつつ、どのような応用があるか解説します。 next.js の Incremental SSG を試してみる リポジトリはここです。 mizchi/issg-playground 解説にあたっては、必要なのはほぼこのファイルだけで、短いのでそのまま貼ります。 // pages/[slug].tsx import { GetStaticProps, GetStaticPaths } from "next"; type Pro
tl;dr キーワードは「monotonic clock」です。 あらすじ Goで以下のようなコードを書いていた*1*2。あるAPIを叩くクライアントで、APIコールに必要なアクセストークンを4時間キャッシュしている。c.getToken() で得られたトークンを使ってAPIコールを行えばよい。 type Client struct { mu sync.RWMutex expiresAt time.Time token string } // トークンのキャッシュがあればキャッシュから返し、なければ更新してから返す func (c *Client) getToken() string { if cachedToken, ok := c.getTokenFromCache(); ok { return cachedToken } return c.refreshToken() } // トー
中山です trivyのv0.31.0でAWSアカウントのセキュリティスキャンができるようになりました。 feat: Add AWS Cloud scanning (#2493) Releases / v0.31.0 なお、v0.31.0でスキャンを実行するとクラッシュするバグがあり、すぐにv0.31.2がリリースされました。 Releases / v0.31.2 どんな感じか気になったので、軽く触っておこうと思います。 ドキュメントを確認 まずはドキュメントを確認します。 Amazon Web Services ポイントになると思った点をまとめます。 CIS AWS Foundations Benchmark standardに準拠したチェックが可能 認証方法はAWS CLIと同じ すべてのAWSリソースに対する参照権限が必要 (ReadOnlyAccess) サービス・リージョン・リソー
ソフトウェアエンジニアの三上(@mickamy)です。普段の業務では、 取引管理という部署で、主に取引とその周辺(入出金など)に関わる処理の開発を担当しています。 最近、asdf という anyenv の代替となるツールを知り、気になってはいたのですが、なかなか anyenv から乗り換えるモチベーションを見出せずにいました。 あることをきっかけにそのモチベーションを言語化できたので、その使い方とメリットについてお伝えできればと思います(タイトルの前半についてはだいぶ盛っています)。 asdf とは何か asdf は、様々なソフトウェアの複数バージョンを管理するための CLI ツールです。 プログラミング言語のバージョン管理は、特に開発者に馴染みの深いユースケースかと思います。 あるプロジェクトでは ruby の 2.7 系を利用しているが、 別のプロジェクトでは 3.2 系を利用したいと
<path opacity="0" d="M0 0h24v24H0z" /> <path d="M17.207 11.293l-7.5-7.5c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414L15.086 12l-6.793 6.793c-.39.39-.39 1.023 0 1.414.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z" /> </svg>" data-icon-arrow-left="<svg width="28px" height="28px" viewbox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://ww
⚡️ 25x faster — Switch from npm install to bun install in any Node.js project to make your installations up to 25x faster. https://bun.sh/docs/cli/install という記述を見かけて直感的に、そうはならんやろと思ったものの実際にベンチマークをしているのでどういうことなのかを気になって調べた。 A global install cache. bun installを実行すると ~/.bun/install/cache/ 以下にnpmレジストリからダウンロードされたファイルの実体が展開されキャッシュされる(--cache-dirでパスを変更できる)。 キャッシュにはパッケージのバージョンごとのディレクトリとlatestのシンボリックリンクがある。こ
うりうりさんの↓のコメントを見て、そういえばnpm ciって見たことあるけどチェックしてないなぁ。というかnpm installも雰囲気で使ってるなぁ。と思ったので、うりうりさんに教えてもらったことを手がかりに、npm installとnpm ciについて調べた。 これ、node_modulesキャッシュしてたり npm install使ってるけど npmのグローバルキャッシュ(~/.npm)をキャッシュした上で npm ciで早くなったりしないんだろうか GitHub Actions上でテストを約3倍早くした話https://t.co/MpmFktGBxU— wreulicke (@wreulicke) March 14, 2023 ちょこっと検索して見てみたところ、新旧情報があって自分が混乱したのと、公式ドキュメントには概要は書かれているものの詳しい内容は書かれていないので(僕が見つけ
改善戦略 実行のタイミングやGitHubの状況や依存サーバーのネットワークの状況によって変動はあるものの、早くて7分、だいたい10分〜15分くらいかかっている。早いか遅いかは、他の開発と比べても内容や状況が違うのでなんとも言い難いが、個人的な感想としては「遅い」。というより、一切の工夫をしていなかったので、もっと早くできるはずだと考えた。 ビルドされたファイルを複数の環境で共有する 処理全体の中で時間がかかっている処理は3つ。 依存パッケージのインストール ビルド テスト さらに、課題の一つとして「テスト実行時に開発用依存パッケージ(devDependencies)がインストールされているせいでテストが失敗しない問題がある」というものがあり、これを処理に追加しないといけない。 開発用依存パッケージのインストール ビルド 依存パッケージを一旦すべて削除 本番用依存パッケージのインストール テ
一般ユーザー向けの大規模なWebサイトや、モダンWeb上で動作するWebアプリケーションを運営する場合、CDNなどのキャッシングサービスによって静的コンテンツをキャッシュすることが極めて重要です。 しかしこうしたサービスは、非常に複雑で分かりにくいものです。 幸い、IETF(Internet Engineering Task Force)のHTTPワーキンググループがこの状況を改善すべく、HTTPの新標準策定に取り組んでいます。 最近、同ワーキンググループでは、キャッシングのデバッグとキャッシュ設定の管理を容易にすることを目的とした、HTTPヘッダに関する2つの新標準案の発表に向けて活発な動きがありました。 このことが何を意味し、どのように機能するのか、そしてWeb制作に携わる開発者全てがなぜ注目すべきなのかについて見ていきます。 新標準 この記事で取り上げる標準案は以下の2つです。 Ca
Next.js のドキュメントには次のように記載されてる React will automatically cache fetch requests with the same input in a temporary cache. This is an optimization to avoid the same data being fetched more than once during a rendering pass - and is especially useful when multiple components need to fetch the same data. React が自動的に fetch request をキャッシュすると書いてある。
諸事情でperfのソースコードを読んだのでせっかくなので簡単に解説。 今回はperfの中でもイベントの記録を担当するperf recordコマンドの処理を見ていく。特に近年はCPUがトレース機構を持っておりperfもその恩恵に預かっているため、本記事ではperf recordの中でもCPUのプロセッサトレース機構との連携部分に注目したい。 本音を言えば、perfよりIntel Processor Trace(Intel PT)やARM CoreSightといったプロセッサトレース自体に興味があるのだが、これらはLinux上ではperfイベントとして実装されているためperfコマンドの実装を皮切りに解析する腹づもりだ。 1. Perf アーキテクチャ 元々perfはPerformance counters for Linux (PCL)という名前の前身が存在しており、CPUの提供するパフォー
TL;DR VS Code 前提になってしまいますが、VS Code Remote Containers 拡張最強です、という話。実際にどういう風に作れば良いかは参考リポジトリ作ったので見て下さい。 はじめに 背景ぼかしのような推論結果を使ってカメラ画像にフィルタを入れる処理を書くとき、今だと選択肢は大きく分けて 2 つあります。 tfjs を使う Wasm 経由で tflite やその他ライブラリを使う この記事では後者の Wasm を使う方に注目して、その開発環境について記載します。 先行例 w-okadaさんのリポジトリには複数の Wasm を使った事例が紹介されています。 例を挙げるとTFLite Wasm for Google Meet SegmentationやTFLite Wasm for ESPCNなどが Wasm です。 これらのビルド環境はどうなっているかというと、Do
はじめに こんにちは。ご無沙汰しております。脆弱性診断員の百田です。 今回は、実際に脆弱性診断をしていたときに考えていた、そこまで重要でもないと思われることをここに吐き出します。 その内容は、題名にもあるとおりレスポンスヘッダの「Access-Control-Allow-Origin」に設定される値についてです。 注意点として「Access-Control-Allow-Origin」に設定される値自体はどうでも良くないです。重要です。 理由がよくわからない場合は以下の記事をご覧いただければと思います。 https://developer.mozilla.org/ja/docs/Web/HTTP/CORS では、そこまで重要でもないと思ったのは何なのか……。それは「Access-Control-Allow-Origin」に以下の値が設定されていた場合、どちらがセキュリティ的にマシなのか?とい
GitHub Actions Advent Calendar 2019 の 15 日目の記事です。 この記事では、GitHub Actions のキャッシュ機能について解説します。 目次 CI/CD とキャッシュ 簡単な例 (npm) 実験用リポジトリ作成 キャッシュ actions/cache Inputs と Outputs キーのマッチング順序 ビルド失敗時 キャッシュクリア 複数 OS で matrix ビルドするときのキャッシュ 言語ごとの例 アーティファクトとキャッシュの違い 制限事項 注意事項 まとめ CI/CD とキャッシュ CI/CD のビルドでは、リポジトリが依存するパッケージのダウンロードが原因でビルド時間が長くなってしまうことがよくあります。近年の CI/CD ではビルドごとに完全にクリーンな実行環境が用意され、前回のビルドでダウンロードしたファイルが持ち越されない
Easily the biggest question we get asked is something like: How is Remix different from Next.js? It appears we have to answer this question! We'd like to address it directly and without drama. If you're a fan of Remix and want to start tweeting smug reactions to this article, we kindly ask that you drop the smugness before hitting the tweet button 🤗. A rising tide lifts all boats. We've been frie
Focused on web standards and modern web app UX, you’re simply going to build better websites Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff. export async function loader({ request }) { return getProjects(); } export async function action
Twitter supposedly lost around 80% of its work force. What ever the real number is, there are whole teams with out engineers on it now. Yet, the website goes on and the tweets keep coming. This left a lot wondering what exactly was going on with all those engineers and made it seem like it was all just bloat. I’d like to explain my little corner of Twitter (though it wasn’t so little) and some of
Amazon で長年にわたってサービスを構築してきた中で、新しいサービスを構築するけれども、このサービスはそのリクエストを満たすためにいくつかのネットワーク呼び出しを行う必要があるというシナリオのさまざまなバージョンを経験してきました。おそらく、この呼び出しは、リレーショナルデータベース、Amazon DynamoDB などの AWS のサービス、または別の内部サービスに対するものです。単純なテストまたは低リクエストレートでは、サービスはうまく機能しますが、問題もあることにも気付きました。問題は、この他のサービスへの呼び出しが遅いこと、または呼び出し量が増えるとデータベースのスケールアウトに費用がかかることです。また、多くのリクエストが同じダウンストリームリソースまたは同じクエリ結果を使用していることに気づいたため、このデータをキャッシュすることが問題の解決策になると考えています。キャッシ
2018 年ごろまでの Go に対する不満として以下のようなものがありました。 $GOPATH/src 配下でしか開発できない これは、import された package の探索先として $GOPATH/src が使用されていたことに起因します。 つまりどこかから呼び出される package を書きたい場合は $GOPATH/src 配下に存在しなければ探索できない、そのため実質 $GOPATH/src 配下でしか開発できないということでした。 しかし 2018 年末にリリースされた Go 1.11 によりこの不満は解決されることとなります。 Go 1.11 で導入された Go modules という新たな仕組みを有効にしておくと package 探索先として $GOPATH/src が使わなくなったのです。 その代わりに例えば github.com/go-sql-driver/mysq
こんにちは大櫛です。Travis CIがオープンソースプロジェクトで使いづらくなったり、Azure PipelinesからGitHub Actionsになった途端*1爆発的な流行が生まれたりと、CIサービスにおいてもここ数年で色々な動きがありました。 特に技術記事・ブログのトレンドや企業のリクルート向け資料を見ていると、GitHub Actionsの利用が進んでいるような印象を受けます。 今回はそんなGitHub Actionsについて、Rust projectで使う際に知っておいた方がいいことやactionを紹介していきます。 以下の情報は執筆時点(2023-02-19)のものに基づいています。閲覧時には無効・誤ったものになっている可能性がありますので、必ず最新の情報・状態を確認するようにしてください。 actions-rs(非推奨) まずはじめに、執筆時点では使用を控えた方がいいact
スライド概要 GitHub Actions Meetup Tokyo #3 https://gaugt.connpass.com/event/317178/ このプレゼンテーションでは、サイボウズ社のGaroonのE2Eテストについて、GitHub Actions self-hosted runner 上で実行していたE2Eテストを高速化・安定化させるために取り組んだこと、E2Eテストワークフローの視点の改善アイディアについて話されます。GaroonのE2Eテストにおける実行時間とFlakyが問題となっており、その改善に取り組んだ内容が紹介されています。 おすすめタグ:GitHub Actions,E2Eテスト,self-hosted runner,Garoon,テストワークフロー
ディレクティブは、,(カンマ)で区切って、複数指定が可能です。 例えば、max-age=3600とmust-revalidateの2つのディレクティブを指定するときは、以下のように書きます。(ディレクティブの個々の意味は、後ほど説明するので、まだ解らなくて大丈夫です。) ただし、複数指定する場合は、矛盾しないように指定する必要があります。(矛盾する組み合わせの動作は未定義なので) そして、互換性のため、ブラウザやプロキシが未対応のディレクティブは、無視する決まりがあります。この動作のおかげで、古いブラウザは新しいディレクティブを無視できるので、ブラウザがおかしくなることは防げます。 RFCやMDNにも、この説明の例として、互換性のため、類似効果のディレクティブを並記する例が書かれていたりします。 ですが、この方法で、古いシステムとの互換性を考え出すとどんどん複雑になります。 現実的に考えて
こんにちは!SUGAR株式会社のCTOをしている杉谷と申します。SUGARという生放送システムを作っています。 “SUGAR is 何” については社長の鎌田(UUUM社長でもある)が https://note.com/sugarcorp/n/n2f3a0fe1a107 で解説していますので、よろしければご覧ください! はじめに昔(もう13年前)にも生放送システムを作ったことがあったんですが、当時は技量と知見が足りず今みたいに便利なサービスやツールも無かったので負荷に弱く、数万人のユーザーが殺到すると落ちる、なんてことが頻繁にありました。 それから11年後、いろいろあって人生2度目の生システムであるSUGARを作ることになりました。今度こそはとガッチガチに負荷対策をしたところ某人気俳優の方の配信で三十数万人が一瞬で殺到してもなんとか死なない※システムを作ることができました。 ※正確には最初
TL;DR あるリソースの fetch 中にページ遷移すると、一部ブラウザでは fetch が中断される 中断されると、TypeError が throw される ページ遷移時は、ブラウザによって遷移前のページの実行が"停止"され、"捨てられる"ので、通常 throw された後のことは考えなくて良い しかし、そのページが Back/Forward Cache から復元されうるなら、話は別 ブラウザバックすると、エラーが throw された後からページが再開される!!! そして発生する、奇妙な現象の数々... はじまりは、あるサービスの不具合報告 ある日、「Webサービスから外部サービスにページ遷移した後、ブラウザバックで戻ると、エラー画面が表示される」という不具合が報告された。どうも Webサービスの ErrorBoundary で何かしらのエラーが catch され、それによってエラー画
こんにちは!ISUCONの運営をしている櫛井です。 タイトルの通りなんですが、ISUCONに参加される方やISUCON的な状況において使えるLINEスタンプを作りましたのでお知らせいたします。 というわけで、どんなスタンプか紹介していきたいと思います。ISUCONライフのお供に是非お使いください。 思わず椅子を投げたくなった時にお使いください 計測が必要な時にお使いください 誰と組むべきか悩んだ時にお使いください ISUCONの前日にお使いください 起床に成功した時にお使いください 残念ながら起床に失敗した時にお使いください 本選出場が決まった時や、本選で会いたくなった時にお使いください Failした時にお使いください やれることがない時にお使いください お茶を汲むくらいしか出来ることがない時にお使いください 神々の遊びだなぁと思った時にお使いください N+1だと思った時にお使いください
TypeScript で記述した Google Apps Script を clasp と GitHub Actions を使ってデプロイする TypeScript で記述した Google Apps Script を clasp と GitHub Actions を使ってデプロイし、トリガーを使った定期実行をしてみました。 @google/clasp を使うことで CLI で Google Apps Script (GAS) を扱えるため、コードを Git で管理できるようになります。 今回はコードを GitHub で管理し、テストと clasp push を Github Actions で実行できるようにしてみます。 最終的な完成物は下記のリポジトリになります。 https://github.com/hbsnow-sandbox/clasp-github-actions-exampl
Modus uses logic programming to express interactions among build parameters, specify complex build workflows, automatically parallelise and cache builds, help to reduce image size, and simplify maintenance. Install Modus Read Tutorial A Modus program is a set of rules that define how new images are built from existing images by adding filesystem layers. Images and layers are represented using pred
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く