【AWS】Next.js+LaravelをECS+Fargateにデプロイする時のアレコレ | yutaro blog
最近業務でNext.js+LaravelのアプリケーションをAWSのAmazon ECS(Fargate)にデプロイするタスクを担当しているので、デプロイするにあたりNext.js側、Laravel側でやっておくこと、エラー対応などをまとめておく。 ECSへのデプロイはEC2へのデプロイに比べそもそもネットに情報が少ないECSの中でもデータプレーン（コンテナ実行環境）にEC2を使った記事が多くFargateを使った記事はかなり少ないECS+Fargateへのデプロイでも本記事のようなフロントエンド+APIの構成のデプロイ例はマジで少ない という状態で結構苦戦したので、自分で苦戦したことを残しておくとともに同じ構成でデプロイする方に向けて参考になれば嬉しいです。 ECS、ECR、Fargateについての技術説明・全体的なデプロイ作業の手順についてはこの記事では扱わないが、この記事（というかZ
アプリチーム x SRE チームによるアプリケーションモニタリング運用改善 - freee Developers Hub
freee人事労務の品質改善を専任で活動している keik です。 freeeではアプリケーションパフォーマンスモニタリング（APM）に Datadog を利用しています。 SRE チームが導入し、アプリケーション開発チームに利用提供する形で運用されています。 導入のきっかけについては以下の記事でも触れられています。 developers.freee.co.jp Datadog APM の画面は多機能かつ柔軟で、例えばウェブサーバーが受けたリクエスト処理の内訳を視覚的にドリルダウンできたり、リクエストや SQL クエリごとのレイテンシやエラー率を計測してダッシュボード化してくれたり、また全画面で共通的に「タグ」や日時を用いたフィルタリングができたりします。直感的なだけなく、見た目もオシャレで、適当に眺めているだけでもワクワクします。 しかし、私達は「ここに映っているもの」が何なのか、正直分
Webフロントエンドパフォーマンスチューニング80選 - Qiita
こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン
OpenAPIを使ってAPIドキュメントとモックサーバーを良い感じにした話
2021年6月2日に行われたSendai Frontend Meetup #6で使用したスライドです。 GitHub サンプルコード https://github.com/KanDai/openapi-sample ReDocで生成されたドキュメント https://kandai.github.io/openapi-sample/ About Swagger Specification https://swagger.io/docs/specification/about/ Swagger Editor https://editor.swagger.io/ Stoplight Studio https://stoplight.io/api-design/ Swagger UI https://petstore.swagger.io/ Redoc https://github.com/Red
Web パフォーマンスとプロダクト KPI の相関を可視化する話 2022ver - ドクターズプライム Official Blog
@1000ch (id:hc0001) です。技術顧問業としては広報周りの戦略を考えていることが多いのですが、今日はエンジニアリングの話です。 ドクターズプライムのプロダクト開発の中でも、パフォーマンス上の課題を発見して改善に取り組むことがあります。今回は @oinume (id:oinume) さんから 「この辺りの実装が問題になっていそう…」 という相談があったので、私がアプリケーション全体を眺めてボトルネックになっている箇所をいくつかピックアップし修正方針を提案したのですが、 実装を修正する前に 「まずは継続的にモニタリングできる環境を準備してパフォーマンスの前後がわかるようにしましょう」 ということで原点回帰した話です。 Core Web Vitals でリアルユーザーモニタリング パフォーマンス指標とプロダクト KPI の選定 リアルユーザーモニタリングと合成モニタリング データ
データ基盤による利益最大化と初期構築プロセス / 20220209
「Data Cross Conference」の登壇資料です。 https://dcc2022.datafluct.com/ データ活用によって億単位の利益を創出してきた登壇者が、データ基盤をこれから構築する方に向けて、費用対効果を最大化するための初期構築プロセスを紹介します。 ----------------------------------------------------------- 【PR】一緒に働きましょう！ https://kazaneya.com/kdec -----------------------------------------------------------
JavaScriptのレガシー挙動を定めたAnnex Bをひたすら読む記事
ECMAScript Annex Bおよび関連する仕様を読みます。 おことわり 言うまでもありませんが、ここで説明されている機能は使わないようにしましょう。 筆者がJavaScriptを書き始めたのは2005年頃で、その後2010年代は実質的な空白期間でした。そのため本記事に含まれる歴史的背景の説明は、2005年頃の筆者が学んだ内容に加えて、当時の資料を遡って調査した結果に基づいて記載されています。できる限り信頼性の高い情報を見つけた上で記述するよう心がけましたが、当時常識だった知識の欠落等により不正確な記述になっている部分があるかもしれません。もし誤り等があったら指摘いただけると嬉しいです。 現在のzennでは <sub></sub> や <ins></ins> は描画されていませんが、心の目で下付き文字や下線装飾に読み替えてください。 ECMAScript Annex B とは ECM
TypeScript 型レベルプログラミング フリースタイルガイド - Object.create(null)
TypeScript の型レベルプログラミングのための真面目なスタイルガイドではありません. 型なしラムダ計算で喜ぶような人間が使うための諸刃の剣です. この記事の内容は TypeScript の 2022 年 1 月時点での最新版である 4.5.4 に基づいています. 将来のバージョンでの妥当性は保証しません. 「型〜」「〜型」という用語の「型」はしばしば省略します. 値レベルの話題は一切登場しません. 以前作った型レベル Brainfuck インタプリタはこのスタイルに則っているので参考にどうぞ. いつまでこのネタを引きずるんですか? パラメータに対して制約を付与しない 型定義のパラメータに対して extends を使って制約を付与すると, そのパラメータに与えられる引数を制約を満たすもののみに限定することができます. 例として, 以下の Append には string の部分型のみ
TypeScriptの公式チートシートを読んだ - dackdive's blog
先週の This Week In React に流れてきたやつ。 🧵 TypeScript Cheat Sheets by @orta 4 nicely designed and official cheatsheets now online: - Types - Interfaces - Classes - Control Flow Analysishttps://t.co/fnqAcuU8c8 pic.twitter.com/D7BlZsyvjf— Sebastien Lorber 🇫🇷 🦖 ⚛️ 📨 (@sebastienlorber) 2022年1月19日 ざっと読んでみたけどそこまで目新しい発見はありませんでした。以下メモ。 💬 はコメント。 Classes https://www.typescriptlang.org/static/TypeScript%20Clas
エンジニアの"有害な振る舞い"への対処法 - Qiita
本記事の続編として、自分が有害な振る舞いをしないようにする改善の取り組みを扱った記事も書いてます。 エンジニアや上司が"有害な振る舞い"を改善する方法 ※「難しい人」は概念として用い説明するのに便利な言葉でしたが、誤解を生じたり、本記事のポリシーに沿わない使用（難しい人というラベリングを特定個人に適用する使い方）が容易にされてしまいそうだと分かりました。そのような誤用を防ぐことを最優先とするため、代わりに「有害な振る舞い」という表現を使用し、人ではなく振る舞いに着目するタイトル及び文章に変更致しました。 はじめに 以下の記事を読んだ際に「難しい人」という表現が何となく面白い響きで印象に残ったので、これを機に自分の考えを今までの経験をもとに書きたいと思います。 “難しい人”が1人入ると、チームの生産性は30〜40％低下する 対抗せずに、場の「安心感」を作るための3つの条件 - ログミーBiz
どういう技術者になって欲しいか (2) - ogijun's blog
この記事はiCARE Devチームのアドベントカレンダーの第2レーン15日目の記事です。14日目に引き続き荻野が担当します。昨日の記事で比較的この業界の経験が少ない人も仲間になってもらっているということを経緯を含めて書きましたが、ではそういう技術者としては発展途上の人たちに、将来どうなって欲しいかということを今日は書きます。 いろいろあるんですが以下の3つに絞りました。会社の若手に語りかける感じになってしまった。 論理的であること、批判的であること プログラマは論理の機械であるコンピュータを操る仕事なので、その仕事に従事しているならば自動的に論理的な人間であろうと期待されてしまう節があります。しかしながら、様々な心理学的実験などから、人間は必ずしも常に論理的に思考しているわけではないことが明らかになっており、プログラマも人間である限りはその癖から完全には逃れられません。そういったことを意識
MVP（Minimum Viable Product）の意味を理解する。そして、なぜ私はEarliest Testable / Usable / Lovableを好むのか。 | ANKR DESIGN | デザインリサーチ・プロトタイピング・サービスデザイン
数年前、私はこんな絵を書いて、アジャイル開発やリーン開発のついての様々なプレゼンで用いた。 そこから、この絵は急速に広まっていった！記事、プレゼン、さらには本（Jeff Pattonの”User Story Mapping”という素晴らしい読み物なのだが）にまで至る所で姿を見せた。多くの人がこの絵は反復型開発、リーンスタートアップ、MVP(minimum viable product)の本質をよく捉えていると伝えてくれた。しかし、元の文脈から切り離して物事を捉える際にはごく自然なことであるのだが、この絵を誤解している人がいる。簡素化しすぎだと非難する人もいる。（正しい指摘である） この絵はあくまで比喩である。実際の車の開発の話ではなく、車を比喩とした一般的なプロダクトの開発の話なのである。 とにかく、これらのバズからこの考えの背景を話す時だと判断したのだ。 １つ目の例：not like
HTTP ヘッダー - HTTP | MDN
HTTP ガイド リソースと URI ウェブ上のリソースの識別 データ URL MIME タイプ入門 よくある MIME タイプ www 付きと www なしの URL の選択 HTTP ガイド HTTP の基本 HTTP の概要 HTTP の進化 HTTP メッセージ 典型的な HTTP セッション HTTP/1.x のコネクション管理 プロトコルのアップグレードの仕組み HTTP セキュリティ Content Security Policy (CSP) HTTP Strict Transport Security (HSTS) X-Content-Type-Options X-Frame-Options X-XSS-Protection Mozilla web security guidelines Mozilla Observatory HTTP アクセス制御 (CORS) HTTP
2022年におけるフロントエンド開発のベースライン
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
GDPRについてソフトウェアエンジニアは何を知るべきか?
もう1つの重要なテーマは、プライバシバイデザインとプライバシバイデフォルトです。これは、今後、すべてのアーキテクチャへ実際に統合されるべきです。この規則以前は、プライバシバイデザインとプライバシバイデフォルトは、設計の自動的要素でしたが、人々は何かが起きるまで、セキュリティやプライバシにお金を払いたくありませんでした。GDPRは、今、これに対処する強力な動機付けになります。2,000万ユーロまでの価値を動機付けます。プライバシバイデフォルトはいろいろなことを意味しますが、本来、個人識別データとそのプライバシを適切に管理して、保護することを目的とします。これが一般的に要求するのは、例えば、特に個人識別情報の読み取りアクセスを含む、誰がいつ何をしたかという明白な監査証跡です。さらに、そのデータがいつ保存され、様々なレイヤを移動したかに注意を払い、システムからデータが漏洩するのを避けるために、適
徹底解説！郵便番号データの処理方法 - ケンオールブログ
日本郵便様が公開している郵便番号データを利用しやすくするには、複雑な加工処理が必要になります。 ケンオール通信では、過去数回に渡り、郵便番号データの処理方法を解説してきました。 本シリーズの締めくくりとして、今までの解説をまとめて紹介します。 データは、記載がない限り2021-11-30のデータを用いています。 郵便番号データの処理方法まとめ 複数行の結合 括弧つきのレコードの分割 括弧内の処理 丁目 小字 京都の通り名 （その他） かぎ括弧 区切り文字 ビル郵便番号 まとめ ケンオールについて 郵便番号データの処理方法まとめ 郵便番号データ処理で押さえるポイントは4つ 郵便番号データを処理するには、以下の4つのポイントを押さえてください。 複数行に分割されたレコードを1行にまとめる 括弧つきのレコードを括弧の外側と内側で分割する 括弧内の文字列を処理する ビル郵便番号を処理する 複数行の
最強の WSL 環境を作る
最強の WSL 環境を作る まあ、何が最強なのかよくわからないのですが。 WSLg は GUI が動いて音もなるので大変便利なのですが、systemd が動作していない弱点があります。LXD を多用している身としては結構しんどいのですね。 snapd が使えないので、JetBrains の開発ツールをインストールするのもちょっと面倒。まあ、Ubuntu Make を使えばいいのでそれほど気にはしていないのですが... というわけで、定期的にいろいろ試している今日この頃、ようやく自分が常用しているものが全部動く環境が作れました。 セットアップ (2022/01/11 追記) 手順は、入力するコマンドを PowerShell だったり、WSL だったりといりみだれます。次のルールで書いていますので、間違えないようにしてください。 プロンプトが > のときは PowerShell に入力してくだ
ZOZO開発組織の2021年の振り返りと現状
株式会社ZOZO 技術本部 本部長の @sonots です。この記事は ZOZOのAdvent Calendar 2021のカレンダー1の最終回（25日目）です。 2021年度、ZOZOにとっても、私にとっても大きな変化が2つありました。1つ目が2021年3月に前CTOの今村が退任し、私が全社技術戦略を策定する役割とZOZOTOWNリプレイスプロジェクト責任者を引き継いだこと、2つ目が2021年10月にZOZOとZOZOテクノロジーズの組織が再編され、私も含む開発部門がZOZOに併合されたことです。 この記事ではその変化の中で私と組織がこの一年取り組んできたものをいくつか取り上げたいと思います。 全社技術戦略策定 2021年4月にCTO的な役割を引き継いで、個人的に一番変わったのは経営陣（当時はZOZOテクノロジーズ）との対話が増えたことだと思います。私の考えているCTOの役割と、経営陣の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2022年からCTO交代！新旧CTOが語るこれまでの10年とこれからのエンジニア組織と文化 / developers-summit-2022
Title Page - The Rust Performance Book