플러터에서 Flavor를 사용해서 iOS 개발 환경 분리 및 변수 설정

이전 포스팅에서는 플러터에서 특히 안드로이드에 대한 개발 환경 분리와 개발환경별로 변수를 설정하는 방법을 봤습니다.

 

https://android-developer.tistory.com/100

플러터에서 Flavor를 사용해서 개발 환경 분리 및 예시

 

이번에는 iOS에 대해 플러터에서 어떻게 개발 환경을 나누고 분리할 수 있는지 알아보겠습니다.

---

플러터에서 Flavor를 사용하여 개발 환경 분리 하고 변수 선언하기 - iOS

플러터에서 iOS의 Flavor를 나누는 방법은 다음과 같습니다.

 

---

1. XCode를 사용해서 현재 프로젝트의 Runner.xcworkspace를 열어줍니다.

프로젝트 루트 경로/iOS/Runner/Runner.xcworkspace에 있습니다.

 

해당 파일을 더블클릭하면 자동으로 Xcode로 프로젝트를 열어줍니다.

 

---

2. Runner에서 새로운 Configuration 만들기

Xcode의 Runner에 들어가서 

 

다음과 같이 새롭게 Debug, Release에 대한 Configuration을 만듭니다.

 

주의할점은 Debug에 대한건 Debug를 사용해서 Duplicate해야하고

 

Release에 대한건 Release를 사용해서 Duplicate해야합니다.

 

이름은 Debug-xxx 또는 Release-xxx 같은 형식을 사용해야합니다.

 

 

이때 주의할 점은 Target을 반드시 Flutter로 설정해서 만들어야 합니다.

 

저는 다음과 같이 3개를 만들었습니다.

 

 

참고로 각각의 의미는 다음과 같습니다.

 

• Debug-dev: 디버깅할 때 or 테스트할 때 사용할 빌드
• Debug-product: 배포 환경에서 테스트할 때 사용할 빌드
• Release-product: 배포할 앱을 만들 때 사용할 빌드

 

여기까지 하면 Runner 안에 방금 생성한 Configuration에 대한 파일이 생성되어 있는 것을 볼 수 있습니다.

 

 

만약 자동으로 만들어져 있지 않다면 반드시 직접 만들어야합니다.

 

만드는 과정은 다음과 같습니다.

 

Flutter 폴더를 우클릭하여 new File을 클릭합니다.

 

 

 

그리고 Config를 검색해서 Configuration Settings File을 찾아줍니다.

 

 

다음과 같이 셋팅하여 새로운 파일을 생성합니다. 

 

• 이름: dev
• Group: Flutter
• Targets: Runner

 

 

생성한 파일의 내부가 다음과 같이 되어있는지 확인합니다.

 

//
//  dev.xcconfig
//  Runner
//
//

#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"
#include "Generated.xcconfig"

---

3. 각각의 빌드 환경에 대한 Scheme 만들기

빌드에 대한 이름과 환경을 만들었으니 iOS 프로젝트에서 해당 빌드를 인식할 수 있게 Scheme을 새롭게 만들어줘야합니다.

 

다음과 같이 New scheme을 클릭해서 위에서 만든 Runner에 대한 Scheme을 만듭니다.

 

 

위에서 생성한 dev, product에 대한 Scheme을 만듭니다.

 

저는 다음과 같이 2개를 만들었습니다.

 

 

 

2개만 만든 이유는 다음과 같습니다.

 

product에서 설정 변경을 통해 앱을 만들고 일반적인 경우에는 Debug-product로 사용할 예정이기 때문에

 

Scheme을 만든 이후 Shared에 반드시 체크가 되어있는 것을 확인해야합니다.

 

그리고 생성한 Scheme과 연결을 해줘야합니다.

 

다음과 같이 현재 scheme을 변경한 다음에

 

 

Edit Scheme에 들어가서 다음과 같이 Build Configuration을 처음에 만든 Configuration으로 바꿔줍니다.

 

 

위 과정을 dev뿐 아니라 product에도 해줍니다.

 

product 환경에서 테스트를 할거면 Debug-product

 

앱을 만들거면 Release-product로 만들어줍니다.

 

---

4. 빌드 환경이 제대로 나눠졌는지 확인하기

여기까지 했으면 플러터에서 iOS의 빌드 환경에 정상적으로 나누어졌는지 확인할 수 있습니다.

 

실행은 다음과 같은 커맨드로도 할 수 있지만

 

flutter run --flavor dev

 

Android Studio를 사용한다면 다음과 같은 Configuration 정의를 통해 빌드도 가능합니다.

 

다음과 같이 Edit Configurations를 클릭합니다.

 

(저는 이미 만들었기 때문에 dev와 product가 있는 것을 볼 수 있습니다.)

 

 

왼쪽 위에 (+) 버튼을 눌러서 dev를 만들어 줍니다.

 

 

안에는 다음과 같이 정의합니다.

 

 

(Build flavor는 반드시 위에서 만든 dev, product와 이름이 일치해야합니다.)

 

