chore(eas): PR을 올렸을 때, 버그 찾기 위해 Preview 보이게 하기 (#137)

개요

- EAS Update 기능을 활용해서, PR마다 branch를 checkout해서 다 확인할
필요없이 자동으로 임시의 Preview를 생성해서 구현 확인을 쉽게하자
- .env.dev는 dev에 들어갈 env를 정의한다. (gitignore에서 제외)
- dev-deploy 파이프라인을 만들어서 preview가 development 빌드의
브랜치에서 보일 수 있도록 한다.
- i18n에서 호환성 문제로 v3를 사용하도록 설정

.env.dev

@@ -0,0 +1,6 @@
+EXPO_PUBLIC_APP_VARIANT=dev
+EXPO_PUBLIC_API_URL=https://difeapp.com/api
+EXPO_PUBLIC_WS_URL=wss://difeapp.com/ws
+EXPO_PUBLIC_MOCK_LOGIN=true
+EXPO_PUBLIC_MOCK_EMAIL=test1@gmail.com
+EXPO_PUBLIC_MOCK_PASSWORD=password1234!

.github/workflows/dev-deploy.yml

@@ -0,0 +1,30 @@
+name: Expo PR Branch Preview
+on:
+    pull_request:
+        types: [opened, synchronize]
+jobs:
+    preview:
+        runs-on: ubuntu-latest
+        permissions:
+            pull-requests: write
+        steps:
+            - name: 🏗 Setup repo
+              uses: actions/checkout@v3
+
+            - name: 🏗 Setup Node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 20.x
+
+            - name: 🏗 Setup EAS
+              uses: expo/expo-github-action@v8
+              with:
+                  eas-version: latest
+                  token: ${{ secrets.EXPO_TOKEN }}
+                  packager: npm
+
+            - name: 📦 Install dependencies
+              run: npm install
+
+            - name: 🚀 Create preview with environment variables to development build
+              run: npm run push-to-dev-with-branch ${{ github.head_ref }}

.gitignore

@@ -30,7 +30,7 @@ yarn-error.*
 *.pem
 
 # local env files
-.env*
+.env.local
 
 # typescript
 *.tsbuildinfo

app.config.js

@@ -1,8 +1,26 @@
-const IS_STAGING = process.env.EXPO_PUBLIC_APP_VARIANT === "staging";
+const getAppName = () => {
+	if (process.env.EXPO_PUBLIC_APP_VARIANT === "staging") {
+		return "Dife(Staging)";
+	} else if (process.env.EXPO_PUBLIC_APP_VARIANT === "dev") {
+		return "Dife(Dev)";
+	} else {
+		return "Dife";
+	}
+};
+
+const getIOSBundleIdentifier = () => {
+	if (process.env.EXPO_PUBLIC_APP_VARIANT === "staging") {
+		return "com.teamdiverse.dife.staging";
+	} else if (process.env.EXPO_PUBLIC_APP_VARIANT === "dev") {
+		return "com.teamdiverse.dife.dev";
+	} else {
+		return "com.teamdiverse.dife";
+	}
+};
 
 export default {
 	expo: {
-		name: IS_STAGING ? "Dife(Staging)" : "Dife",
+		name: "Dife",
 		slug: "dife",
 		version: "1.0.0",
 		owner: "team-diverse",
@@ -17,9 +35,10 @@ export default {
 		assetBundlePatterns: ["**/*"],
 		ios: {
 			supportsTablet: true,
-			bundleIdentifier: IS_STAGING
-				? "com.teamdiverse.dife.staging"
-				: "com.teamdiverse.dife",
+			bundleIdentifier: getIOSBundleIdentifier(),
+			infoPlist: {
+				CFBundleDisplayName: getAppName(),
+			},
 			config: {
 				usesNonExemptEncryption: false,
 			},
@@ -53,6 +72,7 @@ export default {
 					enabled: false,
 				},
 			],
+			"expo-localization",
 		],
 	},
 };

eas.json

@@ -5,13 +5,21 @@
 	},
 	"build": {
 		"development": {
+			"autoIncrement": true,
 			"developmentClient": true,
 			"distribution": "internal",
+			"env": {
+				"EXPO_PUBLIC_APP_VARIANT": "dev",
+				"EXPO_PUBLIC_API_URL": "https://difeapp.com/api",
+				"EXPO_PUBLIC_WS_URL": "wss://difeapp.com/ws",
+				"EXPO_PUBLIC_MOCK_LOGIN": "true",
+				"EXPO_PUBLIC_MOCK_EMAIL": "test1@gmail.com",
+				"EXPO_PUBLIC_MOCK_PASSWORD": "password1234!"
+			},
 			"channel": "development"
 		},
 		"preview": {
-			"distribution": "internal",
-			"channel": "preview"
+			"distribution": "internal"
 		},
 		"production": {
 			"autoIncrement": true,