Firebase Hostingにシングルページアプリケーションをデプロイしてみよう #gbdaitokai

2018/12/22 合同勉強会 in 大都会岡山 -2018 Winter-の発表資料。
FirebaseにはHosting機能があり、シングルページアプリケーションをデプロイする事ができます。 以前に発表した「昔懐かしい雰囲気のページ」もFirebase Hostingで運用しています。

今回の発表では、シングルページアプリケーションを

コマンドラインからデプロイする方法
CI（Travis CI）を利用した自動デプロイ
について説明しました。

Transcript

1. Firebase HostingʹSPAΛ σϓϩΠͯ͠ΈΑ͏ 2018/12/22 ߹ಉษڧձ in େ౎ձԬࢁ -2018 Winter- גࣜձࣾΫϨΦϑʔΨ ҳݟ ੣(@mako_wis)
2. ࣗݾ঺հ w ҳݟ
   ੣ ΁ΜΈ
   ·͜ͱ
   w 5XJUUFS!NBLP@XJT
   w גࣜձࣾΫϨΦϑʔΨ
   w &OHJOFFSJOH
   .BOBHFS
   w ϑϩϯταʔόʔαΠυϚωʔδϟʔ
   w ΦʔϓϯηϛφʔԬࢁελοϑɾ0LBZBNBSCɾதࠃ஍ ํ%#ษڧձ
   JO
   Ԭࢁ
