面向开发、UAT和生产的世博应用环境

Question

我有一个反应本地应用程序内置于世博会，连接到一个Rest。rest dev、uat和生产有三种环境，如下所示(示例)。

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

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

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

要做到这一点，最简单的方法是什么？

Answer 1

遵循以下步骤

1. 安装expo-constants软件包。若要安装包，请运行以下命令。 npm i展览馆-常数
2. 添加environment.js文件并粘贴到代码下面。

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. 若要创建构建，请使用以下命令。

开发-世博构建:ios-发布-通道开发

分期-博览会构建:ios-发布通道暂存

生产-博览会建设:ios-释放-通道prod

现在博览支持配置文件为app.config.js或app.config.ts，我们可以使用dotenv。检查这个：https://docs.expo.io/guides/environment-variables/#using-a-dotenv-file

• 参考链接

Answer 2

这可以使用不同的发布通道名称来完成，假设您已经以这种方式创建了3个发布通道：

expo publish --release-channel prod
expo publish --release-channel staging
expo publish --release-channel dev

然后，您可以使用一个函数来相应地设置环境vars：

import * as Updates from 'expo-updates';

function getEnvironment() {
  if (Updates.releaseChannel.startsWith('prod')) {
    // matches prod*
    return { envName: 'PRODUCTION', dbUrl: 'ccc', apiKey: 'ddd' }; // prod env settings
  } else if (Updates.releaseChannel.startsWith('staging')) {
    // matches staging*
    return { envName: 'STAGING', dbUrl: 'eee', apiKey: 'fff' }; // stage env settings
  } else {
    // assume any other release channel is development
    return { envName: 'DEVELOPMENT', dbUrl: 'aaa', apiKey: 'bbb' }; // dev env settings
  }
}

有关更多信息，请参考世博会文献！

Answer 3

对于那些正在使用Expo 46(或任何更新版本)的用户，您可以使用以下方法

1. 将app.json重命名为app.config.js
2. 在“附加属性”下添加API URL

export default () => ({
  expo: {
    name: '',
    slug: ''
    extra: {
      API_URL: process.env.API_URL || null,
    },
    // ...
  },
});

我们可以使用像这样的expo常量来访问这个API (在我们想要的地方)。不要忘记从世博会中导入常量。

const myApi = Constants.expoConfig.extra.API_URL 
axios.get(myApi).... // using API END POINT

对于本地开发访问API，您可以通过两种方式进行

1. API_URL="http:// localhost:3000“世博会开始
2. 评论一下Contants.expoConfig.并直接粘贴本地URL，如const myApi = "http:// localhost:3000“

在eas.json中

{
  "production": {
    "env": {
      "API_URL": "https://prod.example.com"
    }
  },
  "staging": {
    "env": {
      "API_URL": "https://staging.example.com"
    }
  }
}

一旦我们运行eas，构建适当的API端点就会被设置。请参阅世博会文档https://docs.expo.dev/eas-update/environment-variables/中的相同内容