マイクロサービス間通信における認証認可およびアクセス制御
はじめに 2023年4月に基盤エンジニアとして Ubie に入社しました nerocrux です。主に Ubie の ID 基盤の開発と保守運用を担当しています。 この記事は、2023 Ubie Engineers アドベントカレンダー 5 日目の記事となります。 Ubie では、モジュラモノリスを採用しつつ、マイクロサービスアーキテクチャも採用しており、領域によってサービスを分けて、それぞれの担当チームが開発と保守運用をしています。 クライアントから一つのリクエストを受け取ったあとに、Ubie のバックエンドではリクエストを受け取ったサービスだけがそのリクエストを処理することもあれば、別のサービスにディスパッチし、複数のサービスがひとつのリクエストを処理して結果を返すこともあります。 マイクロサービス間の通信が Ubie の内部で発生したとしても、必ずしも無制限で自由に行われていいわけで
ウェブサイト制作では、游ゴシックはおすすめしない理由
ウェブサイト制作では、游ゴシックはおすすめしない理由こんにちは、こんばんは！せきゆおう です。 游ゴシックは好きですか？僕も印刷物では使いますが、ウェブサイトでは「游ゴシックを使ってください」と指示されるまでは使いません。 また、そう指示された場合もデメリットは必ずお伝えするようにしています。 「游ゴシックってMacでもWindowsでも標準でインストールされているし、デバイスフォントとして使う際に最有力候補では？」という方も多いです。それでも僕は推奨しません。 その理由は4つあります。 ・游ゴシックはWindowsでかすれて見える ・スマホ端末に游ゴシックは搭載されていない ・実はMacOSで游ゴシックは標準では搭載されていない ・今後、システムフォントとして使えないブラウザが増える それら4つの理由を参考資料を交えつつ解説したいと思います。 その前に...游ゴシックの採用率は非常に高い
React 19の新機能まるわかり
2024年4月にリリースされたReact 19 Betaの新機能について、細かい点やポイントを解説します。
オブザーバビリティの最前線 OpenTelemetryで下げる認知負荷~活用事例4選~ - Findy Tools
公開日 2024/05/29更新日 2024/05/29オブザーバビリティの最前線 OpenTelemetryで下げる認知負荷~活用事例4選~ 近年マイクロサービスアーキテクチャの普及やクラウドネイティブの普及が進み、システムの複雑性は増す一方です。システムの動作を正確に把握することはますます困難になっており、そのような状況の中で、オブザーバビリティはシステムを安定的に運用するために必要不可欠な要素になってきています。 そして、オブザーバビリティの重要性の認知が高まるにつれて、多くの企業でオブザーバビリティに関するツールの導入も進み始めています。 そのような潮流の中、オブザーバビリティ分野でさらなる大きな可能性を持つプロジェクトがOpenTelemetryになります。 本記事では、OpenTelemetryとは一体どんなものなのか、そして実際にOpenTelemetryの導入・活用に成功し
S3経由でXSS!?不可思議なContent-Typeの値を利用する攻撃手法の新観点 - Flatt Security Blog
はじめに セキュリティエンジニアの齋藤ことazaraです。今回は、不可思議なContent-Typeの値と、クラウド時代でのセキュリティリスクについてお話しします。 本ブログは、2024 年 3 月 30 日に開催された BSides Tokyo で登壇した際の発表について、まとめたものです。 また、ブログ資料化にあたり、Content-Type の動作や仕様にフォーカスした形で再編を行い、登壇時に口頭で補足した内容の追記、必要に応じた補足を行なっています。 また、本ブログで解説をする BSides Tokyoでの発表のもう一つの題である、オブジェクトストレージについては、以下のブログから確認をすることが可能ですので、ご覧ください。 blog.flatt.tech なぜ今、この問題を取り上げるのか？ 従来のファイルアップロードにおいて、Content-Type の値を任意の値に設定すること
Auth0のアプリケーションで予期しないログアウトが発生する問題の原因と対策 | DevelopersIO
3つも有効期限が出てきましたが、Auth0でログアウトの判定となるのはどの有効期限が切れたときなのでしょうか。検証していきます。 検証 ①access_token有効期限切れ Auth0ダッシュボード > APIs > Auth0 Management API > Token Settings > Token Expiration 発行してすぐに有効期限が切れるように設定します。 ログインします。 ブラウザのデバッグコンソールのaccess_tokenをデコードすると、確かに60秒にセットされていることが分かります。 { ...省略... "iat": 1714831800, "exp": 1714831860, ...省略... } 60秒経過してブラウザをリロードしてもログアウトしません。 この値は、直接ログアウトには影響しないようです。 ②id_token有効期限切れ Auth0ダッ
Datadogのグラフにデプロイタイミングを表示する方法 - 世界中の羊をかき集めて
Datadogのグラフをみていると、いつアプリケーションがデプロイされたのか気になることがあります。 「レスポンスタイムが急に悪くなってるけどデプロイ影響？」「エラーレートが跳ねるタイミングがあるけどデプロイ影響？」など。 そこでDatadogのグラフにデプロイタイミングを表示する方法を紹介します。 1, Event Overlays機能を使う docs.datadoghq.com 以下の画面のように、表示したいDatadog Eventのクエリを入力します。 するとEvent発生日時がグラフ上に縦線で表示されます。 シンプルな方法ですが、デプロイするタイミングでDatadogにEventを送信する必要があります。 デプロイフローに追加が必要なのでできればDatadog内で完結したいです。 2, Show Overlays機能を使う docs.datadoghq.com ※これを使うにはA
明示的な型注釈によって推論コストを下げるというアプローチ
近年、TypeScript を取り巻くエコシステムでは、ユーザーに明示的な型注釈を求めることで、推論や型生成のコストを下げるというアプローチが注目されています。TypeScript 5.5 beta で 発表された --isolatedDeclarations オプションはその代表的な機能ですし、Deno の提供する新しいパッケージレジストリ JSR が提唱している slow types という考え方も同様のアプローチを求めるものです。 この記事では、上記のようなアプローチが提案された経緯や解決したい課題について、TypeScript を利用するエコシステムの状況も踏まえて整理します。 TypeScript を取り巻くツールチェインと型情報を利用する上でのパフォーマンス 皆さんがご存知の通り、TypeScript の型推論は非常に賢く、その機能は日々アップデートされています。特に以下のよう
コードジャンプ可能な CSS Modules を実現する happy-css-modules の紹介 - mizdra's blog
弊社では React で CSS を書くための手法として CSS Modules を全面的に採用しています。そこで CSS Modules を使った開発をより快適にするために、「happy-css-modules」というツールを作りました。 happy-css-modules のデモ。 この記事ではこのツールが必要になった背景、導入方法、そしてツールの技術的な仕組みについて紹介します。 CSS Modules の問題点と、typed-css-modules による解決 CSS Modules では、デフォルトでは存在しないクラス名を使用しても、(プロジェクトの設定次第ですが) TypeScript のコンパイルエラーが出ることはありません。 import styles from './Button.module.css'; function Button() { return ( <but
Your API Shouldn't Redirect HTTP to HTTPS
TL;DR: Instead of redirecting API calls from HTTP to HTTPS, make the failure visible. Either disable the HTTP interface altogether, or return a clear HTTP error response and revoke API keys sent over the unencrypted connection. Unfortunately, many well-known API providers don't currently do so. Updated 2024-05-24: Added the Google Bug Hunter Team response to the report that the VirusTotal API resp
『（ある程度は読めるが）喋れない、聞けない』から、『TOEIC 815点（
『（ある程度は読めるが）喋れない、聞けない』から、『TOEIC 815点（リスニング420点）まで、5時間ｘ10か月＝1500時間』 大学受験で英語が得意科目だったのははるか昔。喋れない、聞けないから脱却の必要があり、10ヶ月の猛勉強で、さほど苦労なく英語で世間話ができて、ニュースやTEDなら比較的楽に聞けるようになった。日常的に字幕なしの海外のYOUTUBEを見ているし、世界一人気があるというポッドキャスト『The Joe Rogan Experience』も、まだら状の理解ながら、テキストなしで楽しめるようになった。 僕の勉強量と成果のバランスが良いのかどうか、自信はない。勉強時間も、平均したら、一日5時間を大きくは超えないとは思うが、サボり気味だった期間もあり不正確である。 それだけの時間をかけたら、そりゃ、それぐらいにはなるわな、と思う方もいるだろう。 が、『TOEIC 815点』
Server Actions の同時実行制御と画面の状態更新
2024 年 5 月現在だと Next.js のドキュメントには明示的な記載がないが、「同時に実行可能な Server Action は常に１つだけ」という件について。 実は自分もこれをちゃんと認識しておらず、先日会社の先輩に教わって初めて知ったので、試したことなどを書き残しておく。 Next.js の場合、App Router (Router Reducer) によって、Server Action の実行が直列化 (キューイング) されるようになっている。 このキューイングの挙動を考慮すると、以下のような呼び出し方は危ういコードとなる。 "use client"; import { useState } from "react"; import { increment } from "./actions"; export default function Page() { const [
Next.js で React Compiler を試しつつ出力コードを見てみる
React Compiler React 19 Beta から React Compiler が導入され利用可能となりました。 ※単体での検証としては次の記事が参考になります。 Next.js での利用 React Compiler のドキュメント内には、各種バンドラやフレームワークで利用する方法も記載されています。 というわけで、Next.js で実際に試してみよう、というのがこの記事の主旨です。 事前準備 / セットアップ 基本的にドキュメントに従って進めます。注意点としては、執筆時点での Next.js の Stable バージョン 14.2 ではまだ React 19 が利用できないため、canary バージョンの利用が必要です。 適当なディレクトリを作成し、その中で create-next-app を実行します。 実験用のためオプションは適当に選択しますが、せっかくなので Tur
Next.js breaking change - disable router/fetch cache by default
Next.js App Routerは巷では難しいと評されることが多々あります。これはReactの新機能であるServer ComponentsをはじめとするServer 1stとも言えるパラダイムシフトを必要とすること、そして初見殺しなデフォルトのキャッシュ挙動に起因していると筆者は考えています。 パラダイムシフトが必要となるServer ComponentsやServer ActionsなどのReactの新機能については、エラーで指摘・修正のヒントが提示されるなどの初学者のフォローもしっかり考慮した設計がなされてたり、多くのドキュメントや記事が公開されているので、これらについてはhooksが登場した時のようにあとは世の中に理解が広まるまでの時間の問題なのかなとも感じています。 一方でキャッシュについては、デフォルトで積極的かつ何層にも分けてキャッシュされる上、「意図せずキャッシュされて
Next.jsでMiddlewareが大量に実行される場合の対処法
Next.jsでWEBアプリケーションを開発している時に、middlewareが大量に叩かれるという問題が発生した。 Supabaseを使用しており、middlewareでgetUser()が大量に叩かれてAPIのLimit制限を食らっていた。 諸々調査した結果、解決したので記載しておく。 環境 Vercel Supabase Next.js（１４．x） App Router 解決方法① PreFetchではMiddlewareをパスするように設定 <Link>を使用していると、prefetchが行われるため、リストページなどでは大量にmiddlewareが実行される。 RLSを導入しているので、ログインしていなければ、ログインページにリダイレクトされればOK。 export async function middleware(req: NextRequest) { ... } // En
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
DB設計書の管理が楽になるDBML入門 – DBMLの書き方,dbdiagram.io, dbdocs の紹介 – | SIOS Tech. Lab
こんにちは！サイオステクノロジーの安藤 浩です。DB設計書の生成が容易にできるDBMLをご紹介します。DBMLの入門として、DBMLの書き方、ER図生成方法、Github actionsでCIを実行して閲覧する方法をご紹介させていただきます。 DBMLとは DBML は DataBase Markup Language の略でDB構造を定義するために設計された言語です。 DB構造に焦点を当てており、可読性の高い言語です。 dbdiagram.io や dbdocs.io などを利用することでDBドキュメントの生成が可能です。 コードベースで図を生成できる点でPlantUMLと似ていますね。 DBMLの書き方 テーブルの書き方 まずはテーブルの定義の例をもとにDBMLの記法を紹介していきます。users というテーブルを作成してみます。コードは以下のようになります。 Table users
Next.js に対する Kent C. Dodds の批判と、Lee Robinson のアンサーの要約
Next.js に対する Kent C. Dodds の批判と、Lee Robinson のアンサーの要約 はじめに 10 月 26 日に Next.js Conf が開催されましたが、それと前後して Kent C. Dodds (以下 kentcdodds と呼びます) と Lee Robinson (以下 leerob と呼びます) がそれぞれ という記事を公開しました。前者はタイトルの通り、Testing Library の作者であり、Remix の共同創業者の一人でもある開発者兼教育者 kentcdodds が、Next.js を使わない理由について述べたものです。そして後者は、Vercel の VP of Developer Experience である leerob が、主に前者に対する反論を述べたものです。筆者は両方の記事を公開後すぐに面白く読み、そしてどちらにも頷けるところ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React 19を概念から理解する
Magic UI
