Zenn
📑

【AWS】Elastic Beanstalk でReactのアプリケーションを動かす

2021/04/17に公開
AWS
Node.js
React
CLI
Elastic Beanstalk
tech

背景

最近は、CloudFormationでゴリゴリインフラ環境をコード化していたのだが、わざわざそんなのを自分で作成しなくても、簡単なアプリケーションくらいならElastic Beanstalkで作成できるだろうと思ったので実際に触ってみた。

そこで、作成した環境にどんなアプリケーションを載せようか迷っていたところで、最近はReactが流行っているとの噂がよく流れるのでReactのアプリケーションをデプロイしてみた。

これは、以下のような方がターゲットとなる。

  • Elastic Beanstalk / Reactというワードはなんとなく聞いたことがあるがあまり知らない。また触ったことがないので触ってみたい。

ゴール

  1. ローカルマシンにReactの開発環境を作成する。
  2. 上記で作成したReactのアプリケーションをElastic Beanstalkでデプロイし、サーバーで動作しているか確認する。

開発環境

  • Windows 10 (コマンドプロンプトを使います。)
  • AWS CLI導入済み
  • Python 3.9.1

Elastic Beanstalkとは

AWSが提供している、「定番構成のインフラ環境の構築とデプロイの自動化サービス」である。
https://www.slideshare.net/AmazonWebServicesJapan/aws-black-belt-online-seminar-2017-aws-elastic-beanstalk

公式ドキュメントによると、以下の記載がある。

Elastic Beanstalk を使用すると、アプリケーションを実行しているインフラストラクチャについて知識を得なくても、AWS クラウドでアプリケーションのデプロイと管理を簡単に行うことができます。

https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/Welcome.html

すなわち、特にインフラ環境を意識せずともアプリケーションのコードだけ準備すれば、それらを簡単にサーバー上で動かすことができますよ、というサービスである。

対応している言語は以下の通り(2021/4現在)

  • Go
  • Java
  • .NET
  • Node.js
  • PHP
  • Python
  • Ruby

補足ではあるが、よくOpsWorksとかCloudFormationと一緒に出てくること多いけど、何が違うの？という疑問がよくあるので、以下で整理した。

名称 概要 詳細
Elastic Beanstalk アプリケーション管理 コードをアップロードするだけでインフラ環境の構築/デプロイ/監視の設定までを自動化してくれる。オペレーションについて心配せずにウェブアプリケーションをデプロイすることにフォーカスしている。
CloudFormation スタック管理 土台を作るサービスで、AWSのほぼすべてのサービスについて、リソースの管理/プロビジョニングを実施できる。インフラ環境を構築/管理することにフォーカスしている。
OpsWorks スタック管理 Chef レシピを活用して、ソフトウェアの設定、パッケージのインストール、データベースのセットアップ、サーバーのスケーリング、コードのデプロイといった運用が自動化される。高度なカスタマイズとオペレーションの制御にフォーカスしている。OpsWorksスタックのサポート範囲は、EC2、Elastic IP、Amazon CloudWatch メトリクスなど、アプリケーション志向のAWSリソースに限られている。

Reactとは

以下にわかりやすい記述があったのでそのまま引用する。

・SPA(Single-Page Application) を実現する JavaScript フレームワークの一つです。
Angular, Vue.js とよく比較されます。
・Facebook 社によって開発され、Facebook の Web サイトでも利用されています。
2020年4月現在の最新バージョンは 16.13.1 です。
・MITライセンスで公開されており、商用利用可能です。
・JavaScript の中に直接 HTML/XML を記述する JSX という技術を利用しています。
・JavaScript は ES6 の文法である import やアロー関数を取り入れています。
・JSX や ES6 文法を、Babel というトランスパイラで ES5 の JavaScript に変換しています。
・Chrome, Firefox などで動作します。IE8 で一部機能、IE9 で制限付き、IE10 でフル機能がサポートされます

http://www.tohoho-web.com/ex/react.html

今回はReactプログラムを起動して、サンプルのページを表示するだけにとどめるので、詳細な説明は割愛する。

実際に構築してみる

