2017-12-02 14 views
1

はピクルスの私の問題です:ところで、私はいくつかの問題グーグルを介してこれを行う方法を見つけていたと私はだから私は私ReactJSのウェブサイトを持っているのStackOverflowを使用してみましたが、正確な答え反応フロントエンドとエクスプレスバックエンドを接続するにはどうすればよいですか?だからここ

を見つけることができませんでした3000 私はそれがローカルホスト上で起動する:特急サーバーもそのサーバー上で起動している間に反応サーバーを起動別名、3000

糸を実行するために

を開始し、それがローカルホスト上で起動し使用express.jsで。

私が見つけたすべてのチュートリアルのようですが、ほとんどは古く、残りのものは静的なウェブサイトに反応してからエクスプレスを使うガイドです。だから、基本的に私はexpressjsサーバーを持っているとき データベースの詳細が削除されている、その行ISNT ANのERROR

:反応-ルータを

EDIT1の利点のために、サーバー側に反応する私は維持したいと思いますconst express = require( 'express'); var app = express();

var mysql = require( 'mysql'); var connection = mysql.createConnection({host: データベース: 'main'});

connection.connect()

app.post( '/ユーザ、機能(REQ、RES){VARユーザー= req.body; res.end( '成功');})

app.listen(3000、関数(){にconsole.log( 'エクスプレスサーバは、ポート3000上の を聴取している')})

//connection.end()

Iも開始ヤーンスタンドを使用したCreate-Reaction-Appサーバーそれはlocalhost:3000で起動しますが、このexpressjsサーバーはそれをオーバーライドします。

は、だから私はポストを送信できるようにするために2つを接続したい私は最近、この戦略を実装するサンプルレポに取り組ん

+0

エクスプレスサーバーをポート3001で、リアクションフロントエンドをポート3000で実行できない理由はありますか?これを行うと、 "localhost:3001/users"を介してエクスプレスサーバーにアクセスして、ポストリクエストを送信できます。 – bluesixty

+0

@bluesixtyこれをAWSサーバーに置くとどうなりますか? – adriam

答えて

1

要求します。これを行うにはいくつかの方法がありますが、これを行う最も簡単な方法は、別のポートで実行される第2のサーバーとしてエクスプレスサーバーを起動することです。 concurrentlyを使用して、反応サーバー(私はwebpackと仮定しています)とExpress APIサーバーの両方を1つのコマンドで起動できます。

Here is a tutorialこの設定方法を示しています。このチュートリアルでは、Webpackサーバーを介してクライアント(ブラウザ)からの要求をプロキシする方法について説明します。 Webpackサーバーを介して要求をプロキシしない場合は、CORS構成に関して考えなければならないいくつかの考慮事項があります。

Here is my proof of concept repoあなたが探しているものだけを実装しました。反応するクライアントとエクスプレスサーバー。それはrun via concurrentlyまたはドッカー(compose)とすることができます。

+0

ちょうどそのチュートリアルは素晴らしかった、数日間これを探していた、本当にうまく動作し、OPに答えると言いたい。 – rrd

+0

クール、ありがとう。私は、反応、ドッカー、エクスプレス、アポロ/グラフの間に、それらのそれぞれが大量のチュートリアルを含む大規模なプロジェクトであることを知っています。私はそれらをすべて1つのチュートリアルプロジェクトで結びつけたいと思っていました。 – Mikelax

関連する問題