3. ࠷ۙͷझຯ
4. SPAʹ͢Δඞཁ͕ͳ͍αΠτ ͚ͩͲSPAͰ࡞ͬͯ༡Ϳ
5. ϙʔτϑΥϦΛ࡞ͬͨΓ
6. ੲջ͔͍͠ϖʔδ࡞ͬͨΓ
7. React Vue.js
8. ͲͪΒ΋Firebase HostingΛ ࢖͍ͬͯ·͢
9. ༨ஊ
10. ੲջ͔͍͠ϖʔδʹ࢖ΘΕͯΔٕज़͸ͪ͜ΒΛࢀর
11. CDൢചதͰ͢
12. Firebase Hosting
16. झຯαΠτ͘Β͍Ͱ͋Ε͹͍͍ͩͨແྉͰ࢖͑·͢
17. ࠓ೔͸σϓϩΠͷ࿩
18. ·ͣ͸σϓϩΠ͢Δ SPAΛ࡞੒
19. SPAΛ࡞੒ • vue-cliͰ࡞੒ • https://cli.vuejs.org/ • create-react-appͰ࡞੒ • https://github.com/facebook/create-react- app
20. Vue.jsͷ৔߹ͰਐΊ·͢ ʢͰ΋͍͍ͩͨҰॹͰ͢ʣ
21. FirebaseϓϩδΣΫτͷ࡞੒
29. Firebaseͷઃఆ׬ྃ
30. Firebase CLIͰͷσϓϩΠ
31. Firebase CLIͷઃఆ # Firebase CLIΛΠϯετʔϧ $ npm install -g firebase-tools # FirebaseͷΞΧ΢ϯτʹϩάΠϯ $ firebase login
32. Firebase ϓϩδΣΫτͷઃఆ # SAPͷσΟϨΫτϦͰ࣮ߦ # ϓϩδΣΫτͷઃఆ $ firebase init hosting
34. ର৅ͷfirebaseϓϩδΣΫτΛબ୒
36. buildࡁΈͷϑΝΠϧͷग़ྗઌΛೖྗ Vue.jsͷ৔߹͸dist
38. Firebase CLIͰσϓϩΠ # SAPͷϓϩδΣΫτϏϧυ # ϓϩδΣΫτͷઃఆʹΑΓ·͢ $ npm run-script build # σϓϩΠ $ firebase deploy
39. Firebase CLIͰͷ σϓϩΠ׬ྃ
40. खಈͷσϓϩΠ͸ ΊΜͲ͍͘͞ɾɾɾ
41. CIͰࣗಈԽ͠·͢
42. Travis CIͰͷσϓϩΠ
43. ϦϙδτϦ࡞੒ˍιʔεϓογϡ
44. Travis CIͷ௥Ճ
45. GitHub MarketplaceͰTravis CIͷ௥Ճ
46. Travis CIΛݕࡧ͠·͢
47. ࢖༻͢ΔϓϥϯΛબ୒
49. ର৅ͷϦϙδτϦΛબͼ·͢
52. Travis CIͷઃఆ
53. σϓϩΠ༻ͷtokenΛऔಘ # firebase cliΛ࢖ͬͯऔಘ $ firebase login:ci
57. λʔϛφϧʹ໭ͬͯ tokenΛ֬ೝ
58. Travis CIʹ໭ͬͯઃఆ
59. ର৅ͷϦϙδτϦͷsettingsʹҠಈ
60. ઌ΄Ͳ֬ೝͨ͠tokenΛઃఆ
61. σϓϩΠର৅ͷϓϩδΣΫτΛઃఆ
62. Travis CIଆͷઃఆ׬ྃ
63. ιʔείʔυଆͷઃఆ
64. .travis.ymlͷ௥Ճ language: node_js node_js: "8.11.1" script: npm run-script build deploy: provider: firebase skip_cleanup: true token: secure: $FIREBASE_TOKEN project: $FIREBASE_PROJECT on: branch: master
65. .travis.ymlͷ௥Ճ language: node_js node_js: "8.11.1" script: npm run-script build deploy: provider: firebase skip_cleanup: true token: secure: $FIREBASE_TOKEN project: $FIREBASE_PROJECT on: branch: master buildίϚϯυ
66. .travis.ymlͷ௥Ճ language: node_js node_js: "8.11.1" script: npm run-script build deploy: provider: firebase skip_cleanup: true token: secure: $FIREBASE_TOKEN project: $FIREBASE_PROJECT on: branch: master deployઌΛfirebase
67. .travis.ymlͷ௥Ճ language: node_js node_js: "8.11.1" script: npm run-script build deploy: provider: firebase skip_cleanup: true token: secure: $FIREBASE_TOKEN project: $FIREBASE_PROJECT on: branch: master deploy༻ͷTOKEN
68. .travis.ymlͷ௥Ճ language: node_js node_js: "8.11.1" script: npm run-script build deploy: provider: firebase skip_cleanup: true token: secure: $FIREBASE_TOKEN project: $FIREBASE_PROJECT on: branch: master deployઌϓϩδΣΫτ
69. .travis.ymlͷ௥Ճ language: node_js node_js: "8.11.1" script: npm run-script build deploy: provider: firebase skip_cleanup: true token: secure: $FIREBASE_TOKEN project: $FIREBASE_PROJECT on: branch: master masterϒϥϯνͰdeploy
70. ϦϙδτϦʹ൓ө
71. masterϒϥϯνʹ൓ө͢Δͱ build&deploy։࢝
73. σϓϩΠࣗಈԽ׬ྃ
74. ·ͱΊ
75. ·ͱΊ • SPAΛ࡞Δ • FirebaseΛઃఆ͢Δ • Firebase CLIΛΠϯετʔϧ͢Δ • Travis CIΛઃఆ͢Δ • σϓϩΠ͕ࣗಈԽ͞ΕΔ
76. ͓·͚
77. ݕূ༻ʹϓϩδΣΫτ ࡞ͬͨͷͰ
78. ͍ͭͰʹSPA࡞Γ·ͨ͠
80. https://pixela-gui.makowis.com
81. Pixela GUI • ޕޙͷൃදʹ͋ΔPixelaͷGUIΞϓϦ • ػೳ͸άϥϑपΓ • ࡞ͬͨάϥϑͷҰཡ • άϥϑͷ࡞੒ • άϥϑͷ࡟আ • ʢ·ͩ·ͩ࡞Γ͔͚ɾɾɾ
82. ωλͰ͢
83. ͓ΘΓ