위와 같이 정의한 후 실행된다면 일단 성공입니다.

 

똑같은 방법으로 product도 만듭니다.

 

---

5. 빌드 환경별로 다른 패키지명 갖게 하기

제대로 빌드 환경이 나뉘어져있다는 것을 확인했으니 이제 플러터를 실행했을 때 서로 다른 앱이 되도록 하겠습니다.

 

패키지명이 다르다면 서로 다른 앱으로 인식하기 때문에 iOS도 똑같이 빌드 버전별로 서로 다른 패키지명을 갖도록 변경하겠습니다.

 

Target - Runner - Build Setttings - Basic - Combined에 들어갑니다.

 

 

Product Bundle Identifier 부분을 보면 지금까지 생성한

 

• Debug-dev
• Debug-product
• Release-product

를 볼 수 있습니다.

 

여기서 각각 com.~~~으로 되어있는 부분을 수정하면

 

패키지명을 변경할 수 있습니다.

 

일반적으로는 제일 끝에 해당 빌드 이름을 붙입니다.

 

예를 들면 dev의 경우

 

com.~~~.dev

 

product의 경우

 

com.~~~.product

 

가 됩니다.

 

바로 밑에 Product Name 부분이 있는데 이 부분을 수정하면 앱 이름이 변경됩니다.

 

각각 원하는 앱 이름으로 변경할 수 있습니다.

 

이를 적용하기 위해선 Runner/Runner/Info에서 Bundle display name을 찾아줍니다.

 

 

해당 값을 다음과 같이 바꿔줍니다.

 

$(PRODUCT_NAME)

 

위와 같이 바꿔주고 다시 앱을 Run 하면 새롭게 변경된 이름으로 앱이 생성되는 것을 볼 수 있습니다.

---

6. Podfile 수정하기

다음으로 Podfile도 수정해줄 필요가 있습니다. 

 

플러터 프로젝트의 루트 디렉토리/ios/Podfile을 찾습니다.

 

 

해당 내부에 다음과 같이 위에서 추가한 3개의 빌드 환경을 추가해줍니다.

 

 

---

7. 플러터 iOS에서 사용할 수 있는 빌드 환경별 상수 만들기

플러터 iOS에서 빌드 환경별로 사용할 수 있는 상수를 Run할 때 커맨드로 넣어줄 수 있습니다.

 

예를 들면 다음과 같습니다.

 

flutter run --flavor dev --dart-define=ENVIRONMENT=dev --dart-define=API_URL=https://dev.api.example.com

 

위와 같이 커맨드를 입력하여 실행하면 다음과 같이 실행됩니다.

 

1. dev라는 이름의 flavor로 실행해라
2. 이 때 ENVIRONMENT와 API_URL이라는 상수를 만들어서 실행해라.

이렇게 지정한 상수는 Flutter에서 다음과 같이 사용할 수 있습니다.

 

const url = String.fromEnvironment('API_URL', defaultValue: "");

 

하지만, 매번 이렇게 커맨드로 입력하기는 귀찮죠??

 

그렇기 때문에 다음과 같은 두 가지 방법을 생각할 수 있습니다.

 

Android Studio에서 Configuration에 추가 커맨드 지정하기

위에서 정의한 Configuration에 추가로 커맨드를 넣어줄 수 있습니다.

 

예를 들어 dev에 다음과 같이 지정하면 됩니다.

 

 

위와 같이 하면 매번 해당 Configuration으로 실행할 때마다 Production이라는 String 값을 env라는 상수에 넣어서 실행해줍니다.

 

.vscode에 json 파일 만들어서 빌드

플러터 프로젝트 루트 디렉토리에 .vscode 폴더를 생성합니다.

 

그리고 그 안에 launch.json 파일을 생성합니다.

 

그리고 그 안에 다음과 같이 정의합니다.

 

{
  "version": "1.0.0",
  "configurations": [
    {
      "name": "dev",
      "request": "launch",
      "type": "dart",
      "program": "lib/screens/main.dart",
      "args": [
        "--dart-define=IS_PRODUCTION=false"
      ]
    },
    {
      "name": "product",
      "request": "launch",
      "type": "dart",
      "program": "lib/screens/main.dart",
      "args": [
        "--dart-define=IS_PRODUCTION=true"
      ]
    }
  ],
  "compounds": []
}

 

program 부분은 main.dart 파일의 위치를 변경했을 경우 지정할 때 사용합니다.

 

args 부분에 Android Studio에서 했던거 처럼 추가 커맨드를 지정해줍니다.

 

위와 같이 정의하면 매번 실행할 때 마다 알아서 해당 파일을 참조하고 같은 이름의 빌드가 있는지 확인한 후

 

해당 정보에 맞춰서 빌드해줍니다.

 

위와 같이 설정 후 처음 실행은 반드시 Flutter를 사용해서 해야합니다.

 

이후에는 iOS의 Xcode를 사용해서 빌드해도 정상적으로 빌드됩니다.

---