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

D8becf939cfb6d977394016667eca429?s=47 Makoto Henmi
December 22, 2018
440

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

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

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

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

D8becf939cfb6d977394016667eca429?s=128

Makoto Henmi

December 22, 2018
Tweet

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

  13. None
  14. None
  15. None
  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ϓϩδΣΫτͷ࡞੒

  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. Firebaseͷઃఆ׬ྃ

  30. Firebase CLIͰͷσϓϩΠ

  31. Firebase CLIͷઃఆ # Firebase CLIΛΠϯετʔϧ $ npm install -g firebase-tools

    # FirebaseͷΞΧ΢ϯτʹϩάΠϯ $ firebase login
  32. Firebase ϓϩδΣΫτͷઃఆ # SAPͷσΟϨΫτϦͰ࣮ߦ # ϓϩδΣΫτͷઃఆ $ firebase init hosting

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

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

  37. None
  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. ࢖༻͢ΔϓϥϯΛબ୒

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

  50. None
  51. None
  52. Travis CIͷઃఆ

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

  54. None
  55. None
  56. None
  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։࢝

  72. None
  73. σϓϩΠࣗಈԽ׬ྃ

  74. ·ͱΊ

  75. ·ͱΊ • SPAΛ࡞Δ • FirebaseΛઃఆ͢Δ • Firebase CLIΛΠϯετʔϧ͢Δ • Travis

    CIΛઃఆ͢Δ • σϓϩΠ͕ࣗಈԽ͞ΕΔ
  76. ͓·͚

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

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

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

  81. Pixela GUI • ޕޙͷൃදʹ͋ΔPixelaͷGUIΞϓϦ • ػೳ͸άϥϑपΓ • ࡞ͬͨάϥϑͷҰཡ • άϥϑͷ࡞੒

    • άϥϑͷ࡟আ • ʢ·ͩ·ͩ࡞Γ͔͚ɾɾɾ
  82. ωλͰ͢

  83. ͓ΘΓ