$30 off During Our Annual Pro Sale. View Details »

Flutter開発とGitHub Actions

yorifuji
October 26, 2023

Flutter開発とGitHub Actions

yorifuji

October 26, 2023
Tweet

More Decks by yorifuji

Other Decks in Programming

Transcript

  1. Flutter։ൃͱGitHub Actions
    YORIFUJI MITSUNORI


    ORION SALON #31

    View Slide

  2. ࣗݾ঺հ
    • YORIFUJI MITSUNORI


    • @yorifuji on X/GitHub/Zenn


    • ۚ༥ܥελʔτΞοϓͷiOSΤϯδχΞ

    View Slide

  3. CIαʔϏεઓࠃ࣌୅ʁ

    View Slide

  4. GitHub Actions


    https://github.co.jp/features/actions

    View Slide

  5. GitHub ActionsͰࣗಈԽ͍ͯ͠Δ࡞ۀ
    • Check(formatter/lint)



    fl
    utter format



    fl
    utter analyze


    • Test


    • Unit/Widget/Integration Test


    • VRT(Visual Regression Test)


    • Build & Deploy


    • Staging(Firebase App Distribution)


    • Production(Google Play, App Store)


    • Bump up


    • pubspec.yml ͷ versionߋ৽&PR࡞੒


    • Nightly build


    View Slide

  6. FlutterͷCI؀ڥͱͯ͠


    GitHub ActionsΛ


    ࠾༻͢Δཧ༝Λߟ͑ͯΈͨ

    View Slide

  7. ਪ͠ཁૉΛϦετΞοϓʂ
    GitHub Actionsͷ͓͢͢ΊϙΠϯτ


    • GitHubʹ෇ଐ͍ͯ͠ΔͷͰ͙͢ʹ࢖͍࢝ΊΒΕΔ


    • GitHubͰൃੜ͢ΔΠϕϯτ͕ར༻Ͱ͖Δ


    • ύϒϦοΫϦϙδτϦ͸ແྉɺຖ݄Ұఆͷແྉ࿮͋Γ


    • αʔυύʔςΟʔͷΞΫγϣϯ͕๛෋


    • ΧελϚΠζੑ͕ߴ͍


    • ແྉϓϥϯͰ࠷େ20ฒྻ·Ͱδϣϒ͕࣮ߦͰ͖Δ


    • Self-hosted runner͕࢖͑Δ


    • VSCode Extension͕ศར


    • υΩϡϝϯτ͕๛෋ɺ೔ຊޠ຋༁͋Γ
    Flutter։ൃͰͷ͓͢͢ΊϙΠϯτ


    • FlutterSDKͷΠϯετʔϧ͕؆୯


    • ϫʔΫϑϩʔ΍λʔήοτʹ߹ΘͤͯRunnerͷ࢖͍
    ෼͚͕Ͱ͖Δ


    • ։ൃ؀ڥʢXcodeͳͲʣ͸ෳ਺όʔδϣϯ͕Πϯε
    τʔϧࡁΈ


    • Windows, Linux, macOSΛ࢖ͬͯϏϧυͰ͖Δ


    • ෳ਺ͷJobΛฒྻʹಉ࣮࣌ߦͰ͖Δ


    • Check΍AndroidͱiOSͷ build & deploy

    View Slide

  8. Ұ͚ͭͩڍ͛Δͱͨ͠Β

    View Slide

  9. ύϒϦοΫϦϙδτϦ͸ແྉɺຖ݄Ұఆͷແྉ࿮͋Γ

    View Slide

  10. GitHubͰൃੜ͢ΔΠϕϯτͱͷ࿈ܞ
    • ଞͷCIαʔϏεͰ͸PUSHɾPRɾTagͳͲͷGitʹؔ͢ΔτϦΨʔΛαϙʔτ


    • GitHub ActionsͰ͸GitHubͰൃੜ͢ΔΠϕϯτΛϫʔΫϑϩʔʢδϣϒʣ࣮ߦͷ
    τϦΨʔʹ͢Δ͜ͱ͕Ͱ͖Δ


    • ྫɿIssue΍PRʹ಺༰ʹ߹ΘͤͯLabelΛ͚ͭΔ


    • GitHub Actions͸ςετ΍Ϗϧυ͚ͩͰͳ͘։ൃϓϩηεશମͰར༻Ͱ͖Δ

    View Slide

  11. GitHub-hosted runner
    • GitHub-hosted runner͸GitHub͕ඪ४Ͱఏڙ͍ͯ͠ΔCIͷ࣮ߦ؀ڥʢVMʣ


    • Windows, Linux(ubuntu), macOS͔Βબ୒Մೳ


    • macOS͸Monterey, Ventura͕ఏڙ͞Ε͍ͯΔ


    • GitHub͕ӡ༻؅ཧ͍ͯ͠ΔͨΊࣗ෼Ͱϝϯςφϯε͸ෆཁ


    • δϣϒͷ࣮ߦ୯ҐͰ·ͬ͞ΒͳΠϯελϯεׂ͕Γ౰ͯΒΕΔ


    • ෼୯ҐͰ՝ۚ


    • macOS͸࠷΋͍҆Linuxͷ10ഒͷ஋ஈ͕͢ΔͷͰదࡐదॴͰ࢖͍෼͚͢Δ

    View Slide

  12. ࢀߟɿGitHub-hosted runnerͷιϑτ΢ΣΞͷߏ੒
    • CI؀ڥʹΠϯετʔϧ͞Ε͍ͯΔιϑτͷҰཡͳͲ͸GitHub্Ͱެ։͞Ε͍ͯΔ


    • https://github.com/actions/runner-images
    (2023.10.8࣌఺)

    View Slide

  13. Self-hosted runner
    • ϓϥΠϕʔτϦϙδτϦͰGitHub-hosted runnerͰmacOSΛ࢖͏ͱར༻͕࣌ؒ x10 ׵ࢉͷͨΊແྉ
    ࿮ͷফඅ͕ૣ͍


    • Self-hosted runner͸ॴ༗͍ͯ͠ΔϚγϯͰGitHub ActionsͷϫʔΫϑϩʔ࣮ߦ͢ΔγεςϜ


    • ϝϦοτ


    • ϓϥΠϕʔτϦϙδτϦͰRunnerͷར༻࣌ؒʹର͢Δྉ͕ۚൃੜ͠ͳ͍


    • σϝϦοτ


    • Ϛγϯͷ؅ཧɾӡ༻ίετ͸શͯࣗෲʢOS΍πʔϧͷΞοϓσʔτɺ௨৴අ༻ͳͲʣ


    • GitHub-hostedͱ͸ҟͳΓඪ४Ͱ͸VMͷػೳ͕ఏڙ͞Ε͍ͯͳ͍ͷͰΰϛ͕࢒ͬͨΓ͢Δ


    -

    View Slide

  14. FlutterͷϏϧυ؀ڥͷηοτΞοϓ
    • GitHub͕ఏڙ͢ΔRunnerʹ͸Flutter SDK͕Πϯετʔϧ͞Ε͍ͯͳ͍


    • ςετ΍ϏϧυΛߦ͏ͨΊʹSDKͷΠϯετʔϧ͕ඞཁ


    • third-partyͷΞΫγϣϯ͕͋Δ


    • https://github.com/marketplace/actions/
    fl
    utter-action


    • Git͔Β௚઀clone


    • Xcode΍Android SDKͳͲ͸ෳ਺όʔδϣϯ͕ΠϯετʔϧࡁΈͰ੾Γସ͑΋؆୯


    • XcodeͳΒ؀ڥม਺ DEVELOPER_DIR Ͱ੾Γସ͑Մೳ

    View Slide

  15. ϫʔΫϑϩʔͷ໨తͰRunnerΛ੾Γସ͑Δ
    • ੩తղੳʢ
    fl
    utter analyzeʣ΍ςετɺϏϧυ&σϓϩΠͰར༻͢Δ
    έʔε


    • ੩తղੳ΍ςετ͸࠷΋͍҆LinuxͰ࣮ߦ


    • Ϗϧυ͸Android΍WebͳΒLinuxɺiOS͸macOS


    • ϫʔΫϑϩʔ΍Ϗϧυλʔήοτʹ߹ΘͤͯRunnerΛ࢖͍෼͚Δ͜
    ͱͰඅ༻ΛίϯτϩʔϧͰ͖Δ

    View Slide

  16. ϫʔΫϑϩʔͷ࠶ར༻ੑ͕ߴ͍
    • GitHub ActionsͷϫʔΫϑϩʔͷఆٛ͸yamlϑΝΠϧͳͷͰ࠶ར༻ੑ͕ߴ͍


    • ৽͍͠ϓϩδΣΫτΛ։࢝ͨ͠ΒطଘͷϑΝΠϧΛίϐʔ͢Δ͚ͩCI/CDͷ
    ηοτΞοϓ͕׬ྃ͢Δ


    • GUIͷϫʔΫϑϩʔΤσΟλΛϙνϙν͠ͳͯ͘ྑ͍ʢҰ௕Ұ୹ʣ

    View Slide

  17. ϫʔΫϑϩʔͷΧελϚΠζੑ͕ߴ͍
    • CIδϣϒͷதͰJavaScriptΛ࢖ͬͯॲཧΛهड़Ͱ͖Δ


    • https://github.com/actions/github-script


    • Job Summaries


    • ϫʔΫϑϩʔͷ࣮ߦ݁Ռͷը໘ʹMarkdownܗࣜͳͲͰग़ྗͰ͖Δ

    View Slide

  18. reg-suitΛ࢖ͬͨVRTʢVisual Regression Testʣ

    View Slide

  19. ࢀߟɿreg-suitͷαϚϦʔΛJob Summariesʹग़ྗ
    - name: Generate Comment
    uses: actions/github-script@v6
    with:
    script: |
    const fs = require('fs');
    ʢ్தলུʣ
    await core.summary
    .addHeading(`${icon} reg-suit has checked for visual changes`, 3)
    .addTable([
    ["🔴 Changed", "🟡 New", "⚫ Deleted", "🔵 Passing"],
    [stats.changed, stats.newItems, stats.deleted, stats.passing]
    ])
    .addHeading("📝 Log", 3)
    .addCodeBlock(log, "log")
    .write()

    View Slide

  20. GitHub Actionsͷrunsʢ࣮ߦϩάʣͷϖʔδʹදࣔ͞Εͨ಺༰

    View Slide

  21. ࠓޙͷվળΛظ଴͢ΔϙΠϯτ
    • ϑΝΠϧΞοϓϩʔμʔػೳ


    • iOSΞϓϦͷϏϧυͰ͸֤छূ໌ॻ΍Provisioning Pro
    fi
    le͕ඞཁ


    • GitHub Actions͸ϑΝΠϧΞοϓϩʔμʔ͕ఏڙ͞Ε͍ͯͳ͍


    • ϑΝΠϧΛbase64ʹม׵ͯ͠secretʹొ࿥ -> CIδϣϒͷதͰϑΝΠϧʹॻ
    ͖ग़͢࡞ۀ͕ඞཁ


    • BitriseͳͲ͸ϑΝΠϧΞοϓϩʔυػೳ͔ΒΞοϓϩʔυ͕Ͱ͖Δ


    • σόοά͠΍ͯ͘͢͠΄͍͠

    View Slide

  22. ۩ମతͳϫʔΫϑϩʔͷྫ͸ͪ͜ΒͷهࣄΛࢀߟʹ🙏


    https://zenn.dev/yorifuji

    View Slide

  23. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide