Reactjs expressjs как настроить прокси? прокси не работает с localhost: 3000, но работает с localhost: 3000 / test

Пытаюсь работать с reactjs (create-react-app) и теперь включаю expressjs. То, что я сделал, это

  1. переместите мой folder/* в folder/client/* (удаление node_modules)
  2. cd folder/client/ и npm install для воссоздания node_modules * работает как раньше, приложение хорошо отрисовывает
  3. cd folder и npm init
  4. npm install express --save
  5. написать folder/server.js
  6. добавляем настройки прокси в /folder/client/package.json
  7. npm run start в /folder и в /folder/client

Затем я перехожу к localhost:3000 и получаю приложение responsejs, без каких-либо выражений. Затем я перехожу к localhost:8080 и получаю экспресс-результат, который действительно является той же страницей, что и раньше, но без выполнения с помощью реакции (я полагаю, здесь нет ничего плохого)

Затем я перехожу к localhost:3000/test, и он получает прокси для выражения, где я вижу в терминале console.info server.js.

Поэтому я не могу проксировать localhost:3000, но могу localhost:3000/whatever. Что случилось?

server.js

    const express = require('express');
    const path = require('path'); // haven't installed, should I?
    const app = express();
    app.use(express.static(path.join(__dirname, 'build'))); // of no use here

    app.get('/ping', function (req, res) { // this one works
     return res.send('pong');
    });

//    app.get('', function (req, res) { // doesn't work
//    app.get('*', function (req, res) { // doesn't work
//    app.get('.', function (req, res) { // doesn't work
//    app.get('.*', function (req, res) { // doesn't work
//    app.get('./', function (req, res) { // doesn't work
    app.get('./*', function (req, res) { // doesn't work
      console.info('hey') // never seen
      res.sendFile(path.join(__dirname, 'client/src', 'index.html'));
    });

    app.get('/test', function (req, res) { // this one works
      console.info('hey2') // I do see this when calling localhost:3000/test
      res.sendFile(path.join(__dirname, 'client/src', 'index.html'));
    });

    app.listen(process.env.PORT || 8080);

package.json (/)

{
  "name": "ouyea",
  "version": "0.1.1",
  "description": "This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://xxxx"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://xxxx"
  },
  "homepage": "https://xxxx",
  "dependencies": {
    "express": "^4.16.4"
  }
}

package.json (/ клиент)

    {
      "name": "client",
      "version": "0.1.1",
      "private": true,
      "dependencies": {
        "axios": "^0.18.0",
        "googleapis": "^33.0.0",
        "papaparse": "4.6.0",
        "react": "^16.4.2",
        "react-dom": "^16.4.2",
        "react-scripts": "1.1.4",
        "semantic-ui-css": "^2.4.0",
        "semantic-ui-react": "^0.82.5"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
      },
      "proxy": {
        "": { // I know comments don't work, but I put them here for clarity, none of them worked
//        "*": {
//        ".": {
//        "/": {
          "target": "http://localhost:8080"
        },
        "/test": {
          "target": "http://localhost:8080"
        }
      }
    }

Непонятно, что вы пытаетесь сделать. localhost:3000 - это ваше приложение для разработки (предположительно, запускает горячую перезагрузку модуля)? Дело в том, что вы используете прокси-сервер 8080 для доступа к конечным точкам в своем экспресс-приложении, например localhost:3000/api, для получения данных.

Andy 13.10.2018 15:13

аааа ... Понятно ... так что express не управляет приложением, это всего лишь сервер для управления службами, которые должны быть в бэкэнде. Я правильно говорю? тогда кто управляет приложением?

GWorking 13.10.2018 15:15

Да, для ваших целей. Существуют приложения, которые представляют собой страницы React, отображаемые на сервере с использованием Express / Koa и т. д., И которые используют клиентскую сторону React (универсальные / изоморфные приложения), но это не то, что вы здесь делаете.

Andy 13.10.2018 15:16

Не могли бы вы написать то же самое в качестве ответа, чтобы я мог закрыть это? в противном случае я могу отбросить вопрос, но ... ну, это может звучать глупо, но я застрял здесь: _)

GWorking 13.10.2018 15:19
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
728
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Цель экспресс-сервера - просто а) отобразить базовую HTML-страницу из вашей папки dist и б) предоставить данные с конечных точек, которые вы настроили в качестве маршрутов в Express, к которым может получить доступ ваше клиентское приложение React. Существуют приложения (универсальные), которые могут отображать страницы React из Express, но это не то, что вы делаете здесь с create-react-app.

Другие вопросы по теме