DevSecOps Workflow - モバイルアプリ

このドキュメントでは、ハイブリッド（React Native）モバイルアプリをビルドおよびデプロイするためのGitLab DevSecOpsワークフローソリューションの手順と機能テストの詳細について説明します。

fastlaneを使用するネイティブモバイルアプリケーションについては、製品ドキュメントを参照してください。

これらの手順には、react-native-community/cliを使用してブートストラップされたサンプルReact Nativeアプリケーションが含まれており、iOSとAndroidの両方のデバイスでクロスプラットフォームソリューションを提供します。このサンプルプロジェクトでは、GitLab CI/CDパイプラインを使用して、モバイルアプリケーションをビルド、テスト、およびデプロイするためのエンドツーエンドソリューションを提供します。

はじめに

このReact Nativeモバイルアプリのサンプルプロジェクトを使用して、GitLabを使用したモバイルアプリケーションの配信を迅速に開始する方法について、以下の手順に従ってください。

ソリューションコンポーネントのダウンロード

1. アカウントチームから招待キーコードを入手してください。
2. 招待キーコードを使用して、ソリューションコンポーネントウェブストアからソリューションコンポーネントをダウンロードします。

ソリューションコンポーネントプロジェクトの設定

• Product Accelerator Marketplaceからモバイルアプリのソリューションコンポーネントがダウンロードされました。ソリューションパックには、CI/CDファイルを含むモバイルアプリのサンプルプロジェクトが含まれています。

• 新しいGitLab CI/CDカタログプロジェクトを作成して、環境内でSnykソリューションコンポーネントをホストします。モバイルアプリソリューションパックには、Snyk CI/CDコンポーネントプロジェクトファイルが含まれており、Snyk CI/CDカタログプロジェクトを設定できます。

  1. このSnyk CI/CDカタログプロジェクトをホストする新しいGitLabプロジェクトを作成します
  2. 提供されたファイルをプロジェクトにコピーします
  3. プロジェクト設定で、必要なCI/CD変数を設定します
  4. プロジェクトがCI/CDカタログとしてマークされていることを確認してください。詳細については、コンポーネントプロジェクトの公開を参照してください。
  GitLab.comにパブリックGitLab Snykコンポーネントがあり、SaaSを使用している場合は、パブリックGitLab Snykコンポーネントにアクセスできるため、独自のSnyk CI/CDカタログプロジェクトを設定する必要はありません。また、GitLab.comのパブリックGitLab Snykコンポーネントのドキュメントに従って、コンポーネントを直接使用できます。

• Change Control Workflow with ServiceNowソリューションパックを使用して、DevOps ChangeベロシティインテグレーションとGitLabを設定し、変更制御を必要とするデプロイのためにServiceNowでの変更リクエストの作成を自動化します。ServiceNowソリューションコンポーネントとの変更制御ワークフローのドキュメントを参照し、アカウントチームと協力して、ServiceNowソリューションパッケージを使用したChange Control Workflowをダウンロードするためのアクセスコードを入手してください。

• CI YAMLファイルをプロジェクトにコピーします:

  • .gitlab-ci.yml
  • build-android.yml（パイプラインディレクトリ内）。ビルドジョブのbuild-android.ymlファイルが参照されているメインの.gitlab-ci.ymlファイルがあるため、build-android.ymlファイルが/pipeline以外の別の場所に配置されている場合は、.gitlab-ci.ymlのファイルパスを更新する必要があります。
  • build-ios.yml（パイプラインディレクトリ内）。ビルドジョブのbuild-ios.ymlファイルが参照されているメインの.gitlab-ci.ymlファイルがあるため、build-ios.ymlファイルが/pipeline以外の別の場所に配置されている場合は、.gitlab-ci.ymlのファイルパスを更新する必要があります。
  include:
  - local: "pipelines/build-ios.yml"
   inputs:
     image: macos-15-xcode-16
     tag: saas-macos-medium-m1
  - local: "pipelines/build-android.yml"
   inputs:
     image: reactnativecommunity/react-native-android

• プロジェクト設定で、必要なCI/CD変数を設定します。パイプラインの動作方法については、次のセクションを参照してください。

パイプラインの仕組み

このパイプラインは、iOSとAndroidの両方のビルド、テスト、モバイルアプリのデプロイを処理するReact Nativeプロジェクト向けに設計されています。

このプロジェクトには、iOSとAndroidの両方のReact Nativeビルド用の簡単なreactCounterデモアプリが含まれています。このバージョンはまだアーティファクトに署名していないため、TestFlightまたはPlayストアにアップロードできません。

各変更では、セマンティックバージョニングバンプのコンポーネントが使用されます。このコンポーネントには、汎用パッケージをパッケージレジストリにコミットするために使用される一時的な変数として、そのバージョンが格納されています。

パイプライン構造

このパイプラインは、次のステージとジョブで構成されています:

1. プリビルド
   • 単体テスト
   • Snykスキャン
2. build
   • IoSパッケージをビルドする
   • Androidパッケージをビルドする
