Flutter Monorepo
Flutter에서 Monorepo를 구현해보자.
이 글을 읽기 전에, Flutter Multi-Package Architecture를 먼저 읽으면 좋다.
먼저, Monorepo를 위한 디렉토리를 생성한다. 그리고 각각의 디렉토리 안에 패키지를 생성해준다.
먼저 app 패키지들을 만들건데, app 패키지는 app의 첫 시작점인 main.dart를 갖고 있고, 지원하고자 하는 플랫폼과 함께 생성해줘야한다. 그래서 package가 아닌 app으로 생성한다. template을 명시하지 않으면 app으로 생성된다.
같은 방법으로 나머지 프로젝트도 생성했다.
이제 나머지 패키지도 만들어주자.
패키지를 만들면 아래 이미지와 같이 ios, android, linux, windows, macos 디렉토리가 생성된다.
이 디렉토리들을 삭제 해준다. 삭제 해주는 이유는 앱에서 이미 플랫폼 의존성을 해결했기 때문에, 여기에 플랫폼을 지원하기 위한 코드가 또 들어갈 필요가 없어서다.
Feature 디렉토리에 들어가서, feature 패키지들을 생성해준다. 여기서는 counter와 down_counter를 생성했다.
이제 코드를 작성해야 하는데, 코드를 작성하려고 하면 뭔가 이상할 것이다. 왜냐하면 패키지에서 Flutter를 인식하지 못하기 때문이다. 루트 디렉토리가 Flutter 프로젝트가 아닌 일반 디렉토리이기 때문에, 패키지에서 Flutter를 인식할 수 없다.
이 때 시도할 수 있는 게 3가지 있다.
1. Flutter SDK 재설정
IntelliJ나 Android Studio와 같이 JetBrains 계열의 IDE를 사용하고 있다면, 위 이미지와 같이 IDE → Settings를 클릭해서 IDE 설정 창을 연다. (사용하고 있는 버전에 따라 Settings가 Preferences라는 이름으로 되어있을 수 있다.)
Languages & Frameworks → Flutter를 선택하면, Flutter SDK path가 비어있다.
이 부분을 위와 같이 SDK의 path를 넣어준 뒤, Apply 한다.
2. Project Setting 재설정
위 방법을 해도 안 되면, Project Setting을 다시 해야 한다.
File → Project Structure를 선택하여 Project Setting 창을 연다.
그럼 이렇게 프로젝트의 Default Settings가 <No SDK>라고 나온다.
이 두 곳을 모두 Default로 변경해주고 Apply 한다. (Default 옵션이 없으면 Flutter의 권장 옵션에 맞춰서 설정하면 된다.)
3. flutter create .
제일 쉬운 방법이다. 프로젝트 root 디렉토리에서 flutter create . 명령어를 입력하여, 현재 디렉토리를 Flutter 프로젝트로 만든다. 그리고 나서, .idea와 README.md 파일을 제외하고 모두 삭제 해준다.
이 방법을 쓸거면, 처음부터 빈 프로젝트로 만들지 않고 flutter 프로젝트로 생성해도 된다.
Programming
이제 코딩을 해보자! 단순한 counter 프로그램을 작성할 건데, features에 counter와 down_counter라는 패키지들을 생성한 뒤 코드를 작성한다.
monorepo는 repository와 코드를 구성하는 방법이기 때문에, 코드보다는 패키지 간 연결에 대해 작성한다.
lib에 코드를 작성해주고, counter.dart에서 export할 파일을 작성해준다.
이렇게 하면 외부 패키지에서는 counter_view만을 인터페이스로 활용할 수 있으며, 다른 코드에는 접근할 수 없다.
Apps의 각 App 모듈의 pubspec.yaml에 패키지 의존성을 작성한다. 이 때, root directory를 고려하여 local path로 작성한다.
pub get한 뒤 실행하면 잘 실행 되는 것을 볼 수 있다.
실행이 안되는 경우에는, Run Configurations의 내용을 변경하여, 실행하고자 하는 main을 등록하거나, Current File로 변경하여 실행하고자 하는 main을 실행하면 된다. 아니면 flutter run 명령어를 통해 해도 된다.
Git
깃허브나 깃랩이나 비트버킷 등 git을 사용하는 관리 서비스에서 레퍼지토리를 생성하고, 레퍼지토리의 주소를 복사한다.
루트 디렉토리에서 git init 을 해준다.
그리고 위 이미지처럼, git 레퍼지토리를 추가해주고, commit과 push를 한다.
그러면 레퍼지토리에 코드가 올라가는데, 위 이미지 처럼 pubspec.yaml에 local path로 import하던 것을 git 주소와 path로 import 하도록 변경하면 된다.
다시 pub get을 한 뒤, 이번엔 web app을 실행시켜 보았다. 잘 동작하는 것을 볼 수 있다.
example project를 올려두었다. 필요하면 여기서 코드를 볼 수 있으며, 자유롭게 포킹해도 된다. (가져갈 때 깃허브 스타가 눌려있다면 성취감이 생길 것 같아요!)
Setup YAML using Variable
대규모 서비스를 monorepo로 설계하다보면, yaml 파일이 엄청 많아진다. 그리고 development, stage, release, prod 등 다양한 상태에 따라 환결설정을 해줘야 한다.
이 때 모든 yaml 파일을 위처럼 literal하게 정의하면, 개발 관리가 매우 어려워진다. 변수를 활용한 YAML 파일 셋팅 방법을 알려주겠다.
프로젝트 루트 디렉토리에 env.yaml 파일을 추가한 뒤, 개발환경설정에 필요한 내용을 넣는다.
위처럼 선언하면, branch라는 변수에 “main”을 담은 것이다.
해당 변수를 사용하고자 하는 yaml 파일 상단에 위처럼 선언해준다.
그러면 해당 yaml 파일에서 저렇게 변수를 사용할 수 있다. 처음 한 번 이렇게 등록해놓으면, 이후에는 모든 패키지의 yaml 파일을 바꿔주지 않고 env yaml 파일의 코드만 수정하면 일괄적용 된다.
