frontend-maven-plugin блокирует ответ сервера в режиме разработки? - PullRequest
0 голосов
/ 02 марта 2020

Я в основном java разработчик и имею минимальный node.js опыт. Я разработал java весеннее приложение и решил, что мне нужен минимальный внешний интерфейс для него, который я сделал в React, созданном с помощью приложения Create React. У меня были проблемы с его развертыванием и запуском в AWS с определенными ограничениями портов, поэтому мне было рекомендовано использовать frontend-maven-plugin, чтобы упаковать все это в jar и запустить оттуда. Я сделал это успешно, по крайней мере локально.

Однако теперь я хочу go вернуться в режим разработки и добавить больше функций, похоже, что-то блокирует ответ сервера от возврата к внешний интерфейс. Когда я говорю «режим разработки», я имею в виду, что я вернулся к использованию «npm start» с локальным клиентом реакции, работающим через порт 3000, и записью в пакете. json, чтобы прокси-сервер указывал на мою локальную работу апи. Я убедился, что запрос со страницы React поступает на сервер, но затем ответ никогда не возвращается клиенту. Я посмотрел на сетевой трафик c в Chrome разработчику и все, что он говорит, - «Не удалось загрузить данные ответа».

Когда я делаю запрос к той же конечной точке API, в браузере для Например, ответ возвращается нормально. Ответ прост json.

Я использую fetch в компонентах React для вызова API бэкэнда. Пример ниже.

Я предполагаю, что узел или NPM установили что-то, когда я запускал его через maven и frontend-maven-plugin, что влияет на это. NPM является для меня гигантским черным ящиком, поэтому я не уверен, как еще можно диагностировать это или посмотреть, что блокирует ответ на страницу реакции.

структура проекта выглядит следующим образом:

/root-app-repo-name
  /app - the React app; unfortunately named when created with Create React App
    /build
    /node
      /node_modules
    /node_modules
    /public
    /src
  /src - java source
  /target
    maven build output jar is here
  pom.mxml

Почему есть 2 папки node_modules?

Пример API вызова компонента React с выборкой:

import React, { Component } from 'react';
import { Button, Container, Table } from 'reactstrap';

class Account extends Component {

  constructor(props) {
    super(props);
    this.state = {account: {}, isLoading: true};
  }

  componentDidMount() {
    this.setState({isLoading: true});

    fetch(process.env.API_URL+'/api/account')
      .then(response => response.json())
      .then(data => this.setState({account: data, isLoading: false}));
  }

  render() {
    const {account, isLoading} = this.state;

    if (isLoading) {
      return <p>Loading...</p>;
    }

    return (
      <div>
        <Container fluid>
            Account Num : {account.accountNum}
        </Container>
      </div>
    );
  }
}

export default Account;
...