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)
   

   View Slide

2. ࣗݾ঺հ
   w ҳݟ੣ ΁ΜΈ·͜ͱ
   
   w 5XJUUFS!NBLP@XJT
   w גࣜձࣾΫϨΦϑʔΨ
   w &OHJOFFSJOH.BOBHFS
   w ϑϩϯταʔόʔαΠυϚωʔδϟʔ
   w ΦʔϓϯηϛφʔԬࢁελοϑɾ0LBZBNBSCɾதࠃ஍
   ํ%#ษڧձJOԬࢁ
   

   View Slide

3. ࠷ۙͷझຯ
   

   View Slide

4. SPAʹ͢Δඞཁ͕ͳ͍αΠτ
   ͚ͩͲSPAͰ࡞ͬͯ༡Ϳ
   

   View Slide

5. ϙʔτϑΥϦΛ࡞ͬͨΓ
   

   View Slide

6. ੲջ͔͍͠ϖʔδ࡞ͬͨΓ
   

   View Slide

7. React
   Vue.js
   

   View Slide

8. ͲͪΒ΋Firebase HostingΛ
   ࢖͍ͬͯ·͢
   

   View Slide

9. ༨ஊ
   

   View Slide

10. ੲջ͔͍͠ϖʔδʹ࢖ΘΕͯΔٕज़͸ͪ͜ΒΛࢀর
    

    View Slide

11. CDൢചதͰ͢
    

    View Slide

12. Firebase Hosting
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. झຯαΠτ͘Β͍Ͱ͋Ε͹͍͍ͩͨແྉͰ࢖͑·͢
    

    View Slide

17. ࠓ೔͸σϓϩΠͷ࿩
    

    View Slide

18. ·ͣ͸σϓϩΠ͢Δ
    SPAΛ࡞੒
    

    View Slide

19. SPAΛ࡞੒
    • vue-cliͰ࡞੒
    • https://cli.vuejs.org/
    • create-react-appͰ࡞੒
    • https://github.com/facebook/create-react-
    app
    

    View Slide

20. Vue.jsͷ৔߹ͰਐΊ·͢
    ʢͰ΋͍͍ͩͨҰॹͰ͢ʣ
    

    View Slide

21. FirebaseϓϩδΣΫτͷ࡞੒
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. Firebaseͷઃఆ׬ྃ
    

    View Slide

30. Firebase CLIͰͷσϓϩΠ
    

    View Slide

31. Firebase CLIͷઃఆ
    # Firebase CLIΛΠϯετʔϧ
    $ npm install -g firebase-tools
    # FirebaseͷΞΧ΢ϯτʹϩάΠϯ
    $ firebase login
    

    View Slide

32. Firebase ϓϩδΣΫτͷઃఆ
    # SAPͷσΟϨΫτϦͰ࣮ߦ
    # ϓϩδΣΫτͷઃఆ
    $ firebase init hosting
    

    View Slide

33. View Slide

34. ର৅ͷfirebaseϓϩδΣΫτΛબ୒
    

    View Slide

35. View Slide

36. buildࡁΈͷϑΝΠϧͷग़ྗઌΛೖྗ
    Vue.jsͷ৔߹͸dist
    

    View Slide

37. View Slide

38. Firebase CLIͰσϓϩΠ
    # SAPͷϓϩδΣΫτϏϧυ
    # ϓϩδΣΫτͷઃఆʹΑΓ·͢
    $ npm run-script build
    # σϓϩΠ
    $ firebase deploy
    

    View Slide

39. Firebase CLIͰͷ
    σϓϩΠ׬ྃ
    

    View Slide

40. खಈͷσϓϩΠ͸
    ΊΜͲ͍͘͞ɾɾɾ
    

    View Slide

41. CIͰࣗಈԽ͠·͢
    

    View Slide

42. Travis CIͰͷσϓϩΠ
    

    View Slide

43. ϦϙδτϦ࡞੒ˍιʔεϓογϡ
    

    View Slide

44. Travis CIͷ௥Ճ
    

    View Slide

45. GitHub MarketplaceͰTravis CIͷ௥Ճ
    

    View Slide

46. Travis CIΛݕࡧ͠·͢
    

    View Slide

47. ࢖༻͢ΔϓϥϯΛબ୒
    

    View Slide

48. View Slide

49. ର৅ͷϦϙδτϦΛબͼ·͢
    

    View Slide

50. View Slide

51. View Slide

52. Travis CIͷઃఆ
    

    View Slide

53. σϓϩΠ༻ͷtokenΛऔಘ
    # firebase cliΛ࢖ͬͯऔಘ
    $ firebase login:ci
    

    View Slide

54. View Slide

55. View Slide

56. View Slide

57. λʔϛφϧʹ໭ͬͯ
    tokenΛ֬ೝ
    

    View Slide

58. Travis CIʹ໭ͬͯઃఆ
    

    View Slide

59. ର৅ͷϦϙδτϦͷsettingsʹҠಈ
    

    View Slide

60. ઌ΄Ͳ֬ೝͨ͠tokenΛઃఆ
    

    View Slide

61. σϓϩΠର৅ͷϓϩδΣΫτΛઃఆ
    

    View Slide

62. Travis CIଆͷઃఆ׬ྃ
    

    View Slide

63. ιʔείʔυଆͷઃఆ
    

    View Slide

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
    

    View Slide

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ίϚϯυ
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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ઌϓϩδΣΫτ
    

    View Slide

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
    

    View Slide

70. ϦϙδτϦʹ൓ө
    

    View Slide

71. masterϒϥϯνʹ൓ө͢Δͱ
    build&deploy։࢝
    

    View Slide

72. View Slide

73. σϓϩΠࣗಈԽ׬ྃ
    

    View Slide

74. ·ͱΊ
    

    View Slide

75. ·ͱΊ
    • SPAΛ࡞Δ
    • FirebaseΛઃఆ͢Δ
    • Firebase CLIΛΠϯετʔϧ͢Δ
    • Travis CIΛઃఆ͢Δ
    • σϓϩΠ͕ࣗಈԽ͞ΕΔ
    

    View Slide

76. ͓·͚
    

    View Slide

77. ݕূ༻ʹϓϩδΣΫτ
    ࡞ͬͨͷͰ
    

    View Slide

78. ͍ͭͰʹSPA࡞Γ·ͨ͠
    

    View Slide

79. View Slide

80. https://pixela-gui.makowis.com
    

    View Slide

81. Pixela GUI
    • ޕޙͷൃදʹ͋ΔPixelaͷGUIΞϓϦ
    • ػೳ͸άϥϑपΓ
    • ࡞ͬͨάϥϑͷҰཡ
    • άϥϑͷ࡞੒
    • άϥϑͷ࡟আ
    • ʢ·ͩ·ͩ࡞Γ͔͚ɾɾɾ
    

    View Slide

82. ωλͰ͢
    

    View Slide

83. ͓ΘΓ
    

    View Slide