$shibayu36->blog;スマートフォン用の表示で見る$shibayu36->blog;株式会社はてなでエンジニアをしています。プログラミングや読書のことなどについて書いています。2020-01-09最近連載開始して3巻程度で好きな作品たちmisc社内の朝会のスピーチで発表したのを公開しておく。漫画の連載追いかけるの好きです。最近連載が始まって単行本3巻程度のもので、好きな作品を紹介します。コミック殺人鬼と面会室ごしに恋愛していく(????)話。Kindle版ほわほわしてて癒やされる。見て設定したが、特にstatusCode周りでハマったのでメモ。startした時)にしか使われないので注意。ここでエラーページをちゃんと構築する。statusCodeを算出する。resが存在する時はSSRであり、res.statusCodeをそのまま利用すれば良い。resがない場合はCSRである。意図しない例外が起きてerrがここに渡ってくる場合、単なるErrorオブジェクトが入っていてstatusCodeプロパティがない。FoundページやISEページをカスタマイズするTweetもっと読むコメントを書く2020-01-07Next.js利用時の静的画像配信の方法tech静的な画像を使いたくなったら、基本はnext-imagesを使っておけば良い。このライブラリはNext.jsを使う時のwebpackのfile-loaderの推奨設定を書いてくれているだけの薄いライブラリ。file-loaderを使っているので、画像を使いたいところではimportして使うと良い。詳しい使い方はnext-imagesのドキュメントを参照のこと。実装は非常に薄いので、もし静的画像の配信周りでチューニングしたければ中身を拝借して自分好みに変えると良いだろう。production環境での配信next-imagesを使うことで、静的画像も配信できるようになる。production環境ではNodeのプロセスから画像を配信せず、S3に静的ファイルを配置し、CloudFrontを経由して配信したくなるだろう。その場合はS3にファイルを配置した上で、フルCDNアーキテクチャやCDNのドメインを分けるアーキテクチャなどのアーキテクチャに応じて配信方法を変えると良い。buildすると.next/以下に成果物が作成される。静的ファイルは.next/static/以下に生成されている。以下から配信されている。/_next/static/images/image1-2ae516abfafa31abf108c359ca581b8c.jpgそのため、.next/以下のファイルをS3に配置しておくと良い。したら.next/static/以下だけで良いかもしれないが、生成されている成果物のそれぞれのディレクトリごとの役割が把握しきれていないので、一旦全部アップロードしておく。動的なページも含めて全て一度CDN(CloudFrontなど)を通る設計となっているなら、URLのpathベースでS3にルーティングしたら良い。example.comの場合、静的ファイルのURLのドメインはCDNのドメインにする必要がある。この場合は、assetPrefixを設定することで対応できる。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。