TileCloud の開発を支える技術

2019/6/28 (金)に開催された KYOTO.git での LT のスライドです。

Transcript

1. TileCloud ͷ։ൃΛࢧ͑Δٕज़
   2019/06/28@KYOTO.git

   kamata, ryo
   

   View Slide

2. TileCloud ͱ͸ʁ
   • ஍ਤϗεςΟϯάαʔϏε
   
   • ΢ΣϒαΠτ΍ΞϓϦʹ૊ΈࠐΜͰར༻Ͱ͖·͢
   
   • ஍ਤͷλΠϧͱͦΕΛѻ͏ͨΊͷ JavaScript API Λఏڙ͍ͯ͠·͢
   
   • Φʔϓϯϕʔλʹ޲͚ͯ࡞ۀத
   

   View Slide

3. ஍ਤͷλΠϧͱ͸ʁ
   • ϥελʔλΠϧ:

   256 px ࢛ํͷը૾ϑΝΠϧෑ͖٧Ίͯ஍ਤΛදࣔ
   https://www.openstreetmap.org/copyright
   OpenStreetMap Contributors
   

   View Slide

4. ஍ਤͷλΠϧͱ͸ʁ
   • ϕΫτϧλΠϧ:

   JSON ܗࣜͷ஍෺ͷू·ΓΛόΠφϦʹϑΥʔϚοτͨ͠΋ͷ
   
   • ΫϥΠΞϯταΠυʢϒϥ΢βʣͰWebGL Λ࢖ͬͯ஍ਤΛϨ
   ϯμϦϯά
   • ϓϩύςΟΛઃఆͯ͠ΫϥΠΞϯ
   τͰσβΠϯมߋ͕Մೳ

   ʢ3D දࣔͳͲʣ
   
   • ๛͔ͳදݱྗ
   
   • σʔλ͕ܰྔ
   

   View Slide

5. TileCloud Λࢼ͢
   

   View Slide

6. TileCloud Λࢼ͢
   

   View Slide

7. TileCloud Λࢼ͢
   • ެࣜυΩϡϝϯτΛެ։தʂ https://docs.tilecloud.io
   
   • Embed API ͱ͍͏ JavaScript API ΋ެ։͍ͯ͠·͢
   
   • HTML Λهड़͢Δ͚ͩͰ஍ਤΛදࣔɾΧελϚΠζͰ
   ͖·͢
   
   • playground (https://playcode.io/290651) Ͱ؆୯ʹࢼ͢
   ͜ͱ΋Ͱ͖·͢
   

   View Slide

8. TileCloudͷ

   Πϯϑϥߏ੒ɾ։ൃ؀ڥ
   

   View Slide

9. Serverless
   • λΠϧ 

   CloudFront + Lambda@Edge + S3
   
   • Embed API (JavaScript API)

   API Gateway + Lambda + DynamoDB
   
   • μογϡϘʔυ

   Cognito + API Gateway + Lambda + DynamoDB
   

   View Slide

10. GitHub
    • ϦϙδτϦϗεςΟϯά
    
    • CI αʔϏε౳ͱͷ࿈ܞʢCircle CIɺ Netlifyʣ
    NetlifyɾGitHub Pages
    • σϞαΠτɺμογϡϘʔυɺ੩తϦιʔεͷϗεςΟϯά
    

    View Slide

11. Circle CI
    • ίϛοτͷϓογϡʹԠͯࣗ͡ಈςετΛ࣮ߦ
    
    • Scheduled job Λ࢖͍ɺ e2e ςετʢEnd to End ςετʣΛఆظ࣮ߦ

    ʢ"ಥવյΕ͍ͯΔ" ঢ়گΛݕग़ʣ
    

    View Slide

12. Circle CI
    • CD (Continuous Deployment)
    
    • Git λά͕ϓογϡ͞Εͨ࣌͸ຊ൪؀ڥʹσϓϩΠ
    
    • master ϒϥϯνͷίϛοτ͕ϓογϡ͞Εͨͱ͖͸։
    ൃ؀ڥʹσϓϩΠ
    
    • ͦͷଞͷίϛοτ͸ςετͷΈΛ࣮ߦ
    

    View Slide

13. Circle CI
    • Circle CI ͷ Workflow Λ׆༻
    
    • ఆٛͨ͠ෳ਺ͷ job ͷ࣮ߦॱ
    Λ੍ޚ
    
    • ෳࡶͳϏϧυͰ΋ɺCI ͷ࣮ߦ
    ࣌ؒͷංେΛ๷͙
    workflows:
    version: 2
    build:
    jobs:
    - test:
    filters:
    tags:
    only: /.*/
    branches:
    only: /.*/
    - deploy:
    requires:
    - build
    filters:
    tags:
    only: /.*/
    branches:
    only: master
    

    View Slide

14. Φʔτϝʔγϣϯ
    • GitHub ͱ֤छαʔϏε (CIɾNetlify ͳͲ) ͱͷΠϯςάϨʔγϣϯΛ׆༻
    • σϓϩΠɾςετͳͲͷ։ൃ޻ఔΛըҰԽ
    • CI Λ࢖͍ਝ଎ͳϑΟʔυόοΫΛಘΔ
    • Πϯϑϥߏ੒ͷࣗಈԽ
    • Serverless & CloudFormation
    ༷ʑͳϨΠϠʔͰࣗಈԽΛࢪ͠ɺଐਓԽΛ๷͙
    

    View Slide