Bài 2 - Xây dựng môi trường DEVELOPMENT - STAGING - PRODUCTION

02/02/2023 - 2 phút

Tóm tắt

Khái niệm Environment files

Các Key,secrets và config thường được lưu trữ trong các tệp .env , với các tham số khác nhau tương ứng với các loại xây dựng cụ thể. Bạn có thể quen thuộc với các tệp .env tạo thành phương pháp ứng dụng 12 yếu tố. Các nguyên tắc 12 yếu tố được dành cho các ứng dụng phần mềm như một dịch vụ-phương pháp này không áp dụng hoàn hảo cho sự phát triển RN. Tuy nhiên, việc tiếp cận cấu hình xây dựng theo mô hình 12 yếu tố là một ý tưởng tốt.
Để sử dụng các tiệp cấu hình .env trong các ứng dụng React Native (RN), ta phải thêm react-native-config vào project của bạn. ở đây mình sẽ tạo ra 3 môi trường DEVELOPMENT - STAGING - PRODUCTION

Hướng dẫn

Tạo project base

Để tạo Project ta dùng lệnh:

npx react-native init ReactNativeDevOps

Cài đặt và cấu hình react-native-config

Cài đặt react-native-config

npm i react-native-config --save

Cấu hình IOS

Chạy lện

npx pod-install

Ta mở xcode bằng lệnh

open ios/ReactNativeDevOps.xcworkspace

sau đó mở file AppDelegate.mm

Cấu hình Android

Ta vào file android/app/build.gradle thêm vào dòng số 2 đoạn code

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

trong file android/app/proguard-rules.pro ta thêm dòng

-keep class com.reactnativedevops.BuildConfig { *; }

Tiếp theo ta tạo thêm 3 file ở thư mục root:

DEVELOPMENT (.env)

API_KEY=devKey
API_URI=https://dev.com/api

STAGING (.env.stg)

API_KEY=stagingKey
API_URI=https://staging.com/api

PRODUCTION (.env.prod)

API_KEY=productKey
API_URI=https://prod.com/api

Sau đó ta sử dụng config bằng cách thêm vào scripts trong package.json

{
  "name": "ReactNativeDevOps",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev-android": "ENVFILE=.env react-native run-android", # <- Thêm ở đây
    "stg-android": "ENVFILE=.env.stg react-native run-android", # <- Thêm ở đây
    "prod-android": "ENVFILE=.env.prod react-native run-android",  # <- Thêm ở đây
    "stg-ios": "ENVFILE=.env.stg react-native run-ios", # <- Thêm ở đây
    "dev-ios": "ENVFILE=.env react-native run-ios", # <- Thêm ở đây
    "prod-ios": "ENVFILE=.env.prod react-native run-ios", # <- Thêm ở đây
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.71.2",
    "react-native-config": "^1.5.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.7",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "jest": {
    "preset": "react-native"
  }
}

Sau khi cấu hình xong ta dùng lệnh để run test config

npm run dev-ios

npm run stg-ios

prod

npm run prod-ios

Như vậy thì mình đã cấu hình thành công 3 môi trường dev-stg-prod