用于开发、UAT 和生产的 Expo 应用程序环境 [英] Expo App environments for Dev, UAT and Production

问题描述

我有一个内置在 Expo 中的 React Native 应用程序，它连接到一个 Rest API.其余 api 有三种环境 - dev、uat 和 production，如下所示(示例).

I have a React Native app built in Expo that connects to a Rest API. There are three environments for the rest api - dev, uat and production as below (example).

dev = https://dev.myapi.com/api
uat = https://uat.myapi.com/api
prod = https://prod.myapi.com/api

根据应用的使用位置，它需要连接到正确的环境.

Depending on where the app is being used it needs to connect to the correct environment.

Running in the Expo Client = Dev API
Running in TestFlight or Internal Testing for the Play Store = UAT API
Running in the App Store or Play Store = Production API

实现这一目标的最简单方法是什么?

What is the simplest way to achieve this?

推荐答案

按照以下步骤操作

1. 安装 expo-constants 包.要安装软件包，请运行以下命令.

1. Install expo-constants package. To install the package run the below command.

npm i expo-constants

添加 environment.js 文件并粘贴以下代码.

Add environment.js file and paste below code.

import Constants from 'expo-constants';
import { Platform } from 'react-native';

const localhost = Platform.OS === 'ios' ? 'localhost:8080' : '10.0.2.2:8080';

const ENV = {
  dev: {
    apiUrl: 'https://dev.myapi.com/api',
    amplitudeApiKey: null,
  },
  staging: {
    apiUrl: 'https://uat.myapi.com/api',
    amplitudeApiKey: '[Enter your key here]',
    // Add other keys you want here
  },
  prod: {
    apiUrl: 'https://prod.myapi.com/api',
    amplitudeApiKey: '[Enter your key here]',
    // Add other keys you want here
  },
};

const getEnvVars = (env = Constants.manifest.releaseChannel) => {
  // What is __DEV__ ?
  // This variable is set to true when react-native is running in Dev mode.
  // __DEV__ is true when run locally, but false when published.
  if (__DEV__) {
    return ENV.dev;
  } else if (env === 'staging') {
    return ENV.staging;
  } else if (env === 'prod') {
    return ENV.prod;
  }
};

export default getEnvVars;

1. 访问环境变量

// Import getEnvVars() from environment.js
import getEnvVars from '../environment';
const { apiUrl } = getEnvVars();

/******* SESSIONS::LOG IN *******/
// LOG IN
// credentials should be an object containing phone number:
// {
//   "phone" : "9876342222"
// }
export const logIn = (credentials, jsonWebToken) =>
  fetch(`${apiUrl}/phone`, {
    method: 'POST',
    headers: {
      Authorization: 'Bearer ' + jsonWebToken,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(credentials),
  });

1. 要创建构建，请使用以下命令.

开发 - expo build:ios --release-channel dev

登台 - expo build:ios --release-channel 登台

生产 - expo build:ios --release-channel prod

现在 Expo 支持 app.config.js 或 app.config.ts 等配置文件，我们可以使用 dotenv.检查这个:https://docs.expo.io/指南/环境变量/#using-a-dotenv-file

Now that Expo supports config file as app.config.js or app.config.ts, we can use the dotenv. Check this: https://docs.expo.io/guides/environment-variables/#using-a-dotenv-file

• 参考链接

这篇关于用于开发、UAT 和生产的 Expo 应用程序环境的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！