äžå ·åã§èº«ã®æœçœã蚌æã§ãã1æ¥åãæœ°ãã話
2022-12-31T02:28:07.584Z
ã¯ã©ã€ã¢ã³ããããããäœæ¥åãšæ¯ã¹ãŠäžå ·åãåºãŠããããšé£çµ¡ãåãè¡çŒã§åå ç©¶æãããã®ã®ãçµå±Chromeã®ã¢ããããŒããåå ã§1.5æ¥ãç¡é§ã«ãããšããäœãšãæ²ããçµéšãããã®ã§ãåãèœãèžãŸãªãããã«ä»åã®åçç¹ããã€ã³ãã«ã€ããŠãŸãšããŠãããŸãã
ãã©ãã«ã®çµç·¯
ä»åã®äžå ·åã¯ãChromeãã©ãŠã¶ã ãã§ãã©ãŒã åšãã®JavaScriptã«ããæåãããããããšãããã®ã§ãããããšããš2é±éåã«ãµã€ãã®æ¹åã®ãäŸé ŒãåããŠå®æœãããã®ã®ãããããã®æ§é çã«æ¹åãé£ããããšãåãããåå ¥éã®äžéšãè¿éããæç¶ãã®éäžã®ç¶æ ã§ããã
äžå ·åã®é£çµ¡ãåããæãæå ã®ããœã³ã³ã§åçŸã確èªãããã®ã®Chromeã®ããããããŒããŒã«ã®ConsoleãèŠãŠãäœãåå ãã¯ããã«ã¯åãããŸããã§ããããŸãäœæ¥ããæ°æ¥çµã£ãŠããèšæ¶ãèããŠããããšããã£ããšæããŸãã
1çªã®åå ã¯å ã«æ»ããªãã£ãããš
åå ãäžæãªã®ã§å ã®ç¶æ ã«æ»ãããšããŸãããããããããã«ããåå ãããã€ããããä»åã®ãäžå ·åãèªåã®ããããç¡ããšèšãåããªãããšããç¶æ³ãæããŠããŸã£ãã®ã ãšæããŸãã
å®å šãªããã¯ã¢ãããåã£ãŠããªãã£ã
ä»åãAmazon EC2 ãšããåããŠã®ãµãŒããŒç°å¢ã§ãSFTPã«ããæ¥ç¶ãŸã§ã¯åºæ¥ããã®ã®ãµã€ãã®ããŒã¿éãããŸãã«ãèšå€§ïŒFileZillaã§1æéãããŠãäœæ¥ãã¥ãŒã«è¿œå ããäœæ¥ããçµãããªãïŒã§ãäžéšã®ãã¡ã€ã«ããããã¯ã¢ãããåããŸããã§ããã
AWSã³ã³ãœãŒã«åŽã§ããã¯ã¢ããã¯ããããåããã®ã§ãããä»åã¯ã³ã³ãœãŒã«ãžã®ã¢ã¯ã»ã¹æš©ã¯èŠæ±ããFTPæ å ±ãšSSHçšã®PPKãã¡ã€ã«ããè²°ã£ãŠããŸããã§ããã
åŸã«ãªã£ãŠèŠè¿ããšè§Šã£ããã©ã«ããªã®ã«ããã¯ã¢ãããåã£ãŠããªããã¡ã€ã«ã倿°ãããäœæ¥åã«å®å šã«æ»ãããšãããããæå ã®ããŒã¿ã ãã§ã¯åºæ¥ãªãç¶æ ã§ããã
倧容éããŒã¿ã®ããã¯ã¢ããã®é£ãã
ããããæ¯åããã¯ã¢ããã¯åãã®ã§ãããä»åãããæ ã£ãåå ãšããŠããã¯ã¢ããããããµãŒããŒäžã®ããŒã¿ã倧容éãããŠãæéçã«ãåã®ããœã³ã³ã®å®¹éçã«ãããããªã®å šéšããã¯ã¢ããåã£ãŠãããªããïŒããšããç¶æ ã ã£ãããåããªãã£ãã®ã§ãã
ãããã10GBã¯ãã£ãã®ã§ã¯ãšæããŸãããSFTPã§ã®æ¥ç¶ã ã£ãããFileZillaã§ã®è»¢éé床ãé ãã£ãå¯èœæ§ããããŸãã
ãããã£ãã¯ã©ã€ã¢ã³ãã¯ãŒã¯æã®ã客ããã®å€§å®¹éãµãŒããŒããŒã¿ã®è¯ãããã¯ã¢ããæ¹æ³ãã°ã°ã£ãŠãåºãªãã£ãã®ã§ãããè¯ãæ¹æ³ãããã°æããŠæ¬²ããã§ãã
ããã§ãããã¯ã¢ããã¯åã
ããã¯ã¢ããã«æéãããããããšããã®ã¯çµå±ãããã©ãããããšããèšãèš³ãªã®ã§ããŸãäœæ¥åã«ãµãŒããŒå ã®æ§é ãèŠæ¥µããŠä»åç·šéãããã¡ã€ã«çŸ€ã¯ããã ãšããã®ãææ¡ããŠãããå°ãªããšããã®è§Šãå¯èœæ§ãããç»å以å€ã®ãã¡ã€ã«ã¯ããã¯ã¢ããããŠããã¹ãã§ããã
jQueryã®ããã¯ã¢ãããæ¬åœã«äœæ¥åã®ãã®ãæªããã£ã
ä»åãã©ãŒã åšãã®å¶åŸ¡ãäžå¿ã«jQueryãå€çšããŠããæ§é ã®ããã§ããµãŒããŒäžã®jquery-3.3.1.min.js
ãã¡ã€ã«ããããã§èªã¿èŸŒãã§ãã圢ã§ãããããããã®ããã¯ã¢ãããåã£ãæã«beautifyãããããã§jQueryã®ãµã€ãã®v3.3.1ã®ãã®ãã³ããŒãããäžæžããããããªèšæ¶ããã£ãã®ã§ãïŒã€ãŸãããã®ãµã€ãã§ã¯ãµãŒããŒäžã®ãã¡ã€ã«ããèªã¿èŸŒãã§ãããã©äžèº«ã¯åãjQueryã ãããµã€ãããæã£ãŠããŠãåãã§ããããšå®æã«èããå¯èœæ§ããã£ãã®ã§ãâŠïŒã
ããæè¿ãGoogle Chrome ã§addEventListener
ã§ä»äžãããpassive
ãšããããããã£ãããã©ã«ãã§true
ã«ãªã£ãŠãããjQueryã®åæã®ãŸãŸã§ã¯Chrome Console ã«èŠåãåºãã ãã§ãªãå®éã«ãµã€ãã«äžå
·åãåºããããã®ã§ãã
ä»åã®äžå
·åãåºããµã€ãã«ãConsoleã«åæ§ã®äžå
·åãåºãããããããšããšã®ãµãŒããŒäžã®jquery-3.3.1.min.js
ã¯äžèšã®å¯Ÿçããããã®ã ã£ãã®ã§ã¯ïŒãããããåæã®ã³ãŒãã§äžæžãããããäžå
·åãåºãŠãã®ã§ã¯ïŒããšããäžå®ãããããã€ãããå
ã«æ»ããªããããèªåã®ããã§ã¯ç¡ããšããèšãåããã§ããŸããã§ããâŠã
ã客ãããäœæ¥åŸã«ãã¡ã€ã«ãè§Šã£ãŠã
ã¡ãã£ãšãºã¬ãŸãããä»åã客ãããåã®äœæ¥åŸã«æ°ãã«HTMLã«çµæ§ãªç·šéãå ããŠããŸãããã«ããããããïŒéãšã³ãžãã¢ã§ã¯ä»æ¹ãªãããã§ããïŒãµãŒããŒäžã®ãã¡ã€ã«ãçŽæ¥ç·šéããããã§ãåã¯ãããæã£ãŠãããã¡ã€ã«ã§äžæžãããŠããŸããŸããã
çµå±ã¯ã客ããã®æå ã«ææ°ã®ãã¡ã€ã«ãæ®ã£ãŠããã®ã§ãããgitã«ããããŒãžã§ã³ç®¡çãããŠããããããã¯ãšã³ãåŽãGitHubãªã©ã®ã¯ã©ãŠããµãŒãã¹ã¯å©çšãããŠããŸããã§ããïŒå人ã®ããœã³ã³äžã®gitå©çšã®ã¿ïŒã
æ€åæéäžïŒãšãã£ãŠãæç¢ºã«æ¥æ°ãå®ããŠãªãã£ãïŒã«äžå ·åã®é£çµ¡ãããã®ã§ããŠã£ãããåãäœæ¥ããåŸã®ç¶æ ã®ãŸãŸç¢ºèªããæéããªããŠæŸçœ®ããŠãã®ããªããšè§£éããŠããŸã£ãŠããŸãããå®éã¯è¿œå ãã¡ã€ã«ãè§Šã£ãŠããŸããã
äœãšãªãå«ãªäºæããªãã£ãèš³ã§ã¯ãªããã®ã®ãçµå±ãã客ããã£ãŠèªãç¡åä¿®æ£ããŠããããå¯èœæ§ãäžããããæ¯æããçºçãããããªé¢åãªããšã¯é²ãã§ãã£ãŠãããªããã ããšããããšãåèªèãããããŸããã
ãããäžèª å®ãæããŠã客ããã«æå¥ãèšããããªããŸãããçµå±ã¯èªåãå«ããŠäººéã§ãããçµå¶ã®éåã¯ãååã¯æ©ããæ¯æãã¯é ãããªã®ã§ãåããã®éåã«åã£ãŠæ©ãååãè¿«ãã¹ãã§ããã
ãªãããšãŠãæ²ããæ°æã¡ã«ãªããŸãã
ãµãŒããŒã®èšå®ãã¡ã€ã«ãVimã§çŽæ¥ç·šéãã
åŸè¿°ããŸããä»åã¯Nginxãå©çšããŠãããetc/nginx/nginx.conf
ã®ãããªèšå®ãã¡ã€ã«çŸ€ãããã€ããããŸããããŒããã·ã§ã³ã®é¢ä¿ããããã®ãã¡ã€ã«ã ãã¯SFTPæ¥ç¶ããŠããFileZillaçµç±ã§ã¯äžæžããã§ããããŸãããŒããã·ã§ã³ã倿ŽããŠãè² è·ãªã®ã§Macã®ã¿ãŒããã«ããSSHæ¥ç¶èªã«sudo vim nginx.conf
ã®ã³ãã³ããå©ããŠVimã§çŽæ¥ãã¡ã€ã«ãããããŸããã
ããããã®ããã§å ã®ç°å¢ã«æ»ãæã«ããŸãã¿ãŒããã«ã§SSHæ¥ç¶ããŠVimã§ç·šéããªãããããªãããšããåå«ãããããå ã®ç¶æ ã«æ»ãããšãžã®é害ã®ã²ãšã€ãšãªã£ãŠããŸããŸããã
Amazon EC2 (AWS) ãçãèŠãŠãã
ä»åãAmazon EC2 + Nginx + Ubuntu ãšããç°å¢ã§æ£çŽã©ãããã»ãŒåããŠè§Šãç°å¢ã§ããã
ãè§Šã£ãããšãªãããåºæ¥ãŸããããªããŠèšã£ãŠããä»äºãªããŠåºæ¥ãªãã®ã§åœç¶èª¿ã¹ãªããXSERVERãApacheãšã®éããæ¢ã£ãŠããèš³ã§ãããæµç³ã«æªç¥ã®é åãæ·±ãããŠç¡è¬ã ã£ãããªãšåçããŠããŸãã
AWSãNginxã¯çµæ§åããå®çªã«ãªã£ãŠããã¯ããªã®ã§ããã¯ãAWSå匷äŒã«åå ãããããµãŒããŒåšãã«è©³ãããšã³ãžãã¢ã®åéãäœã£ãŠã宿çã«ããããäŒãªã©ã§äº€æµããå¿ èŠæ§ãæããŸããã
ãŸãFileZillaãSourcetreeãªã©ã®GUIããŒã«ã°ããã«é Œã£ãŠCLIïŒã¿ãŒããã«ïŒã§ã®ã³ãã³ãæäœãçµæ§é¿ããŠããŸããããããSSHãå§ããŸã ãŸã ã³ãã³ãã§ãªããšåºæ¥ãªãããšãå€ããšæããä»åŸã¯ãªãã¹ãã³ãã³ãæäœãèŠããŠããããšæããŸãã
Nginxã³ãã³ã
ã¡ãªã¿ã«Nginxãä»åãåããŠã ã£ãã®ã§äœ¿ã£ãã³ãã³ãäžèЧãã¡ã¢ããŠãããŸãã
ãŸãWindowsçšã®SSHããŒã§ãã.ppk
ãã¡ã€ã«ãããã£ãã®ã§ããããMacçšã®.pem
ãã¡ã€ã«ã«å€æããå¿
èŠããããŸãããã®å€æã¯ã°ã°ã£ãã倿ãœãããªã©ãåºãŠããŸãã
SSHæ¥ç¶
ããããŠãŒã¶ãŒã®ã«ãŒããã¡ã€ã³é
äžã®.ssh
ãã£ã¬ã¯ããªã«é
眮ããŠä»¥äžã³ãã³ããå©ããšSSHæ¥ç¶ã§ããŸãã
ssh -i ~/.ssh/sample.pem [ãŠãŒã¶ãŒå]@[IPã¢ãã¬ã¹]
Amazon EC2 ãªããŠãŒã¶ãŒåã¯åºæ¬ec2-user
ã«ãªãã®ã§ãããä»åã¯OSãUbuntuã ã£ããããéããŸããã
Super User æš©éã§ãã¡ã€ã«ãç·šé
sudo vim nginx.conf
Nginxã®åèµ·å
sudo service nginx restart
ä»ã®èšè¿°æ¹æ³ãè²ã ããã¿ããã§ããä»åUbuntuã ã£ãããäžèšã ã£ãã®ããã
ãããã°åã®ãªã
ãµãŒããŒãµã€ãã®è©±ããäžè»¢ããŠä»åºŠã¯ããã³ããšã³ãã®è©±ã§ãããäž»ã«Chrome Developer Tools ãå©çšãããããã°è¡ã®åŒ±ããæ¹ããŠæããŸããã
äžè¬çãªElementsã¿ãã®å©çšãCSSã®ãªã¢ã«ã¿ã€ã ç·šéãNetworkã¿ãã§èªã¿èŸŒã¿ãã¡ã€ã«ãèªã¿èŸŒã¿ã¹ããŒããææ¡ããããããã¯åºæ¥ãŠããŸãããCoverageã¿ãã§äœ¿çšãããŠããªãCSSãå²ãåºããšããåºæ¥ãŸãã
ããããã¬ãŒã¯ãã€ã³ãã®è²Œãæ¹ã®ã³ãã Event Listeners ã®é ç®ã®å©çšæ³ãªã©ã匱ããã€ãŸããšããJavaScriptãã¡ãããšäœç³»çã«çè§£ã§ããŠããªãã§ãã
jQueryãªãã®èšè¿°ãèªãã§ã颿°ãšã¡ãœããã®éããããããããEvent Listener ã£ãŠäœã ïŒããšããç¶æ ã ã£ãã®ã§ããããããŒããŒã«ãèŠãŠãããã䜿ãããªãããã®ç¥èãäžè¶³ããŠããæãã§ããã
çç·Žã®ãšã³ãžãã¢ãªããã®ããŒã«ãé§äœ¿ããŠä»åã®åå ããå°ãªããšãä»åè§Šã£ãç®æãåå ã§ãªããªã©ãç¹å®ã§ãããã§ãããããŸãåºæ¥ãã§ããã
Webã®æ å ±ãæŒããªããã®ä»ãçŒãåã®ç¥èã®éçãæããŸããæ¬ã§äœç³»çãªç¥èãã€ãããããã¯ãäŒç€Ÿãªã©ã§å 茩ããæããŠãããã®ãäžçªã§ãããã¯ããäŒç€Ÿã§ã®äººéé¢ä¿ã®ã¹ãã¬ã¹ãç¡ã人ã£ãŠãããã ãããã
ããªãŒã©ã³ã¹ãšããŠã®å¿åŸïŒ
å¿åŸãšããŠèšãåããããŸã 埮åŠãªã®ã§ãçå圢ã§ã¡ã¢ããŠããã
- æ€åæéã£ãŠèšå®ããæ¹ãããã®ããª
- åºå®IPãªæ¹ãã¢ã¯ã»ã¹å¶éãGAã®é€å€ãªã©ã«éœåãè¯ã
- GitHubã®Private Repositoryã«æåŸ ããŠãããçŽåã¯Pull RequestãšããçŽå圢æ ãäžçªè¯ãã®ãã