Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Universalの歩き方

Angular Universalの歩き方

mini ng-japan 2020 and GDG Dev Fest 2020

Tessei Yoshida

October 17, 2020
Tweet

More Decks by Tessei Yoshida

Other Decks in Programming

Transcript

  1. IUUQTDECSFBDUUSBJOJOHDPNVOJWFSTBMKBWBTDSJQUCBF 6OJWFSTBM “It’s true that there are two hard problems

    in computer science and one of them is naming things. Why? Because good names are important. A good name teaches about purpose and responsibility, so you have to spend some time thinking about it. So let’s give our JavaScript code a name that people can understand; a name that indicates what it actually does instead of introducing words into the common vernacular that clearly don’t belong there; a name that teaches people that it runs not only on servers and browsers, but on native devices and embedded architectures as well. Let’s call it Universal JavaScript."
  2. w &YQSFTT&OHJOF w /PEFKTͰ࣮ߦ͞ΕΔ8FC'SBNFXPSL w "41/&5$PSF&OHJOF w "41/&5$PSFΛར༻ͯ͠443͕Ͱ͖Δ w )BQJ&OHJOF

    w /PEFKTͰ࣮ߦ͞ΕΔ4FDVSF'SFNFXPSL w 4PDLFU&OHJOF w 5$1ιέοτͰల։Ͱ͖Δ FOHJOFΛܾΊΔ 6OJWFSTBMΛΠϯετʔϧ
  3. 6OJWFSTBMͷΠϯετʔϧ % ng add @nguniversal/express-engine Installing packages for tooling via

    npm. Installed packages for tooling via npm. Option "tsconfigFileName" is deprecated: This option has no effect. CREATE src/main.server.ts (298 bytes) CREATE src/app/app.server.module.ts (318 bytes) CREATE tsconfig.server.json (396 bytes) CREATE server.ts (2029 bytes) UPDATE package.json (1630 bytes) UPDATE angular.json (5018 bytes) UPDATE src/main.ts (432 bytes) UPDATE src/app/app.module.ts (438 bytes) UPDATE src/app/app-routing.module.ts (283 bytes) ✔ Packages installed successfully.
  4. 1BDLBHFKTPO TDSJQUT\ OHOH  TUBSUOHTFSWF  CVJMEOHCVJME  UFTUOHUFTU 

    MJOUOHMJOU  FFOHFF  EFWTTSOHSVOHEHTFSWFTTS  TFSWFTTSOPEFEJTUHEHTFSWFSNBJOKT  CVJMETTSOHCVJMEQSPEOHSVOHEHTFSWFSQSPEVDUJPO  QSFSFOEFSOHSVOHEHQSFSFOEFS ^ 
  5. 6OJWFSTBMΛىಈ % npm run dev:ssr ✹ ✭ > [email protected] dev:ssr

    /Users/teyosh/Work/Test/gdg/gdg > ng run gdg:serve-ssr **************************************************************************************** This is a simple server for use in testing or debugging Angular applications locally. It hasn't been reviewed for security issues. DON'T USE IT FOR PRODUCTION! **************************************************************************************** Compiling @angular/animations : es2015 as esm2015 Compiling @angular/common/http : es2015 as esm2015 Compiling @nguniversal/express-engine/tokens : es2015 as esm2015 Compiling @angular/animations/browser : es2015 as esm2015 Compiling @angular/platform-browser/animations : es2015 as esm2015 Compiling @angular/platform-server : es2015 as esm2015 Compiling @nguniversal/express-engine : es2015 as esm2015 chunk {main} main.js, main.js.map (main) 58.7 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered] chunk {styles} styles.css, styles.css.map (styles) 119 bytes [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 2.29 MB [initial] [rendered] Date: 2020-10-16T14:25:09.886Z - Hash: eddb4e617064991b3665 - Time: 7071ms Hash: 7f72dd16c9cfc84501ba Time: 10935ms Built at: 2020-10-16 23:25:11 Asset Size Chunks Chunk Names main.js 5.86 MiB main [emitted] [big] main main.js.map 5.87 MiB main [emitted] [dev] main Entrypoint main [big] = main.js main.js.map chunk {main} main.js, main.js.map (main) 5.29 MiB [entry] [rendered] Compiled successfully. Hash: 7f72dd16c9cfc84501ba Time: 324ms Built at: 2020-10-16 23:25:12 Asset Size Chunks Chunk Names main.js 5.86 MiB main [big] main main.js.map 5.87 MiB main [dev] main Entrypoint main [big] = main.js main.js.map chunk {main} main.js, main.js.map (main) 5.29 MiB [entry] ** Angular Universal Live Development Server is listening on http://localhost:4200, open your browser on http://localhost:4200 ** Compiled successfully.
  6. $43 )5.-ͷҧ͍ EPDUZQFIUNM IUNMMBOHFO IFBE NFUBDIBSTFUVUG UJUMF(EHUJUMF CBTFISFG NFUBOBNFWJFXQPSUDPOUFOUXJEUIEFWJDFXJEUI JOJUJBMTDBMF

    MJOLSFMJDPOUZQFJNBHFYJDPOISFGGBWJDPOJDP IFBE CPEZ BQQSPPUBQQSPPU TDSJQUTSDSVOUJNFKTEFGFSTDSJQUTDSJQUTSDQPMZpMMTKTEFGFSTDSJQUTDSJQUTSDTUZMFTKTEFGFS TDSJQUTDSJQUTSDWFOEPSKTEFGFSTDSJQUTDSJQUTSDNBJOKTEFGFSTDSJQUCPEZ IUNM
  7. 443 )5.-ͷҧ͍ %0$5:1&IUNMIUNMMBOHFOIFBE NFUBDIBSTFUVUG UJUMF(EHUJUMF CBTFISFG NFUBOBNFWJFXQPSUDPOUFOUXJEUIEFWJDFXJEUI JOJUJBMTDBMFz MJOLSFMJDPOUZQFJNBHFYJDPOISFGGBWJDPOJDP MJOLSFMTUZMFTIFFUISFGTUZMFTDTTTUZMFOHUSBOTJUJPOTFSWFS"QQTUZMFIFBE

    CPEZ BQQSPPU@OHIPTUTDOHWFSTJPOQ@OHDPOUFOUTD)FMMP (%(%FW'FTU!)0.&QSPVUFS PVUMFU@OHDPOUFOUTDSPVUFSPVUMFUDPOUBJOFSBQQSPPU TDSJQUTSDSVOUJNFKTEFGFSTDSJQUTDSJQUTSDQPMZpMMTKTEFGFSTDSJQUTDSJQUTSDWFOEPSKTEFGFS TDSJQUTDSJQUTSDNBJOKTEFGFSTDSJQU CPEZIUNM
  8. 1-"5'03.@*%Λར༻ 4FSWFSͱ$MJFOUͷ൑ผ BQQBQQDPNQPOFOUUT DPOTUSVDUPS  !*OKFDU 1-"5'03.@*% QSJWBUFSFBEPOMZQMBUGPSN*E  \^

    JG JT1MBUGPSN4FSWFS UIJTQMBUGPSN*E \ αʔόͰͷॲཧ ^ JG JT1MBUGPSN#SPXTFS UIJTQMBUGPSN*E \ ϒϥ΢βͰͷॲཧ ^
  9. 5SBOTGFS4UBUF.PEVMFͷ௥Ճ αʔόͷ࣮ߦ݁ՌΛར༻ BQQBQQNPEVMFUT !/H.PEVMF \ EFDMBSBUJPOT<"QQ$PNQPOFOU>  JNQPSUT< #SPXTFS.PEVMFXJUI4FSWFS5SBOTJUJPO \BQQ*ETFSWFS"QQ^

     "QQ3PVUJOH.PEVMF  #SPXTFS5SBOTGFS4UBUF.PEVMF  >  QSPWJEFST<>  CPPUTUSBQ<"QQ$PNQPOFOU>  ^  BQQBQQTFSWFSNPEVMFUT !/H.PEVMF \ JNQPSUT<"QQ.PEVMF 4FSWFS.PEVMF 4FSWFS5SBOTGFS4UBUF.PEVMF>  CPPUTUSBQ<"QQ$PNQPOFOU>  ^
  10. ड͚౉͠ํ๏ αʔόͷ࣮ߦ݁ՌΛར༻ BQQBQQDPNQPOFOUUT FYQPSUDMBTT"QQ$PNQPOFOUJNQMFNFOUT0O*OJU\ UJUMFHEH MPD)0.& DPOTUSVDUPS  QSJWBUFUSBOTGFS4UBUF5SBOTGFS4UBUF 

    !*OKFDU 1-"5'03.@*% QSJWBUFSFBEPOMZQMBUGPSN*E  \^ OH0O*OJU \ JG JT1MBUGPSN4FSWFS UIJTQMBUGPSN*E \ UIJTUSBOTGFS4UBUFTFU 45"5&@,&: 50,:0  ^FMTF\ UIJTMPDUIJTUSBOTGFS4UBUFHFU 45"5&@,&: )0.&  ^ ^ ^
  11. w "1*௨৴Λ൐ͬͨॲཧͷ৔߹ w αʔόͰ"1*͔ΒσʔλΛऔಘ w ϒϥ΢βͰදࣔޙ"1*͔ΒσʔλΛऔಘ "1*ͱͷ௨৴ͷ੍ޚ BQQBQQDPNQPOFOUUT OH0O*OJU \

    UIJTIUUQ HFU IUUQMPDBMIPTUBTTFUTEBUBKTPO  TVCTDSJCF EBUB \ UIJTMPDEBUB<MPDBUJPO> ^  ^
  12. 5SBOTGFS)UUQ$BDIF.PEVMFΛ࢖͏ ճ"1*௨৴ΛߦΘͤͳ͍ BQQBQQNPEVMFUT JNQPSU\5SBOTGFS)UUQ$BDIF.PEVMF^GSPN!OHVOJWFSTBMDPNNPO !/H.PEVMF \ EFDMBSBUJPOT<"QQ$PNQPOFOU>  JNQPSUT< #SPXTFS.PEVMFXJUI4FSWFS5SBOTJUJPO

    \BQQ*ETFSWFS"QQ^  "QQ3PVUJOH.PEVMF  5SBOTGFS)UUQ$BDIF.PEVMF  )UUQ$MJFOU.PEVMF  >  QSPWJEFST<>  CPPUTUSBQ<"QQ$PNQPOFOU>  ^ 
  13. )5.- BQQSPPU@OHIPTUTDOHWFSTJPOQ@OHDPOUFOUTD)FMMP (%(%FW'FTU!803-%QSPVUFSPVUMFU @OHDPOUFOUTDSPVUFSPVUMFUDPOUBJOFSBQQSPPU TDSJQUTSDSVOUJNFKTEFGFSTDSJQUTDSJQUTSDQPMZpMMTKTEFGFSTDSJQUTDSJQUTSDWFOEPSKTEFGFS TDSJQUTDSJQUTSDNBJOKTEFGFSTDSJQU TDSJQUJETFSWFS"QQTUBUFUZQFBQQMJDBUJPOKTPO\R(IUUQMPDBMIPTUBTTFUTEBUBKTPO R\RCPEZR \RMPDBUJPORR803-%R^ RIFBEFSTR\RYQPXFSFECZR<R&YQSFTTR>

    RBDDFQUSBOHFTR <RCZUFTR> RMBTUNPEJpFER<R4BU 0DU(.5R> RFUBHR<R8 aRFECDFaRR> RDPOUFOUUZQFR<RBQQMJDBUJPOKTPODIBSTFU65'R> RDPOUFOUMFOHUIR <RR> REBUFR<R4BU 0DU(.5R> RDPOOFDUJPOR <RDMPTFR>^ RTUBUVTR RTUBUVT5FYURR0,R RVSMRRIUUQMPDBMIPTUBTTFUTEBUBKTPOR^^TDSJQU
  14. w +BWB4DSJQU"QJ.BSLVQ w #FTU1FSGPSNBODF w )JHIFS4FDVSJUZ w $IFBQFS &BTJFS4DBMJOH w

    #FUUFS%FWFMPQFS&YQFSJFODF Ή͔͠.&"/TUBDLͱ͍͏ͷ͕͋ͬͯ͡Όͳ +BNTUBDLʹ͍ͭͯ IUUQTKBNTUBDLPSH
  15. 6OJWFSTBMʹ΋ඪ४౥ࡌ 1SFSFOEFSͷ঺հ TDSJQUT\ OHOH  TUBSUOHTFSWF  CVJMEOHCVJME  UFTUOHUFTU

     MJOUOHMJOU  FFOHFF  EFWTTSOHSVOHEHTFSWFTTS  TFSWFTTSOPEFEJTUHEHTFSWFSNBJOKT  CVJMETTSOHCVJMEQSPEOHSVOHEHTFSWFSQSPEVDUJPO   QSFSFOEFSOHSVOHEHQSFSFOEFS ^ 
  16. 1SFSFOEFSͷ࣮ߦ % npm run prerender > [email protected] prerender /Users/teyosh/Work/Test/gdg/gdg >

    ng run gdg:prerender chunk {} runtime.acf0dec4155e77772545.js (runtime) 1.45 kB [entry] [rendered] chunk {1} main.e720befda9b6b3a4212b.js (main) 203 kB [initial] [rendered] chunk {2} polyfills.35a5ca1855eb057f016a.js (polyfills) 36 kB [initial] [rendered] chunk {3} styles.3ff695c00d717f2d2a11.css (styles) 0 bytes [initial] [rendered] Date: 2020-10-17T00:49:06.437Z - Hash: 34e5b891c698e3390b3b - Time: 15804ms Hash: cb973389017b93bd9133 Time: 15830ms Built at: 2020-10-17 9:49:07 Asset Size Chunks Chunk Names main.js 2.66 MiB 0 [emitted] [big] main Entrypoint main [big] = main.js chunk {0} main.js (main) 5.09 MiB [entry] [rendered] Prerendering 1 route(s) to /Users/teyosh/Work/Test/gdg/gdg/dist/gdg/browser CREATE /Users/teyosh/Work/Test/gdg/gdg/dist/gdg/browser/index.html (1274 bytes)
  17. )5.- %0$5:1&IUNMIUNMMBOHFOIFBE NFUBDIBSTFUVUG UJUMF(EHUJUMF CBTFISFG NFUBOBNFWJFXQPSUDPOUFOUXJEUIEFWJDFXJEUI JOJUJBMTDBMF MJOLSFMJDPOUZQFJNBHFYJDPOISFGGBWJDPOJDP MJOLSFMTUZMFTIFFUISFGTUZMFT⒎DEGEBDTTTUZMFOHUSBOTJUJPOTFSWFS"QQTUZMFIFBE CPEZ

    BQQSPPU@OHIPTUTDOHWFSTJPOQ@OHDPOUFOUTD)FMMP (%(%FW'FTU!803-%QSPVUFSPVUMFU @OHDPOUFOUTDSPVUFSPVUMFUBQQSPPU TDSJQUTSDSVOUJNFBDGEFDFKTEFGFSTDSJQUTDSJQUTSDQPMZpMMTBDBFCGBKT EFGFSTDSJQUTDSJQUTSDNBJOFCFGEBCCBCKTEFGFSTDSJQU TDSJQUJETFSWFS"QQTUBUFUZQFBQQMJDBUJPOKTPO\R(IUUQMPDBMIPTUEBUBKTPO R\RCPEZR \RMPDBUJPORR803-%R^ RIFBEFSTR\RTFSWFSR<R4JNQMF)5511ZUIPOR> REBUFR<R4BU  0DU(.5R> RDPOUFOUUZQFR<RBQQMJDBUJPOKTPOR> RDPOUFOUMFOHUIR<RR> RMBTUNPEJpFER <R'SJ 0DU(.5R>^ RTUBUVTR RTUBUVT5FYURR0,R RVSMRRIUUQMPDBMIPTU EBUBKTPOR^^TDSJQUCPEZIUNM5IJTQBHFXBTQSFSFOEFSFEXJUI"OHVMBS6OJWFSTBM
  18. w OHBEE!BOHVMBSQXBΛ࣮ߦ͢Δ͚ͩ 18"ͷ࣮૷ % ng add @angular/pwa Installing packages for

    tooling via npm. Installed packages for tooling via npm. CREATE ngsw-config.json (624 bytes) CREATE src/manifest.webmanifest (1330 bytes) CREATE src/assets/icons/icon-128x128.png (1253 bytes) CREATE src/assets/icons/icon-144x144.png (1394 bytes) CREATE src/assets/icons/icon-152x152.png (1427 bytes) CREATE src/assets/icons/icon-192x192.png (1790 bytes) CREATE src/assets/icons/icon-384x384.png (3557 bytes) CREATE src/assets/icons/icon-512x512.png (5008 bytes) CREATE src/assets/icons/icon-72x72.png (792 bytes) CREATE src/assets/icons/icon-96x96.png (958 bytes) UPDATE angular.json (5191 bytes) UPDATE package.json (1711 bytes) UPDATE src/app/app.module.ts (846 bytes) UPDATE src/index.html (471 bytes) ✔ Packages installed successfully.