Note初級・中級のエンジニアやデザイナー向けに技術情報と英語学習情報を提供中。Beanstalkを使う方法が良いでしょう。Beanstalkを使ってAWSにデプロイして稼働させる方法を紹介します。関連記事はじめにAWS上でDockerコンテナを稼働させる方法は現状は以下の4つです。Beanstalkを使う方法を紹介します。Heroku風にコマンドを入力するだけでDockerアプリケーションをデプロイできるのでアプリケーションエンジニアにとってはとっつきやすいと思います。それでは、簡単なReactのDockerアプリケーション作成するところから始めていきましょう。以下の準備が完了している必要があります。CLIが使用可能であること(「AWSElasticBeanstalkFullAccess」の権限があるIAMでプロファイルの設定が完了していることを想定しています)AWSのキーペアが作成済みであること(この記事内では自前のキーペア「MyKeyPair」を使いますが、ebコマンドでプロジェクトを初期化する際に一緒に作ることも可能です)細かいバージョンは「環境」を参照してください。ReactのDockerアプリケーションの準備まずは、今回稼働させるReactのDockerアプリケーションを作成しましょう。簡単なReactのアプリケーションの作成Create-react-appを使ってReactのサンプルアプリケーションを作成します。serviceWorker.js以下のようにソースコードを少しだけ変更します。App;ソースコードの変更が終わったら起動して確認してみましょう。startブラウザで「localhost:3000」を開きます。Docker化する次に、ReactのアプリケーションをDocker化しましょう。DockerfileDockerfileには以下を記載します。ReactをビルドしてNginxに乗せることにします。Beanstalkと一緒に使うことを想定している場合は「EXPOSE」は必須です。BeanstalkはDockerfile内のEXPOSEを見て自動的にコンテナのポートを判別しているからです。それでは、Dockerコマンドでイメージをビルドして、起動してみましょう。sample-react-eb-app:latestブラウザで「localhost:80」にアクセスします。ReactがDockerアプリケーションとして動いていることが確認できました。Gitコミットしておくここで一旦コミットしておきましょう。app'これで今回のアプリケーションの作成は完了です。Beanstalkをアプリケーションに適用していきましょう。ebコマンドのインストールHomebrewからebコマンドをインストールします。2.7.1)Ebコマンドについては公式ドキュメントを呼んでおくと良いでしょう。beanstalkプロジェクトとして初期化するそれではebコマンドを使って先程作ったReactのDockerアプリケーションを初期化し、Gitでコミットしましょう。benastalk'自動的にDockerプロジェクトであることを判別しています。Beanstalk」の画面を見てみましょう。Applications」に新しいプロジェクト(sample-react-eb-app)が追加されています。これで初期化は完了です。Beanstalkのアプリケーションではアプリケーションの実行環境を「環境(Environments)」と言っています。今回のアプリケーション開発向けの実行環境を作りましょう。Greenこの時点で環境にアプリケーションがデプロイされています。AWSコンソールから確認してみましょう。新しい実行環境(development-env)が作成されています。「Overview」を見ると正常にDockerアプリケーションが稼働しているようです。右上の「URL」をクリックします。今回作成したアプリケーションが表示されています。BeanstalkでDockerアプリケーションを動かすことができました。以下のようにEC2インスタンス、ELB、S3バケットが自動的に作成されています。EC2ELBS3ソースコードの変更とデプロイソースコードの変更が適切に反映されるか確認してみましょう。「App.css」の「background-color」を明るめに変更してます。Beanstalkにデプロイしてみましょう。minsAWSコンソールからURLをクリックします。以下のように背景色が変更されています。デプロイがうまくいきました。versions」をクリックすると、デプロイしたアプリケーションのバージョンを見ることができます。Gitのコミットメッセージと紐付いていています。MESSAGE’」とすれば付与できます。Beanstalkの実行環境にSSHしてDockerコンテナの状況を見てみましょう。exitDockerfileで設定した通りNginxとして80ポートで起動しています。Beanstalkの環境をすべて削除しましょう。sample-react-eb-app以下のように赤くなり、削除のワークフローがかいしされます。すると全ての削除が完了します。Beanstalkのプロジェクトはもちろん、自動で生成されたEC2、ELBもすべて削除されました。S3バケットに関しては中身のログファイルは削除されますが、バケット自体は残るので、不要であれば削除してください。Beanstalkを使って稼働させることができるようになったことでしょう。最新の記事Keid自由で楽しい世界を目指すフルスタックWebデベロッパー。大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。CLIにエイリアス(alias)を設定する方法AWS上のサービスを利用する場合、利便性の観点からもDevOpsの観点からもCLIを使いこなすことは有益です。Workerに対応しています。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。AuthorKeid自由で楽しい世界を目指すフルスタックWebデベロッパー。大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。バッチで明日の日付を計算する。0.0010このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。最新の記事Keid自由で楽しい世界を目指すフルスタックWebデベロッパー。大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。CLIにエイリアス(alias)を設定する方法AWS上のサービスを利用する場合、利便性の観点からもDevOpsの観点からもCLIを使いこなすことは有益です。Workerに対応しています。