ã¡ãã£ã¢ãããã¯ãéçºé¨ã®å¾è¤(id:mtgto)ã§ãã
ä¸éã§ã¯ãã¬ã³ã¿ã¤ã³ã§ãããæè¿ç§ã¯ãã³ãã¡ã¤ãã¹ã¤ã¼ããªã¼ã¯ã·ã§ã³ã¨ããWebãµã¼ãã¹ã®ç«ã¡ä¸ãããã£ã¦ãã¾ãããã©ã¤ãé ä¿¡ã§ãã¬ã³ã¿ã¤ã³ã®ã¹ã¤ã¼ããä½ã£ã¦ããã ããã©ã¤ãã¼ã®ãã¡ã³ãã¹ã¤ã¼ãããªã¼ã¯ã·ã§ã³å½¢å¼ã§å®éã«è³¼å ¥ã§ããã¨ãããµã¼ãã¹ã§ãã ç§ã®ãã¼ã ã§ã¯ä»®æ³DOMãæ±ãã®ã«Vue 2ã使ããã¨ãå¤ãã®ã§ãããä»åã¯ææ¥ãããããªãã¤ãã³ãã ã£ããã¨ãå¿ è¦ãªã©ã¤ãã©ãªãReactçããæä¾ããã¦ããªãã£ããã¨ãããç§ãVueãã使ãæ £ãã¦ããReactã§ä½ãã¾ããã
æ¬è¨äºã§ã¯AWS CodeBuildã§ã®Railsã¢ããªã®Docker buildãæ©ãããããã®å·¥å¤«ãç´¹ä»ãã¾ãã
docker buildãæ©ããããçç±
ã¯ãã¯ãããã§ã¯å¤ãã®ã¢ããªã±ã¼ã·ã§ã³ãéç¨ãã¦ãã¾ããããã®å¤ãã¯AWS ECSä¸ã§åãã¦ãã¾ã(ref. ECS ã¤ã³ãã©ã®å¤é·)ã ãããã¤ã«ãããæéã®å¤§é¨åãå ããã®ã¯CIããã³Docker imageã®ãã«ãæéãªã®ã§ã³ã¼ãä¿®æ£âã¹ãã¼ã¸ã³ã°ç°å¢ã¸ã®ãããã¤âåä½ç¢ºèªâãããã¤ã®ãããããã«ã¼ãã£ã³ãæ¥ã«ä½åº¦ãããè¿ããããªçæ´»ããã¦ããã¨ãã«çºçããå¾ ã¡æéãæ¸ããããã«ãdocker buildã«ãããæéãæ¸ãããã¨ãã§ããã°å¹¸ãã«ãªãã¾ã(主ã«ç§ã)ã
ã¾ãã¯ç¾ç¶ã©ãã ãããã£ã¦ããããè¦ã¦ã¿ã¾ããããä»å使ãã®ã¯çã¾ãã¦ããæ°å¹´çµã£ã¦ããVue.jsãå«ãããã³ãã¨ã³ãå®è£ ãããããããRailsã¢ããªã§ãã
CodeBuildã®ãã§ã¼ãºè©³ç´°ã§ç¢ºèªããã¨ãç¾ç¶ã®Docker buildã®ããã®CodeBuildã¸ã§ãã«ã¯10åå¼±ã»ã©ããã£ã¦ãããã¨ããããã¾ããã
ä»åã¯ãããååã®æéã«ããã®ãç®æ¨ã¨ãã¦ã¿ã¾ãã
ä»åã®Railsã¢ããªã±ã¼ã·ã§ã³
ä»åã®å®é¨ã«ä½¿ç¨ããRailsã¢ããªã±ã¼ã·ã§ã³ã§ããæ°å¹´ã®æ´å²ãçµã¦ããªãã®ãã¼ã¸æ°ãæã£ã¦ãã¾ãã
- Ruby 420ãã¡ã¤ã«
- TypeScript 180ãã¡ã¤ã«
PROVISIONINGãã§ã¼ãºã«ãããæéãé·ã
ã¾ãã¯AWS CodeBuild Consoleä¸ã®æè¿ã®ãã«ãå±¥æ´ã®ãã§ã¼ãºè©³ç´°ããã©ã®ãã§ã¼ãºã«æéãããã£ã¦ãããã確èªãã¾ãããããã㨠PROVISIONING
ã¨ãããã§ã¼ãºã«232ç§ããã£ã¦ãããã¨ãã±ã£ã¨ç®ã«ã¤ãã¾ãããCodeBuild PROVISIONING é
ããã§æ¤ç´¢ããã¨ãCodeBuildã«å©ç¨ãã¦ããDockerã¤ã¡ã¼ã¸ãå¤ãã¨ç°å¢æ§ç¯ã«ãããæéãé·ããªã£ã¦ãã¾ããããPROVISIONINGãã§ã¼ãºãé·ããªãåå ã¨ãªãããã§ããå®éãä»åå®é¨ã«ä½¿ç¨ããããã¸ã§ã¯ãã§ã¯ aws/codebuild/standard:2.0
ã¨ãã大å¤å¤ããã¼ã¸ã§ã³ 1 ã使ç¨ãã¦ãã¾ããã
ãããããã«ãã®è©³ç´°ãâãç°å¢ãããç¾è¡ã®ææ°ã® aws/codebuild/standard:5.0
ã«å¤æ´ãããã«ããã¦ã¿ã¾ããåæã«Dockerã®ãã¼ã¸ã§ã³ã18ãã20ã«å¤æ´ãã¾ãã
PRIVISIONINGãã§ã¼ãºã§232ç§ããã£ã¦ããã®ã95ç§ã«ãªãã¾ãããããã ãã§2å以ä¸æ¹åã§ãã¾ããã
BUILDãã§ã¼ãºã®å°éãªæ¹å
次ã«ãªãã¨ããããã®ã¯309ç§ããã£ã¦ããBUILDãã§ã¼ãºã§ãããã®ãã§ã¼ãºã§ã¯Dockerfileããã¨ã«docker build && docker pushãè¡ãªã£ã¦ããããã工夫次第ã§æ¹åã§ãããã§ãã
ä»åã®ããã¸ã§ã¯ãã®Dockerfileã¯ãã«ãã¹ãã¼ã¸ãã«ãã使ã£ã¦ãããå¾è¿°ã® yarn install
ã bundle install
ãDockerã®ã¬ã¤ã¤ã¼ãã£ãã·ã¥ã§ãªãã¹ãã¹ããããããããªå·¥å¤«ã¯ãã§ã«ããã¦ãã¾ãããããã«ãããããã5åè¿ãããã£ã¦ããã®ã§ããã°æè¦çã«ã¯ããã¯ç縮ã§ãããã§ãããã£ããããã¸ã§ã¯ããè¦ã¦ããã¾ãããã
babel-loader â swc-loaderã使ã
swc (Speedy Web Compiler) ã¯Rustã§æ¸ãããJavaScript / TypeScriptã®ãã©ã³ã¹ãã¤ã©ã§ãbabelãããæ©ãã¨ããç¹å¾´ãããã¾ããParcel v2ã§ã¯TypeScriptã®ãã©ã³ã¹ãã¤ã«ã«ããã©ã«ãã§swcã使ã£ã¦ããããããã®ã§ãç¥ããªãéã«swcã®ãä¸è©±ã«ãªã£ã¦ããããããã¾ããã
ä»åå®é¨ã«ä½¿ç¨ããããã¸ã§ã¯ãã§ã¯CodeBuildã§ã®webpack buildã«ç´192ç§ããã£ã¦ãã¾ãã (JavaScript/TypeScriptã®ä»ã«scss/cssã®å¦çãã³ãã¼ã ãã§ããç»åã¢ã»ããã®å¦çãå«ã¿ã¾ã)ããããªãbabelããswcã«å¤æ´ããã¡ãªãããããããã§ãã
å®éã«babel-loaderããswc-loaderã«åãæ¿ããã¨ããCodeBuildã§ã®webpack buildã¯192ç§â174ç§ã«æ¹åãã¾ããã
ãã£ã³ã¯åå²
swc-loaderã®å°å ¥ã«ããæ©ãã¯ãªãã¾ãããåçã«ã¯æ©ããªãã¾ããã§ããããã®èæ¯ã¨ãã¦ä»åã®ããã¸ã§ã¯ãã§ã¯å ã åºåJSãã¡ã¤ã«æ°ãå¤ããã¾ããã£ã³ã¯åå² (splitChunk) ã®è¨å®ããã¦ãªããã¨ãåå ã¨æããã¾ããã
ã¾ãã¯ãã®ä»®èª¬ãæ£ãããã調ã¹ã¦ã¿ã¾ãããã webpack-bundle-analyzerã使ã£ã¦åºåãããJavaScriptã«ã©ã®ãããªããã±ã¼ã¸ãå«ã¾ãã¦ããããè¦ã¦ã¿ãã¨ããããã®ããã¸ã§ã¯ãã§ã¯32åã®JavaScriptãã¡ã¤ã«ãçæããããã®ãã¡4ãã¡ã¤ã«ã1MBãè¶ãã¦ãã¾ãããåãnpmããã±ã¼ã¸ãè¤æ°ã®JSããã£ã¦ãããã¨ãããã£ããããwebpackã®ãã£ã³ã¯åå²ã®è¨å®ãè¡ãå ±éé¨åãã¾ã¨ããããã«ããã¨ããCodeBuildã§ã®webpack buildã®å®è¡æéã¯174ç§ãã50ç§ã«ä¸æ°ã«ç縮ããã¾ããã
ä»åã¯æéã®é½åã§è¡ã£ã¦ãã¾ããããwebpack-bundle-analyzerã§è¦ãã¨ããããªãã®é¨åãaws-sdkãå ãã¦ãããã¨ããããã¾ãããaws-sdkãv2ããv3ã«ã¢ãããã¼ããããã¨ã§å¿ è¦ãªãµã¼ãã¹ç¨ã®ã©ã¤ãã©ãªã ããã¤ã³ã¹ãã¼ã«ãããã¨ãã§ããããã«ãªãããTree shakingãªã©ãã«ãæéãçæãã¡ã¤ã«ãµã¤ãºã®ãããªãæ¹åãå¾ããããã§ãã
ããã§ãã ããªã¨ãã®æçµæ段ãéã
ããã¾ã§ããã¤ãã®æ¹åãè¡ã£ã¦ãã¾ããããã¨ãããã ãCodeBuildã®å®è¡æéãååã«ããã«ã¯è¶³ãã¾ããã§ãããããã§æå¾ã®æ段ã§ããããéã§æ®´ããã使ã£ã¦ã¿ããã¨ã«ãã¾ããã
CodeBuildã§ã¯ãã«ãã®è¨å®ã§å©ç¨ãããã·ã³ã¹ããã¯ãå¤æ´ã§ãã¾ããããã¾ã§ä½¿ç¨ãã¦ããã3GBã¡ã¢ãª / 2vCPUãã§ä¸è¶³ãªã®ã§ããã°ãã®ä¸ã®ã7GBã¡ã¢ãª / 4vCPUãã使ç¨ãã¦ã¿ã¾ãããã
ããã«ããBUILDãã§ã¼ãºã56ç§ç縮ããã¾ãããã¾ãã«ãæã¯éãªããã§ãã
ã¡ãªã¿ã«AWS CodeBuild ã®æéã¯ãã«ãä¸åãããã®æéã§è¨ç®ãããã ãããvCPUãåã«ãªãã°æéãåã«ãªãã¾ã(ååä½ã«åãä¸ã)ãä»åã®ããã¸ã§ã¯ãã®ããã«ã¢ã»ããã®ã³ã³ãã¤ã«ã«ãããæéãããã«ããã¯ãªå ´åã«ã¯å¼·ããã·ã³ã¹ããã¯ãé¸ã¶ãã¨ã§ãã«ãæéãç縮ããããã¨ãæå¾ ã§ãã¾ããã³ã¹ããèãã¤ã¤ã¹ããã¯ãé¸æãã¾ãããã
å®æ½æ¸ã¿ã®æ¹åãã¤ã³ã
ä»åå®é¨ã«å©ç¨ããããã¸ã§ã¯ãã§ã¯æ¢ã«å®æ½æ¸ã¿ã§ãããã以ä¸ã®ãããªè¨å®ããã«ãæéåæ¸ãæå¾ ã§ãã¾ãã
webpackerãããã
docker buildã®é«éåã¨ã¯ç´æ¥ã¤ãªããã¾ããããwebpackerãããã¦ç´æ¥webpackã使ããããã«ãããã¨ã§ãRubyGemsã®ã¤ã³ã¹ãã¼ã«ãã¢ã»ããã³ã³ãã¤ã«ã®ä¾åããå¤ããã¨ãã§ãã¾ããrequest specãfeature specãå®è¡ããããã«ã¯Railsããã¢ã»ãããå©ç¨ã§ããªãã¨ãããªããããã¢ã»ããã³ã³ãã¤ã«ãBundle installã¨ä¸¦åãã¦è¡ããã¨ã«ããCIã®æéç縮ãæå¾ ã§ãã¾ãã
Rails 7ããã¯Webpackerã¯æ¨æºã§å ¥ããªããªãã2022/1/19ã«ã¯webpackerã¯ä»¥éã»ãã¥ãªãã£ãããã®ã¿ã®å¯¾å¿ã§æ©è½è¿½å ã¯å¾ç¶ã®Shakapackerã¸ã®ç§»è¡ãå¿ è¦ã«ãªãã¾ããã
Webpackerèªä½ã¯æªã§ã¯ãªãã¨ã¯æãã¾ããããªã«ããã£ã¦ãããããããRailsãwebpackã®ãã¼ã¸ã§ã³ã¢ããã®ãã³ã«webpackerã¸ã®ãã¤ã°ã¬ã¼ã·ã§ã³ã§è¦å´ãã¦ããã®ã§ç§ã®å¨ãã§ã¯è±webpackerãããã¨ãå¤ãã§ãã
Webpackerãå¤ãã¨ãã«ã¯ config/webpacker.yml
ããã³ config/webpack
ã® git logãgit blame ãè¦ã¦ã©ããªä¿®æ£ããã¦ããã確èªãã¾ãã大ããä¿®æ£ããã¦ãªãããã ã¨ããã£ããwebpackerãå¤ãã¦ãã¾ã£ã¦1ããwebpackã®è¨å®ããã¦ãã¾ãã®ã楽ãªããããªãããªã¨æã£ã¦ãã¾ã (ããã¯Webpackããããããã¼ã ã«ããå ´åãªã®ã§ç°è«ã¯èªãã¾ã)ã
ä¸åº¦webpackerãå¤ãã¦ãã¾ãã°ä»åãã£ããããªbabel => swcã®å°å ¥ãªã©ããããããªãã§ãããã
Dockerã¬ã¤ã¤ã¼ãã£ãã·ã¥ãæ´»ç¨ãã
CodeBuildã§ãDockerã¬ã¤ã¤ã¼ãã£ãã·ã¥ãå©ç¨ããè¨å®ãã§ããããã©ã¤ãã©ãªã®ã¤ã³ã¹ãã¼ã«ãDockerã®ã¬ã¤ã¤ã¼ãã£ãã·ã¥ã使ã£ã¦ã¹ããããããã¨ãæå¾ ã§ãã¾ãã
Webã¢ã»ãããå«ãRailsã¢ããªã®å ´åã
- package.json, package-lock.json (or yarn.lock) ã ããå ã«COPYãã¦ããnpm install && webpackãã
- Gemfile, Gemfile.lock ã ããå ã«COPYãã¦ããbundle installãã
ã®ããã«ã©ã¤ãã©ãªã®ã¤ã³ã¹ãã¼ã«ã«å¿ è¦ãªãã¡ã¤ã«ã ããå ã«COPYãã¦ãããã¨ã§ããã以å¤ã®ãã¡ã¤ã«ãå¤æ´ãã¦ãä¸è¨ã®ãã¡ã¤ã«ãæ´æ°ãããªãéãã¯ãã£ãã·ã¥ãæå¹ã«ãªããã¨ãæå¾ ã§ãã¾ãã
ã¾ã¨ã
ä»åå®æ½ãã工夫ã«ããCodeBuildå®è¡æéã¯9ååãã4å44ç§ã«ãªããç®æ¨ã¨ããååã®æéã«ãããã¨ãã§ãã¾ããã
- æé©ååã«ããã£ã¦ããæé 570ç§
- å©ç¨ã¤ã¡ã¼ã¸ã®ãã¼ã¸ã§ã³ã¢ããã«ããPROVISIONINGãã§ã¼ãºã®æ¹å -137ç§
- babelããswcã«å¤æ´ -18ç§
- webpackã®ãã£ã³ã¯åå² -124ç§
- CodeBuildã®ã¹ããã¯å¤æ´ -56ç§
- ãã¼ã¿ã« 570 - 335 = 235ç§
æ¹åå | æ¹åå¾ |
---|---|
ãã以ä¸ã®æé©åã¯ä»åã®ããã¸ã§ã¯ãã§ã¯ã³ã¹ããæªãããªã®ã§ãã¾ãã¯ç¤¾å ã®å¥ã®ããã¸ã§ã¯ãã§ãCodeBuildã§å¤ãã¤ã¡ã¼ã¸ã使ã£ã¦ãªããã確èªãã¦ãããã¨æãã¾ãã
ãã®è¨äºãCodeBuildã¦ã¼ã¶ã¼ãDocker Buildãé ãã¦å°ã£ã¦ããæ¹ã®åèã«ãªãã°å¹¸ãã§ãã
-
å¤ããã¦ã4.0æªæºã¯ãã¯ãAWS Consoleä¸ã§é¸æã§ãã¾ããã↩