ExpressJSを使用して本番サーバーにReactJSアプリを起動してデプロイする方法がわからない

debugcn 投稿 Dev

マット

ローカルでは、ポート3001でExpressJSを使用しnpm startてから、ポート3000で開発サーバーを実行するreactアプリを起動します。これにより、リクエストをプロキシとして3000から3001にルーティングできます。

本番環境では、16.04のDigitalOceanDropletにUbuntuNodeJS 6.12.13をインストールしてから、NginxとPM2をインストールしました。

Nginxdefaultファイルで次のように設定しました。

location / {
    proxy_pass http://localhost:3001;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

ExpressとReactのセットアップを移動し、ExpressサーバーをPM2スタートアップに追加しました。Nginxは、ポート3001でExpressを使用するためのリバースプロキシサーバーとして使用されてwwwいます。これがPM2スタートアップです（Expressを実行するサーバーファイルの名前です）。

ドメインを読み込むと、Expressのデフォルトページが表示されます。

現在、reactアプリを使用して起動npm startし、本番サーバー用にターミナルを開いたままにしておくのは論理的ではないように思われるため、reactアプリを起動する方法がわかりません。Expressメッセージではなく、ドメインにアクセスしたときにReactアプリを表示する必要があります。

使用することに言及している記事を見つけましたnpm run buildが、Reactアプリを実行する方法を説明していません。申し訳ありませんが、これは初めてですが、何か助けていただければ幸いです。ありがとうございました。

devserkan

そのようなことはないので、Reactアプリを実行しません:)アプリをビルドした後、すべてのファイルを1つのJavascriptファイルにバンドルします。start開発目的で開発中のReactアプリに使用しています。

行った後：

npm run build

あなたが持っているでしょうbuild、あなたのappディレクトリ内のディレクトリを。このbuildディレクトリから、Nginxのデフォルトディレクトリが指すサーバーにすべてのファイルとディレクトリをコピーするだけです。

あなたは、ブラウザの開発者向けツールで、あなたの通常のアプリのコードを開き、削除したくない場合build/static/js/some_file.js.mapやbuild/static/css/some_file.css.map、サーバーにファイルをアップロードする前に。これらは、デバッグを目的としたソースマップファイルです。それらを含めると、開発者ツールでは誰もがあなたのファイルを直接見ることができます。あなたのコードは実際には誰にでも開かれていますが、バンドルされ、醜く、縮小された方法で開かれています。ソースマップファイルを含めると、そのまま開かれます。

これは、静的アプリを実行する方法です。バックエンドがないということは、ここではExpressがなく、Webサーバーを使用していることを意味します。

ただし、質問にはExpressが関係しているため、バックエンドサーバーを使用していると思います。したがって、1つの方法は、開発で使用しているすべてのバックエンドコードとフロントエンドコードを使用して、すべてのプロジェクトをサーバーに再度コピーすることです。Reactアプリを作成します。ただし、今回はExpressサーバーとReact開発サーバーの両方を起動する代わりに、サーバーでExpressのみを実行します。Expressがフロントエンドにサービスを提供します。開発でこれをすでに構成し、いくつかの実稼働テストを実行している必要があります。

したがって、バックエンドサーバーを使用しない場合は、単一のWebサーバー以外にExpressやその他のものは必要ありません。バックエンドサーバーを使用する場合は、バックエンドリクエスト（APIなど）とReactアプリの両方を処理するためにExpressのようなものが必要です。さらに、Expressを実行するにはPM2のようなものが必要であり、さまざまなアプリのプロキシを使用するにはオプションでExpressが必要です。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-5

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

ExpressJSを使用して本番サーバーにReactJSアプリを起動してデプロイする方法がわからない

ExpressJSを使用して本番サーバーにReactJSアプリを起動してデプロイする方法がわからない

Centos7を使用して本番サーバーにmeteorアプリをデプロイする方法

drupalサイトをローカルにセットアップしてから本番サーバーに移動する方法...

Jenkinsを使用して本番サーバーにデプロイする

プロバイダーを使用してアプリの起動時に状態をロードする方法

djangoアプリを本番サーバーにデプロイします。gitcloneに環境（env）を含める必要がありますか？

jboss 7.1.1サーバーを起動してjboss 7.1.1にプロジェクトをデプロイする方法

Angular 10：ブラウザーの戻るボタンを使用して外部URLから戻るときに、FirefoxでデプロイされたアプリバージョンでngOnInitが起動しない

アプリがモバイルデバイスから起動したときに、サーバーから.js（すべてのコンポーネント）ファイルを動的にダウンロードします

本番サーバー証明書を使用して、開発アプリにプッシュ通知を送信する

iisを使用してMVCアプリケーションをライブサーバーにデプロイすると、「HRESULTからの例外：0x800A03EC」というエラーが発生するのはなぜですか？

プライベートサーバーにgitlab-ciを使用してsymfonyアプリを自動デプロイする方法は？

本番サーバーにgulpをデプロイする方法

誰かが使用している場合にJavaアプリケーションをデプロイする方法

バックボーンjsアプリを本番サーバーにデプロイする方法。

cca Google Chromeアプリを使用しているときに、バックグラウンドサービスからChromeアラームを起動する

Redmiデバイスのバックグラウンドサービスからアクティビティを起動しているときに「アクティビティ画面」に最近のアプリが表示されない理由

パイプラインを使用してAzuredevopsからアプリケーションをデプロイし、サブスクリプションと組織が異なるAzureAppServiceにするにはどうすればよいですか

ReactJSの静的サーバーを介してアプリケーションを提供しながら新しいポートを設定する方法

Windows のサービスからユーザーのデスクトップにログオンしていないアプリケーションを起動する方法

WildFlyサーバーを起動して設定し、1回のMaven実行でwildfly-maven-pluginを使用してアプリをデプロイします

WildFlyサーバーを起動して設定し、1回のMaven実行でwildfly-maven-pluginを使用してアプリをデプロイします

Angular UniversalアプリをNode.js本番サーバーにデプロイする方法は？

データベース接続を使用してコードをAzureWebにデプロイすると、Flaskアプリはレンダリングに失敗しますが、ローカルサーバーからは正常に機能します

Dockerを使用して本番サーバーをUPSでデプロイすることをお勧めしますか？

デプロイ時にTomcatがアプリケーションを起動しないようにする

Tomcat本番サーバーでコードを編集しているときにクリーンアップして再起動する方法とタイミング

Nginxサーバーを使用してUbuntuサーバーにdotnetコアアプリケーションをデプロイする方法は？

アプリが起動するたびにGCMにデバイスを登録するのが正しいアプローチですか？

ファイルリストから画像を削除し、APIリクエストを使用してサーバーにアップロードする方法は？