web-dev-qa-db-ja.com

Google App Engineにアプリをデプロイしていて、APIとクライアントを起動したい

このチュートリアルに従って、GoogleクラウドプラットフォームでAPIとクライアントを取得します。

https://www.freecodecamp.org/news/create-a-react-frontend-a-node-express-backend-and-connect-them-together-c5798926047c/

/ apiと/ clientが入ったルートディレクトリがあります

/ api package.jsonには次のスクリプトがあります

"scripts": {
    "start": "node ./bin/www"
},

/ client package.jsonには次のスクリプトがあります

"scripts": {
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
},

私がそれを配備しようとすると、それは言う：

ステップ＃0：アプリケーションの検出に失敗しました：エラー：node.jsチェッカー：「package.json」の「scripts」セクションにある「start」も「server.js」ファイルも見つかりませんでした。完成したステップ＃0

スクリプトが見つからないと思いますか？デプロイ時にAPIとクライアントを同時に起動するための最良の方法は何ですか？

javascriptnode.jsreactjsexpress
7
ss_matches

私の推測では、報告された問題はルートディレクトリにpackage.jsonファイルがないという事実によって生成されたと考えられます。ルートディレクトリに1つ追加して、appおよびclientディレクトリにあるものを処理することもできますしかし...

...しかし、あなたが使用したチュートリアルを見て、私が気に入らないものを見つけたので、いくつかの提案をしたいと思います。私は最近、イタリアのcovid-19拡散に関するチャートを視覚化するシンプルなツールを開発しました。これは、アプリと同じ構造を使用しており、アプローチは異なります。主な違いは、それをVPSにデプロイし、外部ツールを使用して起動するため、package.jsonファイルには、製品で起動するためのscriptコマンドがありません。それは次のようなものです：

cd client && npm install && npm run build && cd .. && npm install && node server.js

github repos を参照してアイデアを得ることができますが、主な違いについて説明します。

  1. サーバースタッフ（package.json付き）はルートディレクトリにあります（これで問題が解決する可能性があります）
  2. 他の回答と同様に、ビルドされたクライアントを静的ファイルとして提供するには、Expressアプリに2行を追加する必要があります。
  3. proxyパッケージではなくcors機能を使用することをお勧めします。

あなたのエクスプレスアプリで：

// At the begenning, with other middlewares
app.use(express.static(path.join(__dirname, "client", "build")));
// As last, to substitute any 404 with your client home page
app.get("*", (req, res) => res.sendFile(path.join(__dirname, "client", "build", "index.html")));

どの種類のデータを処理するのかわかりませんが、CORSは、少なくともcorsパッケージによって）無効にしてはならない一種の保護です。これ以上、報告された問題を解決できるようになると、使用したチュートリアルの次の部分はアプリユーザーのlocalhost:9000からAPIを取得しようとするため、機能しません。

callAPI() {
    fetch("http://localhost:9000/testAPI")
        .then(res => res.text())
        .then(res => this.setState({ apiResponse: res }));
}

CORSを有効にし、localhostからのフェッチの問題を解決するには、proxy機能を使用する必要があります。クライアントのpackage.jsonファイルに次の行を追加するだけです。

"proxy": "http://localhost:9000/",

これにより、クライアントフェッチ関数を次のように変更するよりも、webpack開発サーバーが開発サーバーに処理できないプロキシ呼び出しになります。

callAPI() {
    fetch("/testAPI")
        .then(res => res.text())
        .then(res => this.setState({ apiResponse: res }));
}

開発環境と製品環境の両方で自動的に機能し、CORSを有効に戻すことができます。

お役に立てれば。

2
Daniele Ricci

そのチュートリアルでは、その人がcreate-react-appを使用してreactアプリを作成しているため、2番目のpackage.jsonの「start」コマンドに次のコマンド「node server.js」がある理由がわかりません。 "start"： "react-scripts start"が必要ですが、問題は解決しませんが、server.jsが別のサーバーかどうかはわかりません。

とにかく私はあなたを助けようとします、最初に 'create-react-app'は開発に優れた内部的にwebpack-dev-serverを使用するアプリを作成しますが、アプリをデプロイするにはこのコマンドを実行する必要があります

npm run build

その後、あなたの反応アプリで「ビルド」と呼ばれるフォルダーがあります。次に、そのフォルダーをコピーしてサーバープロジェクトに移動し、そこに「build」フォルダーを貼り付けます。完了したら、次のコードを追加して、静的ファイルを提供することをサーバーに通知する必要があります

app.use(express.static(path.join(__dirname, 'build')));

ルートも追加する必要があります

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

これで、サーバーのみをローカルで実行してテストできます。「/」パスを使用すると、reactアプリに移動します。それが機能していることがわかったら、ビルドフォルダーと1つのpackage.jsonを備えたサーバーのみをGoogle App Engineにデプロイできます。お役に立てば幸いです。

1
Gustavo A Olmedo