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

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

Makoto Henmi
December 22, 2018
610

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

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

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

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

Makoto Henmi

December 22, 2018
Tweet

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