flutter(+nuxt)+firebaseステージング環境構築

ryo

必要十分そうなのでこちらをベースに。

ryo

まずはflutter側の設定。これに従う。

以下で今までとは違うアプリがシミュレータで立ち上がることを確認
flutter run --flavor=development

ryo

firebaseのコンソールからステージング用のプロジェクトを作る。
その後に以下の手順を実施。

この手順の後にpod installしてからflutter run --flavor=developmentするとGoogleService-Info.plistがstg向けになっている。

ryo

authenticationとfirebaseをコンソールから利用開始すると少なくともアプリが立ち上がってauthenticationにメールアドレスが追加されるようになったことを確認。

ただしアカウント登録時にDomain not whitelisted by projectと怒られている。

ダイナミックリンクが問題の模様。

ダイナミックリンクを追加して、承認済みドメインにも追加。
xxx-staging.page.linkにしようとしたら英数字のみとのエラーが出たのでxxxstaging.page.linkに変更

ryo

ダイナミックリンクをソースコード上でGREPしたところRunner.entitlementsとconstantにて利用がされていた。

Runner.entitlementsは以下に従い${APP_ASSOCIATED_DOMAIN}として、xcconfigファイルで環境ごとのダイナミックリンクを設定した。

ryo

constantは.envから読み込ませるように変更。
以下を参考に。

ryo

以下のエラーに結構ハマった。

    error: Cycle inside Runner; building could produce unreliable results. This usually can be resolved
    by moving the shell script phase 'Replace Google Service Info' so that it runs before the build
    phase that depends on its outputs.
    Cycle details:
    → Target 'Runner': CodeSign
    /Users/xxx/build/ios/Debug-Development-iphonesimulator/Runner.ap
    p
    ○ That command depends on command in Target 'Runner': script phase “[CP] Embed Pods Frameworks”
    ○ Target 'Runner' has copy command from
    '/Users/xxx/ios/Runner/GoogleService-Info.plist' to
    '/Users/xxx/build/ios/Debug-Development-iphonesimulator/Runner.a
    pp/GoogleService-Info.plist'
    ○ That command depends on command in Target 'Runner': script phase “Replace Google Service Info”

Build PhasesのReplace Google Service Infoをビルドの前に持ってくる必要があるようで、Compile Sourcesの上に移動して解決。
さっきまで起こっていなかった気がしていて謎。

ryo

FLAVORをflutter側で見て.envを使い分けたい。
dart-defineを指定してflutter runしないとString.fromEnvironment('FLAVOR')で取得できない。

つまりこう。

flutter run --debug --flavor development --dart-define=FLAVOR=development

flutter run --debug --flavor staging --dart-define=FLAVOR=staging

flutter run --debug --flavor production --dart-define=FLAVOR=production

ちなみにビルドは以下でできた。

flutter build ios --flavor staging --dart-define=FLAVOR=staging

ryo

インデックスの移行ができれば便利なのだけど、、見当たらないので都度ターミナルのURLをクリックして作らなければならない模様。
そんなに量がないからいいが。。
できました。以下に記載。

ryo

firebase functionsをStaging環境にリリースする。
以下で簡単にできる。

firebase target
firebase use stag

firebase deployすると以下のエラー。
従量課金のBrazeプランでないとだめな模様。アップグレード。

Your project xxx-staging must be on the Blaze (pay-as-you-go) plan to complete this command. Required API cloudbuild.googleapis.com can't be enabled until the upgrade is complete. To upgrade, visit the following URL:

更に以下のエラー。

TypeError: Cannot read properties of undefined (reading 'xxx')

これは単純に環境変数設定していないから。以下で対応。

firebase functions:config:set xxx=xxx

ryo

storageとfirestoreのルールをコピー。

ryo

Extensions(Resize Images)を追加して設定をコピー。

ryo

firestoreのインデックスを別環境からエクスポート＆インポートは以下で可能。
firebase firestore:indexes --project prod > firestore.indexes.json
firebase deploy --only firestore:indexes --project stag

Cannot understand what targets to deploy/serve. No targets in firebase.json match '--only firestore:indexes'.

上記が出たらfirebase.jsonに以下を追加。

  "firestore": {
   "rules": "firestore.rules",
   "indexes": "firestore.indexes.json"
  },

以下のツイートで知れました。感謝！

ryo

firebase hostingに乗っているNuxtアプリを環境ごとにデプロイできるように調整。

dotenvとcross-envインストール
npm install @nuxtjs/dotenv
npm i -D cross-env
（どっちも-Dしたほうが良かった？）
nuxt.config.jsを修正

  modules: [
    '@nuxtjs/dayjs',
    [
      '@nuxtjs/dotenv',
      { filename: `.env_${process.env.NODE_ENV}` }
    ]
  ],

  env: {
    NODE_ENV: process.env.NODE_ENV,
  }

.env_prod,.env_stagを追加（.gitignoreの対象にするのも忘れずに）

API_KEY=aaa
AUTH_DOMAIN=aaa.firebaseapp.com
PROJECT_ID=aaa
STORAGE_BUCKET=aaa.appspot.com
MESSAGING_SENDER_ID=aaa
APP_ID="aaa"

ビルド用スクリプト追加

  "scripts": {
    "dev": "nuxt",
    "dev-prod": "cross-env NODE_ENV=prod nuxt",
    "dev-stag": "cross-env NODE_ENV=stag nuxt",
    "build": "nuxt build",
    "build-prod": "cross-env NODE_ENV=prod nuxt build",
    "build-stag": "cross-env NODE_ENV=stag nuxt build",

.envから値を取得するようにソース修正

const firebaseConfig = {
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.MESSAGING_SENDER_ID,
    appId: process.env.APP_ID,
}

.firebasercで環境使い分けの設定

{
  "projects": {
    "default": "xxx-staging",
    "dev": "xxx-development",
    "stag": "xxx-staging",
    "prod": "xxx-production"
  }
}

デプロイ手順
yarn build-stag
firebase use stag
firebase deploy

参考

ryo

flutterでアプリアイコンを環境で変える。