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

TileCloud の開発を支える技術

TileCloud の開発を支える技術

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

KamataRyo

June 28, 2019
Tweet

More Decks by KamataRyo

Other Decks in Technology

Transcript

  1. TileCloud ͷ։ൃΛࢧ͑Δٕज़
    2019/06/[email protected]
    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 + [email protected] + 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