DynamoDB（MongoDB） + Express + React + Nodejs（DERN Stack, MERN Stack）のアプリをAWSのElastic Beans Talkへデプロイする

前言

この記事ではアプリケーションの具体的な開発方法は記録しない。ただ、DERN(MERN) Stackで開発したアプリをElastic Beanstalkへデプロイする方法を記録する。自分のメモとしても記録するし、誰かに一人でも役に立てば良いと思う。

• Nodeを利用してアプリを開発し始めた初心者
• 開発したアプリをサーバへデプロイしたい方

アプリをWebへ公開する方法は多数ある。AWSも数多いクラウドサービスの中の一つで、AWSの中でもEC2などのWebサーバをセットアップしてからアプリを公開しても良いが、Elatic BeanstalkのようなPaaS(Platform as a Service)サービスを利用することで、開発者は開発のみに専念して良くなる。

本文

アプリの準備

最初、MERN StackでWebアプリ開発し、AWSへデプロイしようとしていたが、AWSはMongoDBをデフォルトではサポートしていない。また、DynamoDBは25GBまで永久無料なので、MongoDBの代わりにDynamoDBを利用することにした。有名なMERN Stackではなく、DERN Stackと呼んで良いでしょう。

まず、今回のデプロイするプロジェクトは、以下のコードを利用している。Gitから両方のプロジェクトをそれぞれダウンロードして、二つのプロジェクトフォルダを同じ階層に配置する。以降のプロジェクトを統合するときに必要な事項となる。
https://github.com/AaronKim-CN/cloudDIYPhoto_API
https://github.com/AaronKim-CN/cloudDIYPhoto_Client

次に、Elastic Beans Talkへアプリをデプロイするためには、プロジェクト全体を一つのファイルに圧縮してアップロードする必要がある。現在、アプリはサーバ側とクライアント側で分かれているため、それを統合する必要がある。そのため、API側のコードにGULPを導入している。

クライアントのアプリとサーバ側のプロジェクトを同じ階層のフォルダにして、サーバ側でgulpを実行するとデプロイ用でサーバ側とクライアント側の必要なファイルが統合された新しいフォルダ「prod-build」が自動生成される。また、Elastic Beanstalkへデプロイする際に必要なZipファイルも生成される。

// gulpfileがあるapiフォルダへ移動する
cd api
// gulpコマンドを実行し、クライアントとサーバのコードを統合する
gulp

Elastic Beanstalkへデプロイする

AWSのコンソールへログインして、Elastic Beanstalkという機能を検索して、管理画面へ移動する。こちらにて「Create Application」から新しいアプリを作成することが可能。

1.名前などアプリケーションの基本情報を定義

こちらは識別名として、好きなアプリ名やタグを追加して良い。

2.Node.jsのプラットフォームを選択

今回利用するアプリはNode バージョン12にて検証されているため、プラットフォームのブランチはNode.js12を指定する。

3.ソースコードのアップロード

アプリ準備の段階で用意したZipファイルをこちらでアップロードし、「アプリケーション作成」をクリックする。

4.環境の自動構築

Elastic BeansTalkは自動的にEC2やネットワークやセキュリティグループなどの設定が行われる。全ての環境構築が完了するまでに数分ほどの時間がかかる。

環境の準備が完了すると、下記のような内容を確認することが可能。環境名の下にアプリへアクセス可能なURLがあるので、そのURLをクリックしてデプロイされたアプリを確認して良い。

環境変数の設定

現状はアプリをデプロイしただけで、アプリの稼働に必要な環境設定がされていない。デプロイしたアプリの環境確認画面の左側に「設定」という項目があり、それをクリックすると多数の設定項目が現れる。今回設定したい環境変数は「ソフトウェア」の中にあるため、「ソフトウェア」の右側にある「編集」ボタンをクリックして、詳細編集画面へ遷移する。

ソフトウェアの詳細編集画面の下部に「環境プロパティ」の項目があり、そちらにて必要な環境変数の設定が可能となる。環境変数はアプリによって異なるため、必要な項目のみを設定すれば良いです。今回利用するアプリで必要な項目は.env.exampleの中に記載されているので、参考すれば良い。

注意事項

https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/nodejs-platform-dependencies.html
こちらの下部に注記があるが、node_modules ディレクトリを Amazon Linux 2 Node.js プラットフォームバージョンにデプロイすると、Elastic Beanstalk は独自の依存関係パッケージが提供されていると見なし、package.json ファイルで指定された依存関係をインストールしないようにしている。よって、特殊なことがない限り、node_modulesはアップロードしない方が良いです。

まとめ

既にあるDERN StackのコードをAWSのElastic Beanstalkへデプロイする方法を記録した。一番気になるポイントはAPI側とClient側が分かれているプロジェクトを一つに統合して、Elastic Beanstalkへアップロード可能なZipファイルへまとめることですかね。
Elastic Beanstalk自体を利用することは簡単でした。もちろん、実際はもっと複雑な設定をする必要があると思うが、必要な内容は必要な時に調べれば、全部同じように管理画面で見つかるでしょう。