web-dev-qa-db-ja.com

React + NodeJS ExpressアプリケーションをAWSにデプロイするには？

React + Webpack/Babel + Node/Expressアプリケーションがあり、AWSにデプロイしたい。

ReactとNode/Expressを個別にデプロイする必要がありますか？または、同時に一緒にデプロイできますか？

javascriptnode.jsamazon-web-servicesreactjsdeployment
44
Dan Me

1. 2つの異なるプロジェクトがある場合

- 例えば。 React シングルページアプリ およびNode/Express API。

a。両方を別々に展開できます

別のオプションは、 Elastic Beanstalk または EC2 で両方の部分を一度にデプロイすることです。ただし、S3およびCloudFrontでのホスティングのメリット、つまりユーザーへの配信の高速化および安いコスト。私の意見では、Webアプリケーションのクライアント側とサーバー側を別々に更新してデプロイする方が、より便利で、予期しないエラーが発生しにくいと思います。

個別にデプロイする別の利点：フロントエンドとバックエンドで異なるチームを持つ組織の場合、各チームが自分のアプリケーションの側を自分でデプロイするのが簡単です他のチームに依存することなく。

b。 S3単独ではなくS3 + CloudFrontを使用する理由

  • すべて CDNを使用する利点
  • 1クリックで独自のドメイン名と無料のSSL証明書
  • 4xxエラーのリダイレクト（アプリでHTML5 Historyベースのルーターを使用する場合に必要）
  • キャッシングシステム
  • http2 およびhttp to httpsリダイレクト

c。 CORSの処理方法

さまざまなサブドメインを使用できます。

  • api.domain.com Node/Express APIの場合
  • app.domain.com Reactアプリ用

次に、APIで CORSを有効にします ：

app.get('/api', cors({ Origin: 'https://app.domain.com' }), ...)

2.単一のプロジェクトがある場合

- 例えば。 Nodeビューを含むReactアプリ。

アプリケーション全体を Elastic Beanstalk または EC2 にデプロイする必要があります。

注：2つのサブプロジェクト（Reactアプリ用のフォルダーとNode AP​​I用の別のフォルダー）を含む単一のプロジェクトがあり、両方のサブプロジェクトが引き続き機能する場合それらが分離されたら、サブプロジェクトを個別にデプロイできます（回答の最初の部分を参照）。

3.両方の場合

Reactパーツをデプロイする前に、 Webpack build を実行します。手動（AWSにデプロイする前）または自動（ [〜＃〜] ci [〜＃〜] / [〜＃〜] cd [〜＃〜] システム）。

4.ツール

  • 公式のAWS S3 CLI -高レベルのaws s3コマンドを使用してS3バケットとオブジェクトを管理します。
  • 公式のAWS Elastic Beanstalk CLI -ebコマンドを使用してバックエンドを管理およびデプロイします。
  • S3-deploy -S3にファイルを展開するためのCLIユーティリティ。

5. AWSに限定されない場合

関連する質問に答えました AWSに限定されません。

63
GG.

基本概念

手間をかけずにアプリを展開するには、3つの概念（マイクロサービス、コンテナー、プロセスマネージャー）について学ぶ必要があります。それらについてもう少し詳しく説明し、いくつかのリンクで説明します。

マイクロサービス

マイクロサービスは、アプリをより小さなサービスに分割できるアーキテクチャです。これには複数の利点があります：1-サービスは簡単にテストできます。 2-サービスは交換可能です。 3-サービスは個別に拡張できます。

Monolith vs Microservices design

コンテナ化

ほとんどすべての便利なアプリには、少なくとも数十の依存関係があります。ターゲットマシンに依存関係をインストールできますが、ほとんど確実にいくつかの課題に直面します。 Dockerなどのプログラムを使用すると、アプリのコンテナーを作成し、そのコンテナーをクラウドに展開できます。 （クラウドプロバイダーに関係なく） 詳細...

プロセスマネージャー

プロセスマネージャーは、アプリがスムーズに実行され、すべての部分が正常であることを確認します。アプリがクラッシュした場合、アプリを簡単に再起動できます。

1.サーバーレスNodeJSのデプロイ/ Reactアプリケーション

注：この方法は、ReactJSでサーバーレンダリングを実行している場合は機能しません。次のオプションに進みます。

アプリをビルドして、静的なS3 Webサイトに展開するだけです。このオプションは、マイクロサービスアーキテクチャを使用してAPIを反応アプリから分離する場合に機能します。

S3で静的Webサイトを作成するのは本当に簡単です。

  1. Webサイトの正確な名前でS3にバケットを作成します。例：blog.stackoverflow.com。
  2. 静的ホスティングを有効にする
  3. Route 53でAレコードを作成し、作成したバケットに接続します。

詳細については、AWS handy documentation を確認してください。

2. NodeJSアプリケーションをEC2にデプロイする

マイクロサービスごとに異なるEC2インスタンスを起動できます。 （API、React appなど）） PM2 などのプロセスマネージャーを使用して、アプリがスムーズに実行されるようにする必要があります。

継続的デリバリー（展開の自動化）

自動展開を作成するには、 Terraform と Ansible を組み合わせて使用​​することを好みます。 Terraformは非常に宣言的です。クラウドインフラストラクチャがどのように見えるかを説明し、Terraformがそれを構築します。

一方、Ansibleは非常に手続き型であり、新しいサーバーのプロビジョニングに最適です。

エラー処理とレポート：Sentry

理想的には、バグのあるコードが本番環境に出荷されるのを防ぐために、単体テストが必要です。 （浅いレンダリングには Jest と supertest 、 Enzyme を使用します）。しかし、世界は不完全であり、クライアントで発生する可能性のあるバグを受け取るのは良いことです。 Enter Sentry

9
bman