3. test
   • 依存関係スキャン
   • SASTスキャン
4. 機能テスト
   • upload_ios/android_app_to_sauce_labs
   • automated_test_appium_saucelabs
5. アプリのディストリビューション
   • app_distribution_sauce_android
   • app_distribution_sauce_ios
6. ベータリリース
   • ベータリリース-dev
   • ベータリリース-承認

前提要件

モバイルパイプラインワークフローには、複数のサードパーティツールが統合されています。パイプラインを正常に実行するには、次の前提条件が満たされていることを確認してください。

ソリューションコンポーネントを使用したSnykインテグレーション

セキュリティスキャンにGitLab Snyk CI/CDコンポーネントを使用するには、GitLabのグループまたはプロジェクトが既にSnykに接続されていることを確認してください。接続されていない場合は、このチュートリアルに従って設定してください。

モバイルアプリプロジェクトで、Snykインテグレーションに必要な変数を追加します。

必須CI/CD変数

このモバイルアプリのデモプロジェクトでは、プライベートSnykコンポーネントを使用しているため、モバイルアプリプロジェクトがプライベートSnykコンポーネントプロジェクトにアクセスできるように、次の追加変数を追加しました。ただし、Snykコンポーネントがパブリックであるか、グループ内でアクセスできる場合は必要ありません。

SNYK_PROJECT_ACCESS_USERNAME: "MOBILE_APP_SNYK_COMPONENT_ACCESS"
DOCKER_AUTH_CONFIG: '{"auths":{"registry.gitlab.com":{"username":"$SNYK_PROJECT_ACCESS_USERNAME","password":"$SNYK_PROJECT_ACCESS_TOKEN"}}}'

コンポーネントパスの更新

パイプラインがSnykコンポーネントを正常に参照できるように、.gitlab-ci.ymlファイルのコンポーネントパスを更新します。

 - component: $CI_SERVER_FQDN/gitlab-com/product-accelerator/work-streams/packaging/snyk/snyk@1.0.0 #snky sast scan, this examples uses the component in GitLab the product accelerator group. Please update the path and stage accordingly.
    inputs:
      stage: prebuild
      token: $SNYK_TOKEN

Sauce Labsインテグレーション

このモバイルアプリのデモプロジェクトCI/CDは、自動機能テストのためにSauce Labsと統合されています。Sauce Labsで自動テストを実行するには、アプリケーションをSauce Labsアプリストレージにアップロードする必要があります。Sauce Labsにアクセスしてアーティファクトをアップロードするには、GitLabでプロジェクトに必要な変数を設定する必要があります。

必須CI/CD変数

自動テストにAppiumを使用する

自動テストにSauceLabsを使用するには、アプリをSauceLab App Managementにアップロードする必要があります。パイプラインは、APIエンドポイントを使用して、アプリをSauceLabsにアップロードし、テストに使用できるようにします。

WebdriverIOおよびSauce Labsを使用してReact Nativeモバイルアプリケーションをテストするために、tests/appiumにAppiumテストスクリプトファイルを追加しました。テストスクリプトは、次の環境変数を使用してSauceLabsにアクセスします

# Using the variables defined in the project

const SAUCE_USERNAME = process.env.SAUCE_USERNAME;
const SAUCE_ACCESS_KEY = process.env.SAUCE_ACCESS_KEY;

アプリの配信（AndroidおよびiOS）

GitLabパイプラインは、デモ用にアプリのビルドアーティファクトをSauceLabs TestFairyに配信します。SauceLabs TestFairyを使用すると、ユーザーはアプリの新しいバージョンをテスターに提供して、レビューとテストを行うことができます。

ServiceNowインテグレーション

このモバイルアプリのデモプロジェクトCI/CDは、変更制御のためにServiceNowと統合されています。パイプラインがServiceNowで変更制御が有効になっているデプロイメントジョブに到達すると、変更リクエストが自動的に作成されます。変更リクエストが承認されると、デプロイメントジョブが再開されます。このデモプロジェクトでは、ベータリリースの承認ジョブはServiceNowでゲートされており、続行するには手動による承認が必要です。

CI/CD変数

パイプラインがServiceNowと通信するためには、Webhookインテグレーションを作成する必要があります。APIエンドポイントを使用してServiceNowと通信する場合は、次の変数を含める必要があります。ただし、ServiceNow DevOps Changeベロシティインテグレーションを使用している場合は、これは必要ありません。ServiceNow DevOps Changeベロシティのオンボーディングの一環として、Webhookが作成されます。

含まれるファイルとコンポーネント

モバイルアプリプロジェクトパイプラインには、いくつかの外部設定とコンポーネントが含まれています:

• iOSおよびAndroid用のローカルビルド設定
• SAST（静的アプリケーションセキュリティテスト）コンポーネント
• 自動セマンティックバージョニングコンポーネント
• 依存関係スキャン
• Snyk SASTスキャンコンポーネント

注

ソリューションコンポーネントにアクセスするための招待コードの取得、およびその他の質問については、アカウントチームにお問い合わせください。