Flutter開発とGitHub Actions

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