2018/12/22 合同勉強会 in 大都会岡山 -2018 Winter-の発表資料。 FirebaseにはHosting機能があり、シングルページアプリケーションをデプロイする事ができます。 以前に発表した「昔懐かしい雰囲気のページ」もFirebase Hostingで運用しています。
今回の発表では、シングルページアプリケーションを
コマンドラインからデプロイする方法 CI(Travis CI)を利用した自動デプロイ について説明しました。
Firebase HostingʹSPAΛσϓϩΠͯ͠ΈΑ͏2018/12/22 ߹ಉษڧձ in େձԬࢁ -2018 Winter-גࣜձࣾΫϨΦϑʔΨ ҳݟ (@mako_wis)
View Slide
ࣗݾհw ҳݟ ΜΈ·͜ͱw 5XJUUFS!NBLP@XJTw גࣜձࣾΫϨΦϑʔΨw &OHJOFFSJOH.BOBHFSw ϑϩϯταʔόʔαΠυϚωʔδϟʔw ΦʔϓϯηϛφʔԬࢁελοϑɾ0LBZBNBSCɾதࠃํ%#ษڧձJOԬࢁ
࠷ۙͷझຯ
SPAʹ͢Δඞཁ͕ͳ͍αΠτ͚ͩͲSPAͰ࡞ͬͯ༡Ϳ
ϙʔτϑΥϦΛ࡞ͬͨΓ
ੲջ͔͍͠ϖʔδ࡞ͬͨΓ
ReactVue.js
ͲͪΒFirebase HostingΛ͍ͬͯ·͢
༨ஊ
ੲջ͔͍͠ϖʔδʹΘΕͯΔٕज़ͪ͜ΒΛࢀর
CDൢചதͰ͢
Firebase Hosting
झຯαΠτ͘Β͍Ͱ͋Ε͍͍ͩͨແྉͰ͑·͢
ࠓσϓϩΠͷ
·ͣσϓϩΠ͢ΔSPAΛ࡞
SPAΛ࡞• vue-cliͰ࡞• https://cli.vuejs.org/• create-react-appͰ࡞• https://github.com/facebook/create-react-app
Vue.jsͷ߹ͰਐΊ·͢ʢͰ͍͍ͩͨҰॹͰ͢ʣ
FirebaseϓϩδΣΫτͷ࡞
Firebaseͷઃఆྃ
Firebase CLIͰͷσϓϩΠ
Firebase CLIͷઃఆ# Firebase CLIΛΠϯετʔϧ$ npm install -g firebase-tools# FirebaseͷΞΧϯτʹϩάΠϯ$ firebase login
Firebase ϓϩδΣΫτͷઃఆ# SAPͷσΟϨΫτϦͰ࣮ߦ# ϓϩδΣΫτͷઃఆ$ firebase init hosting
ରͷfirebaseϓϩδΣΫτΛબ
buildࡁΈͷϑΝΠϧͷग़ྗઌΛೖྗVue.jsͷ߹dist
Firebase CLIͰσϓϩΠ# SAPͷϓϩδΣΫτϏϧυ# ϓϩδΣΫτͷઃఆʹΑΓ·͢$ npm run-script build# σϓϩΠ$ firebase deploy
Firebase CLIͰͷσϓϩΠྃ
खಈͷσϓϩΠΊΜͲ͍͘͞ɾɾɾ
CIͰࣗಈԽ͠·͢
Travis CIͰͷσϓϩΠ
ϦϙδτϦ࡞ˍιʔεϓογϡ
Travis CIͷՃ
GitHub MarketplaceͰTravis CIͷՃ
Travis CIΛݕࡧ͠·͢
༻͢ΔϓϥϯΛબ
ରͷϦϙδτϦΛબͼ·͢
Travis CIͷઃఆ
σϓϩΠ༻ͷtokenΛऔಘ# firebase cliΛͬͯऔಘ$ firebase login:ci
λʔϛφϧʹͬͯtokenΛ֬ೝ
Travis CIʹͬͯઃఆ
ରͷϦϙδτϦͷsettingsʹҠಈ
ઌ΄Ͳ֬ೝͨ͠tokenΛઃఆ
σϓϩΠରͷϓϩδΣΫτΛઃఆ
Travis CIଆͷઃఆྃ
ιʔείʔυଆͷઃఆ
.travis.ymlͷՃlanguage: node_jsnode_js: "8.11.1"script: npm run-script builddeploy:provider: firebaseskip_cleanup: truetoken:secure: $FIREBASE_TOKENproject: $FIREBASE_PROJECTon:branch: master
.travis.ymlͷՃlanguage: node_jsnode_js: "8.11.1"script: npm run-script builddeploy:provider: firebaseskip_cleanup: truetoken:secure: $FIREBASE_TOKENproject: $FIREBASE_PROJECTon:branch: masterbuildίϚϯυ
.travis.ymlͷՃlanguage: node_jsnode_js: "8.11.1"script: npm run-script builddeploy:provider: firebaseskip_cleanup: truetoken:secure: $FIREBASE_TOKENproject: $FIREBASE_PROJECTon:branch: masterdeployઌΛfirebase
.travis.ymlͷՃlanguage: node_jsnode_js: "8.11.1"script: npm run-script builddeploy:provider: firebaseskip_cleanup: truetoken:secure: $FIREBASE_TOKENproject: $FIREBASE_PROJECTon:branch: masterdeploy༻ͷTOKEN
.travis.ymlͷՃlanguage: node_jsnode_js: "8.11.1"script: npm run-script builddeploy:provider: firebaseskip_cleanup: truetoken:secure: $FIREBASE_TOKENproject: $FIREBASE_PROJECTon:branch: master deployઌϓϩδΣΫτ
.travis.ymlͷՃlanguage: node_jsnode_js: "8.11.1"script: npm run-script builddeploy:provider: firebaseskip_cleanup: truetoken:secure: $FIREBASE_TOKENproject: $FIREBASE_PROJECTon:branch: master masterϒϥϯνͰdeploy
ϦϙδτϦʹө
masterϒϥϯνʹө͢Δͱbuild&deploy։࢝
σϓϩΠࣗಈԽྃ
·ͱΊ
·ͱΊ• SPAΛ࡞Δ• FirebaseΛઃఆ͢Δ• Firebase CLIΛΠϯετʔϧ͢Δ• Travis CIΛઃఆ͢Δ• σϓϩΠ͕ࣗಈԽ͞ΕΔ
͓·͚
ݕূ༻ʹϓϩδΣΫτ࡞ͬͨͷͰ
͍ͭͰʹSPA࡞Γ·ͨ͠
https://pixela-gui.makowis.com
Pixela GUI• ޕޙͷൃදʹ͋ΔPixelaͷGUIΞϓϦ• ػೳάϥϑपΓ• ࡞ͬͨάϥϑͷҰཡ• άϥϑͷ࡞• άϥϑͷআ• ʢ·ͩ·ͩ࡞Γ͔͚ɾɾɾ
ωλͰ͢
͓ΘΓ