Унифицировать локальный доступ к серверу dev api для приложения expo в Android, IOS и в Интернете? - PullRequest
Новая
       56

Унифицировать локальный доступ к серверу dev api для приложения expo в Android, IOS и в Интернете?

0 голосов
/ 03 мая 2020

Я настраиваю простое учебное приложение React Native для нескольких студентов на Expo, которое также общается с сервером API, который студент учится кодировать.

Сервер API студента запускается через node server.js и служит на localhost:3000 на машине студента. Это не имеет ничего общего с выставкой.

Я хочу, чтобы студенты могли запускать свое приложение через любой из expo start --android, expo start --ios или expo start --web на той же машине, где работает их сервер API. Каждый студент работает из дома в другой домашней сети Wi-Fi и не обязательно знает все входы и выходы IP-адресов или сетей.

При использовании expo start --web мы получаем исключения CORS, если мы не используем пользовательские webpack.config.js Обход (сначала создайте webpack.config.js через https://docs.expo.io/guides/customizing-webpack/, затем поместите это в webpack.config.js): 

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  if (config.mode === 'development') {
    config.devServer.proxy = {
      '/**': {
        target: {
          host: 'localhost',
          protocol: 'http:',
          port: 3000,
        },
        secure: false,
        changeOrigin: true,
        logLevel: 'info',
      },
    };
  }
  return config;
};

Это здорово, потому что мы можем делать вызовы API на ./end/point, не зная ip-адреса студента, а веб-пакет devServer, запущенный expo-cli, эффективно проксирует до http://localhost:3000/end/point на машине разработчика студента.

Между тем, для iOS и Android, Я нашел этот фрагмент: 

import Constants from "expo-constants";
const { manifest } = Constants;
const SERVER_URL = "http://"+manifest.debuggerHost.split(`:`).shift().concat(`:3000`)+"/";

, а затем с помощью SERVER_URL при использовании fetch().

Но нам не хватает единого решения, которое работает агности c в какой среде мы находимся (web, ios или android). Прокси webpack, по-видимому, включен и работает только при использовании веб-клиента expo (expo-cli не запускает webpack для ios или android), а второй вариант (A) не работает сразу после установки в Интернете, и (B) в любом случае вызовет исключение CORS.

Как я могу элегантно написать один бит кода или иным образом настроить проект для студентов, чтобы (A) им не нужно было знать IP-адрес своей машины разработчика, или что это значит, и (B) он будет работать независимо от того, находятся ли они в сети, android или ios выставочный клиент?

1 Ответ

0 голосов
/ 06 мая 2020

Не нравится это как ответ, и я бы предпочел, чтобы кто-то, кто знает лучше, указал лучше, но это то, что я в итоге использовал, похоже, работает, по крайней мере, в разработке: 

// Some chatter that Contants.manifest needs to come from a different package?
import Constants from "expo-constants";
const { manifest } = Constants;

const SERVER_URL = (() => {
  // TODO - put a "prod" api server somewhere

  // Android / IOS - no CORS issue.
  if (!!manifest.debuggerHost) {
    return "http://"+manifest.debuggerHost.split(`:`).shift().concat(`:3000/`);
  } 
  // Expo Web client, making use of webpack.config.js (see original question) for devServer proxy.
  else {
    return "./";
  }
})();

...
fetch(SERVER_URL + 'some_endpoint/').then(...)
...