個人開発でAWSに触れてみた

Next.jsブログをVercelからAWS Amplifyへデプロイし、独自ドメインで公開するまでの実践記録

Transcript

1. [/Ÿ~wAWS {ï¼v Next.js öý°²Vercel {¹AWS Amplify x÷÷ý´w1þ¯ ùñ´ów}Ÿy»~w~ßýš³
2. ë‰ 01 ²÷ú_r Next.js wöý°²ëû 02 Vercel ÷÷ý´ GitHub x³×u{v_÷÷ý´ 03 AWS ²»¶óø_r Web µ´øx³ó½üûo²»¶óø²þÙ 04 Amplify »óø²ó÷ AWS Nwû¹ö³ó°ôÛ²ëû 05 ùñ´ó¯Û Route 53 xz]_.com ²³~ 06 o}Ÿ »¹¿ðùñ´ów^}{}Ÿ 1
3. Ìo SRE {Šw|ûÿAWS ÿ¿ù¶ùµüó¹
   ² ïsvtx}s2 ³ s~ײ¿vSRE ~ëßþ|N|s 24:35 YouTube 0SRE ÿÏ1 ÿSRE |ž»ú²û& --------------------------------- ---------- Sponsor: j__& 2
4. Amplify ~r Amplify |´sv¼»sx 1 GitHub ~³üù²¯××ß 2 npm run build wóûù 3 ßöõ±´û²S3 {Ý 4 CloudFront wy^}{Ýï t~º Amplify û¹ö³ó° + ÷÷ý´ + CDN Ýï²yø~x±v´sv¼»}\÷ ùóøõ¹üð 3
5. ÷÷ý´~m¼ ²÷ú_r GitHub {commit & push AWS Amplify {çÿ úý¸úxöùóñ²øþ ¯×óûùÿû¹ö³óÀ amplify.yml w¯Û²ûv AWS N{}Ÿ öýÀ|^}o{¹²¿»¹ÿý{ 4
6. ß͹öó÷ 1 AWS Amplify xGitHub ²³~ úý¸øúx~²¿»¹kÖ²ÞN 2 ÷÷ý´y»úý¸øú²øþ ÿí~öùóñ²gÛ 3 ²÷ú±ü·÷ó¯Û amplify.yml wóûù¯Û²Ûÿ 4 ¯ÛÕû²ú óûù³þóùx÷÷ý´Y²}¾ 5 ÷÷ý´ß¯ ¯×óûù÷ý»¹|ŸÛ 5
7. amplify.yml ¯Û óûù¯Û~r YML õ±´ûw<yvóûùwv1y ~õ¹ûð²÷÷ý´y»{=²Ûÿ w~y2 preBuild: ß[·Ï~´ó¹øüû build: ²÷ú±ü·÷ó~óûù artifacts: ÷÷ý´y»õ±´ûg Û cache: óûù¿ŸW~±~½ó ó·õ version: 1 frontend: phases: preBuild: commands: - npm ci --cache .npm --prefer-offline build: commands: - npm run build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - .next/cache/**/* - .npm/**/* 6
8. ùñ´ó¯Û~m¼ 1 z]_.com wùñ´ó×ß þ¯ùñ´ó²ü/ 2 Route 53 wû¹ø¾üó_r AWS wDNS ûv²ŸÛ 3 DNS µüðü²³ z]_.com {Route 53 ~DNS µüðü²¯ Û 4 Amplify {»¹¿ðùñ´óÿò Route 53 x¯×³~ 5 »¹¿ðùñ´ów÷÷ý´ßÎ þ¯ùñ´ówo}Ÿ 7
9. Route 53 ~݉g Route 53 ~DNS µüðü²³y»sxw1 <example.com ~DNS µüðüåyAWS Route 53 {Þ tv}=xtv¯Û|y^}{_¿» oö ùñ´ó]²AWS Route 53 wûvy»± ûÿ DNS åy~/Sûvx AWS µüó¹x~}\ ³~ Amplify ~»¹¿ðùñ´ó¯Ûw¯×³~ ### 8
10. ÿò¯Ûxòû¿úó° Google ³~ Search Console Google {¿tqv²¹t´yz» Analytics }½üÿüù}u~úü¸÷û²ÿŸW ³~y»sxwSEO fuxµ´ø}Õ{ t Amplify ~÷÷ý´÷Ÿ öùóñ¯Ûwkwtúý¸úxöùóñ|¯Û u¼vt»{úw}~y2 ÷÷ý´~ß}: GitHub ~main öùóñ{push ³ Amplify | Webhook ²×ï ³ óûù& ÷÷ý´ŸÛ 9
11. ³€sx ÿ Îß~] ‰zs Route 53 Resolver xRoute 53 ~Õt þ¯ùñ´ó×ß~݉g Amplify ÷÷ý´~ß} ùñ´óxµöùñ´ó~Õt ¸ùüýÀ~¿oxÿ÷ý Îß´svt}tsx AWS ~µüó¹~÷¿ã ²÷ú~UI öùó·õ²ó÷ SAA ×ß þ}{¹~´óõù'¿ù¶ù÷¿~´ó÷ óø <´óõù¿ù¶ù/y=¯þo 10