Reactの導入

以下を参考に導入した。
https://qiita.com/renesisu727/items/4b34df1a3cfe8d534303

nodistのインストール

nodistは、Node.jsのnodistとはWindowsOSにおけるNode.jsのバージョン管理ツールである。
以下をダウンロードしてインストールを実施した。
https://github.com/nullivex/nodist/releases

上記を実施すると、同時にNode.jsのパッケージを管理するnpmもインストールされる。

http-serverのインストール

ローカルホストでReactのアプリケーションを動かすためのパッケージを追加する。

npm install -g http-server

carete-react-appのインストール

Reactプロジェクトを作成するためのコマンドである、create-react-appのインストールを行う。

npm install -g create-react-app

Reactプロジェクトの作成

上記を実施すると自動的にパスも通るので、そのままcreate-react-appを使うことができる。
任意のパスに移動し、以下を実行。

Program> create-react-app sample-app

すると、sample-appディレクトリが作成され、プロジェクトがそこに作成される。

Program> cd sample-app
Program\sample-app> npm start

上記を実行すると、自動的にブラウザが立ち上がり、サンプルページが表示される。

URLを確認すると、http://localhost:3000/
となっており、3000番ポートで動いていることが確認できる。

EB CLIの導入

ここから上記で作成したReactアプリケーションをElastic Beanstalkを使ってデプロイしてみる。
画面から実際にアプリケーションをアップロードしても良いのだが、AWSではElastic Beanstalk コマンドラインインターフェイス (EB CLI) が提供されているため、こちらで実施してみる。

EB CLIの導入方法は以下。
https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/eb-cli3-install-windows.html

Pythonのpipコマンドでインストールする。

pip install awsebcli --upgrade --user

実際にデプロイしてみる

ここから実際に、上記で作成したReactサンプルアプリケーションを、EB CLIを使ってデプロイしてみる。

以下を参考にした。
https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/create_deploy_nodejs_express.html

  1. .ebextensions ディレクトリをsample-app配下に作成する。
  2. NodeCommandを "npm start" に設定する設定ファイルを追加する。

sample-app/.ebextensions/nodecommand.config

option_settings:
  aws:elasticbeanstalk:container:nodejs:
    NodeCommand: "npm start"

以下参照
https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/command-options-specific.html

  1. Elastic Beanstalkのリポジトリを作成する。
eb init --platform node.js --region ap-northeast-1
  1. Reactアプリケーションを実行する環境を作成する。
eb create sample-app

ここで、sample-appはElastic Beanstalk上で作成されるアプリケーションの名前である。また、--sampleをつけると、自分で作成したコードではなく、サンプルのアプリケーションが作成される。
数分待つと、
Successfully launched environment: sample-app
と表示され、環境構築が完了する。
AWSのマネージメントコンソールから、サービス > Elastic Beanstalk > 環境 > sample-appを選択すると、イベントが確認でき、環境が生成されていることがわかる。

また、同じ画面に作成したアプリケーションのURLやヘルスチェックの状態が確認できる。

  1. 環境の作成が完了したら、以下のコマンドを使い、デフォルトのブラウザでその環境の URL を開くことができる。
eb open

以下のようにローカル環境で表示されたものと同じ画面が表示された。

簡単!!

ちなみに、作成された環境には以下のリソースがあるとのこと。

  • EC2インスタンス
  • インスタンスセキュリティグループ
  • ロードバランサー
  • ロードバランサーセキュリティグループ
  • Auto Scaling グループ
  • Amazon S3 バケット
  • Amazon CloudWatch アラーム
  • AWS CloudFormation スタック
  • ドメイン名

このようにアプリケーションをアップロードしただけで、インフラの構築から、監視の設定まで追加されていることがわかる。

まとめ

Elastic Beanstalkを使って、Reactのアプリケーションをサーバー上で動かすことができた。
Elastic Beanstalkで作成された環境がEC2インスタンス1台だったのでElastic Beanstalkで可溶性を高めるようなインフラ環境の構築ができるのか、といったことをやってみたい。

以上です。
ありがとうございました。

Discussion