Next.js に Datadog APM を導入する際の注意点
この記事は AoTo Advent Calendar 2023 6日目の記事です。 TL;DR Next.js のうち、サーバーサイドで動いているモジュール群で Node.js APM を利用する方法をまとめています。 前提として、Datadog Node.js APM には互換性要件が定められており、Next.js は Standalone や AppRouter を利用していている場合に、サーバーサイドのモジュール群をトレース可能です。[1] ただし、愚直に/app/page.jsに対してimport dd-traceのように実装すれば良いのではなく、Node.js APM ライブラリであるdd-traceが Next.js のサーバーサイドモジュール群にインポートされる前にロードされる必要があります。 そのため、最初にdd-traceをロードする方法として、このような方法が考えられま
npmとyarnの脆弱性とpostinstall - Cybozu Inside Out | サイボウズエンジニアのブログ
フロントエンドエキスパートチームの小林(@koba04)です。 先日、npmから脆弱性についての発表がありました。 調べていく中でいくつか思うところがあったので解説も兼ねて書いていきたいと思います。 The npm Blog — Binary Planting with the npm CLI npmの利用者としてやるべきことは、 npmのバージョンを6.13.4以上にあげる yarnのバージョンを1.21.1以上にあげる です。 npmのバージョンが6.13.4になったNodeもv8, v10, v12, v13系でそれぞれリリースされたので、そちらを利用することも可能です （yarnのバージョンは別途あげる必要があります）。 nodejs.org npmによる発表では、今回発表された脆弱性は2件あるため、それぞれ個別に考えます。 binに任意のパスを指定出来る件 npmパッケージはpa
ヤフーのフロントエンドと Node.js の関係性
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。今期から Web フロントエンド領域で黒帯を務めることになりました伊藤（@koh110）です。 普段は情報システム本部に所属しチャットなど内製基盤の開発・運用をしつつ、Node.js 言語サポートチームとしてサーバサイド TypeScript の活用や、SSR（Server Side Rendering）、BFF（Backends For Frontends）のチューニング支援なども行っています。 ヤフーには Node.js と JavaScript の言語サポートチームがあります。Node.js サポートチームは主にバックエンドとして、JavaScript サポートチームはフロントエンドとして、それぞれ JavaSc
gRPC-Web + React + Node.js + TypeScriptでシンプルなチャットサービスを作る - Qiita
概要 かねてよりgRPCおよびgRPC-Webに興味があり、これを用いてシンプルなリアルタイムチャットサービスを制作し、公開した。 本稿では、その開発工程について解説する。 ゴール gRPC-Webを用いて「わいわいチャット」を作る。 https://waiwai-chat-2019.aanrii.com/ ※2020年9月現在、公開停止しました。 内容はシンプルなチャットアプリケーションだ。サイトを開くとまず過去ログが表示され、ほかの入室者の投稿が随時流れてくる。任意の名前で入室すると投稿欄が出現し、発言ができる。発言した内容はサイトにアクセスしている全員に、即座に共有される。過去ログは無限スクロールで遡ることができる。 フロントエンドはReactを用いたSPAとし、Netlifyを使って静的サイト生成・配信する。また、バックエンドはGKE上で動くNode.jsアプリケーションとし、かつ
JSでDoSる/ Shibuya.XSS techtalk #11
Shibuya.XSS techtalk #11 の発表資料です。
フロントエンドの開発環境に Docker は不要(少なくともMacでは) - mizchi's blog
追記: 前提部分 開発環境を docker-compose で抽象することが最近のベストプラクティスだとされているが、フロントエンドをコンテナに突っ込むと無視できないIOボトルネックが発生する。 とくにwebpackのファイル監視からのビルドで発生する高頻度のIO処理を捌くために、フロントエンドだけはホスト環境に移したほうがいい、という主張。 これについて speakerdeck.com 自分の意見 Web開発者の主要な開発環境である Docker for Mac は I/O がとにかく遅い (3x~5x) data volume の driver やら cache を工夫しても遅い npm install/webpack は 基本的に I/O ヘヴィー とくに大規模開発時の watch => build がクリティカル webpack.conifg の entry で自分が関与する部分以
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) - Qiita
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(Git/Node.js/ES6/webpack4/Babel7)JavaScriptNode.jses6webpackbabel 概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロン
Node.jsでのイベントループの仕組みとタイマーについて - 技術探し
libuv/core.c at v1.x · libuv/libuv Cross-platform asynchronous I/O. Contribute to libuv/libuv development by creating an account on Git... タスク タスクは、同期タスクと非同期タスクの 2 種類存在します。 setTimeout(() => console.log(1)); setImmediate(() => console.log(2)); process.nextTick(() => console.log(3)); Promise.resolve().then(() => console.log(4)); (() => console.log(5))(); 同期タスク (() => console.log(5))(); 非同期タスク setTim
Node.jsにworkerが入った - hiroppy's site
Node@10.5.0で入った worker の話です。 この記事は、Roppongi.js #4の登壇資料です。 5min で話しきれないので記事にまとめました。 実は、自分が Node.js に関わって、最初から最後(今現在)までずっと追っている珍しいモジュールです。 worker_threads とは？ worker: initial implementation by addaleax · Pull Request #20876 · nodejs/node Hi everyone! 👋 This PR adds threading support for to Node.js. I realize that this is not exactly a ... 実装著者は Anna (この PR は io.js 時代に petkaantonov が実装したのをベースに現環境へ移した
Node.js における設計ミス By Ryan Dahl - from scratch
Ryan Dahl は Node.js の original author ですが、彼の作ったプロダクト deno に関するトークが jsconf.eu 2018 でありました。 Node.js にずっと関わってきた僕が見て非常に興奮するような話だったので、しばらくぶりにブログに書き起こすことにしました。 背景 Ryan Dahl は2009年に Node.js の話を初めて公の場に公開しました。その時の「公の場」というのが「jsconf.eu 2009」です。 www.youtube.com Video: Node.js by Ryan Dahl - JSConf.eu - 2009 この発表から Node.js が広まり、今やサーバのみならず、IoTデバイス、デスクトップアプリなど、様々なところで動作しています。 で、今回はその発表から9年の歳月が経過し、Node.jsに対しての設計不
スマホアメーバにおけるNode.jsバージョンアップ作業 | CyberAgent Developers Blog
こんにちは、サイバーエージェントでフロントエンド開発をしています菅原(@ryo_suga)です。 Amebaには数多のサービスが存在しているのですが、その中でも2016年の11月にNode.jsのバージョンをv0.10からLTSにバージョンを上げたスマートフォン向けブラウザサービスのAmeba( https://s.amebame.com )についてご紹介します。 バージョンアップに至る経緯、途中衝突した壁や移行方法、課題についてお話します。 バージョンアップの経緯 Amebaのソーシャルプラットフォームは社内的に見てもNode.jsを使ったプロダクトとしてはかなり初期のものとしてリリースされました。 その頃のNode.jsも今と比べると未成熟でした。Node.jsのバージョンもまだv0.xで、2,3年前に一度v0.10へバージョンを少しあげてから今回のアップデートまで停滞したままでした。
Private Presentation
Private content!This content has been marked as private by the uploader.
ChromeDevToolを使ってNodeJSのデバッグ - Qiita
この時、--inspect-brkを使うと指定ファイルの1行目にブレークポイントを設定した状態にできます。 （たいていの場合、一緒に使ったら良いと思う）
Headless Chrome でブラウザテスト自動化入門 | Wedding Park CREATORS Blog
こんにちは。サーバーサイドエンジニアの@akane_256です。 今日は、Headless Chromeを使ったブラウザテストの自動化（入門）について書きたいと思います。 目次 Headless Chromeとは？ 興味を持った背景 今回やったこと 実際のソースコード まとめ Headless Chromeとは？ Chrome59（2017/6月頃）から搭載された機能 ChromeをGUIなしでコマンドラインから実行できる DOMのノードを取得したり、画面キャプチャを撮ったりできる ツールと組み合わせて自動テストに使ったりする ブラウザを開いて、特定のページを開き、自分で目視確認しなくても、 あらかじめ作ったプログラムをコマンドから実行をすれば 自動でキャプチャをとったり指定の要素を取得したりすることができます。 興味を持った背景 私は普段 Ringraph という結婚指輪・婚約指輪の口コ
GraphQL APIをスキーマファースト開発するためのモックサーバをRailsとApolloで作る - kymmt
GMOペパボ Advent Calendar 2017の23日目の記事です。 今回はJavaScriptでGraphQLのサーバ／クライアントや関連ツールを提供しているApolloのツールセットでRailsプロジェクトでGraphQLのモックサーバを立ち上げるところまでを試してみます。 業務でRails製の（RESTishな）Web APIとVue.js製のSPAからなるアプリケーションを開発していて、スキーマファースト開発を取り入れています。また、GraphQLで通信するAPIを実験的に導入しはじめていますが、こちらは明示的な開発フローを決めず導入しようとしているため、なかなかサクサクと開発が進まないのが現状です。そこで、GraphQLでも先にインタフェースだけを決めてから、モックサーバを使ってフロントエンドとバックエンドで並行開発していけばよいのでは、という発想になります。 しかし、そ
Node.jsのパフォーマンスチューニングのtips - 技術探し
--inspect, --inspect-brk --trace-opt, --trace-deopt --prof --trace-events-enabled --trace-gc node-report Performance Timing API 優しいコードの書き方へ v8::SnapshotCreator さいごに Node9が10/31に出ました🎉🎉🎉 Node v9.0.0 (Current) | Node.js 今回はNode単体の話なので、Express、Nginx等のチューニングに関してはココには書きません。 また、libuv等のコード内部の話もしません。 --inspect, --inspect-brk もともとあった、--debugから移行されました。(v8.0.0 ~) Chromeを使いデバッグ、プロファイリング等を使えるようになります。 ブラウザで使え
最小のNode.jsのDockerイメージを目指すスレ - Qiita
フューチャーアーキテクトアドベントカレンダーに投稿したサーバーサイドレンダリングの代替としてPrerenderを試してみたに引き続き、JS系？ウェブ系？なエントリーです。 ECSとかEKSとか出てきて、コンテナを使うと、一つの物理ホストで、複数のコンテナをさばいて効率を上げる、というのが簡単にできるようになってきました。そのため、Node.jsのアプリもDocker化して配りたいですよね？ 次のスライドを見ると、サイズが小さいほうが良いとされています。中には静的リンクが云々みたいなトリッキーな技もありますが、そこまでがんばらない＆黒魔術にならない程度でがんばる方向でサイズを小さくしてみたいと思います。 お前のDockerイメージはまだ重い💢💢💢 by stormcat24 STEP1: Alpine + 標準ライブラリのみ 小さいというAlpine Linuxを使ってみます。クールな
Node.js Performance 改善ガイド - from scratch
Node.js Performance 改善ガイド Memory の場合 メモリリークかどうかを特定する メモリリークではない場合 CPU の場合 どこの処理に時間がかかっているのかを確認する v8 simple profiler flame graph を取得する File の場合 大きなサイズのファイルをどうしても扱う時 Network の場合 keepalive を on にする その他: 全体的にパフォーマンスを改善するためにやること JIT が効いているかを確認する clusterが使えないか検討する C++ addons vs JavaScript libraries まとめ 参考資料 Node.js Performance 改善ガイド この記事は Node.js 2 Advent Calender の 5日目の記事です。 qiita.com Node.js のパフォーマンスに
ESLint 最初の一歩
We're excited to announce that ESLint v6.0.0 has been released: https://t.co/EO4ZrZIMYM — ESLint (@geteslint) 2019年6月22日 ESLint は JavaScript のための静的検証ツールです。コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。同様のツールとしては JSLint, JSHint 等があります。 ESLint の特色は、 すべての検証ルールを自由に on/off できる 自分のプロジェクトに合わせたカスタムルールを簡単に作れる 豊富なビルトイン ルール (5.0.0 時点で 260 個) に加えて、たくさんのプラグインが公開されている ECMAScript 2015 (ES6), 2016, 201
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Node.jsセキュリティ
