Your cart is empty.
Keep shoppingNext.js V15：フルスタック開発！AWS S3×CloudFront×WAFで画像ファイルを安全＆高速配信！
Highest Rated
239 students
Next.js V15：フルスタック開発！AWS S3×CloudFront×WAFで画像ファイルを安全＆高速配信！
Next.jsのバージョン15で、記事投稿アプリケーションをフルスタックで開発!!画像の保存先ストレージには、AWSのS3を採用。CloudFront×WAFとの連系で、安全＆高速配信を実現。簡単なインフラ＆独自ドメインでの公開まで実装。
Created bylone programmer
Last updated 4/2025
Japanese
What you'll learn
- メディアファイル(画像データ)を扱う、本格的なアプリケーションを、フロントにバック、インフラに至るまで、フルスタックで構築し、公開する力が身につきます。
- NextJs V15、かつ、React19で正式に導入された、useActionStateを使いこなすことが出来る様になります。また、useFormStateからの変更点についても、しっかりと解説。 加えて、Server Actionsの、重要なseculityアップデートについてもレクチャーさせていただきます。
- Next jsでの、初心者泣かせとされる、Request MemoizationやDataCache、Router Cacheなどの、cache(キャッシュ)制御について、実践を通して、解説させていただきます。
- 実践的なSEOを意識して、アプリケーションに加え、画像ファイルまで、独自ドメインで公開する手順を解説させていただきます。加えて、SSLサーバー証明書の取得方法や、DNSサーバーの設定方法までも、レクチャーさせていただきます。
- Next Jsのアプリケーションと、AWSのストレージサービスであるS3を連系させ、ファイルのアップロードと、削除をする方法を習得することが出来ます。
- AWS S3に、CDNサービスのCloudFront、セキュリティーサービスのWAF、これらを掛け合わせて、高速かつ安全に、メディアファイルを配信する方法を学ぶことが出来ます。
- prismaのtransaction(トランザクション)を用いて、堅牢で信頼性の高いデータ更新を実装します。これは、複数のシステム間での、データの不一致をぐために役立ちます。ちなみに、決済処理などの際に、よく採用される手法です。
- 正規表現を駆使して、実践的なバリデーション機能を実装。これにより、正規表現を用いて、自在にvalidationを実装する力が身につきます。
- AWS IAM(Identity and Access Management)や、IAM Policy、IAM User、IAM Roleについて、解説させていただきます。
Explore related topics
Course content
6 sections • 44 lectures • 6h 55m total length
Requirements
- 本講義を受講する上では、以下の3つのことが必要となってきます。 ①Nextjsの使用経験。フロントエンドとバックエンドを、NextJsで開発していきます。NextJsを全く触ったことが無い初心者のカタは、ご購入をお控え頂けると幸いです。 ②Tailwind CSSについての理解。Tailwind CSSを用いますが、解説は行っていません。 ③予め、githubアカウントと、AWSアカウンを作成しておいて下さい。
Description
Next.js V15 × AWSのインフラ × Vercel、これら3つを掛け合わせて、記事投稿アプリケーションを開発＆独自ドメインで公開！！
ちなみに、完全な、フルスタックでの開発となります。
フロントエンドと、バックエンドは、Next.jsのバーション15を採用。
記事のcontent部分は、Markdown(マークダウン)に対応。
また、XSS(Cross-site scripting)対策も施します。
画像ファイルの保存先は、AWSのS3。
S3の前段には、CloudFrontを配置し、CDNを活用した高速配信を実現。
また、WAF(ウェブアプリケーションファイアウォール)でのセキュリティー保護まで実装します。
デプロイ先は、Next.jsに最適化されたVercel。
AWSのRoute53でDNSサーバーの設定を操作し、独自ドメインでの配信方法まで行います。
■この講義を受講するメリット：
①メディアファイルを扱う、本格的なアプリケーションを、
フロントにバック、インフラに至るまで、フルスタックで構築し、公開する力が身につきます。
②Next.jsのバージョン15、かつ、リアクト19で正式に導入された、
useActionStateを使いこなすことが出来る様になります。
また、useFormStateからの変更点についても、しっかりと解説。
加えて、Server Actionsの、重要なseculityアップデートについてもレクチャーさせていただきます。
③Next.jsでの、初心者泣かせとされる、Request MemoizationやDataCache、Router Cacheなどの、
cache(キャッシュ)制御について、実践を通して、解説させていただきます。
④実践的なSEOを意識して、アプリケーションに加え、画像ファイルまで、
独自ドメインで公開する手順を解説させていただきます。
加えて、SSLサーバー証明書の取得方法や、DNSサーバーの設定方法までも、レクチャーさせていただきます。
⑤Next.jsのアプリケーションと、AWSのストレージサービスであるS3を連系させ、
ファイルのアップロードと、削除をする方法を習得することが出来ます。
さらに、CDNサービスのCloudFront、セキュリティーサービスのWAF、
これらを掛け合わせて、高速かつ安全に、メディアファイルを配信する方法を学ぶことが出来ます。
⑥prismaのtransaction(トランザクション)を用いて、堅牢で信頼性の高いデータ更新を実装します。
これは、複数のシステム間での、データの不一致をぐために役立ちます。
ちなみに、決済処理などの際に、よく採用される手法です。
⑦正規表現を駆使して、実践的なバリデーション機能を実装。
これにより、正規表現を用いて、自在にvalidationを実装する力が身につきます。
■[ 最後に ]:
現代のWeb開発では、フロントエンド、バックエンド、インフラ、セキュリティーと、多岐にわたる知識が求められます。
本講義では、それらを体系的に学ぶこができる内容になっていると、自負しています。
丁寧な解説を心がけますので、是非とも最後まで、ご受講いただければ幸いです。
それでは、本講義でお会いできることを、楽しみにしています。
Who this course is for:
- メディアファイルを扱う、本格的なアプリケーションを、フロントにバック、インフラに至るまで、フルスタックで構築し、公開するスキルを身に着けたい方。
- NextJs V15、かつ、React19で正式に導入された、useActionState ＋ Server ACtions についての理解を深めたい方。
- NextjJsでの、初心者泣かせとされる、Request MemoizationやDataCache、Router Cacheなどの、cache(キャッシュ)制御について、学びたい方。
- 実践的なSEOを意識して、アプリケーションに加え、画像ファイルまで、独自ドメインで公開する手順学びたい方。
- Route 53でのド独自メイン取得方法～DNSサーバーの設定方法を学びたい方。
- HTTPS配信するための、SSLサーバー証明書を、AWS Certificate Managerで取得する方法を学びたい方。
- Next jsのアプリケーションと、AWSのストレージサービスであるS3を連系させ、ファイルのアップロードと、削除をする方法を学びたい方。
- AWS S3に、CDNサービスのCloudFront、セキュリティーサービスのWAF、これらを掛け合わせて、高速かつ安全に、メディアファイルを配信する方法を学びたい方。
- prismaのtransaction(トランザクション)を用いて、堅牢で信頼性の高いデータ更新の方法を学びたい方。
- 正規表現をマスターし、自在にバリデーション(validation)を実装する力を身に着けたい方。
- AWS IAM(Identity and Access Management)や、IAM Policy、IAM User、IAM Roleについて、学びたい方。