web app tutorial
1.0.0
このチュートリアルnode.jsアプリにはこちらからアクセスできます。
このノードWebアプリは、Expressが提供するReact Webアプリです。それはDockerizedであり、AWS Elastic BeanStalkで公開されます。
まず、「my-app」という名前のReactアプリを作成し、フォルダーに移動します。
npx create-react-app my-app
cd my-app
次に、Expressをインストールして保存します。
npm install express --save
上記の手順が終了したら、Reactアプリを開発モードで実行できます： npm run start
「サーバー」ファイルを次のように作成し、プロジェクトルートフォルダーに保存します。
const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
const PORT = process.env.PORT || 8080;
const HOST = '0.0.0.0';
app.get('/hello', (req, res) => {
return res.send('Hello World!')
});
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(PORT);
console.log(`Running on http://${HOST}:${PORT}`);
package.jsonファイルで、追加：
"proxy": "http://localhost:8080"
上記の手順を終えた後、Reactアプリでビルドを実行できます。
npm run build
Run Expressを実行してReactアプリを提供します。
node server.js
Dockerを使用するには、Dockerにサインアップし、必要に応じてDockerおよび/またはDockerデスクトップをインストールします。 Dockerのインストールが完了したら、実行して「dockerfile」という名前のファイルを作成します。
touch Dockerfile
DockerFileで、構築する画像を指定します。 node.jsアプリの最新の画像番号は、Docker Hubで入手できます。
FROM node:14
次に、アプリの作業ディレクトリを作成します。
WORKDIR /usr/src/app
次に、Package.jsonをコピーして、次の行を追加して依存関係をインストールします。
COPY package*.json ./
RUN npm install
アプリのソースコードをバンドルするには、次のことを追加します。
COPY . .
アプリはポート8080で実行されるため、この行を追加してください。
EXPOSE 8080
アプリを起動するためのコマンドを指定して終了します。
CMD [ "node", "server.js" ]
完全なdockerfileは次のようになります：
FROM node:14
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
CMD [ "node", "server.js" ]
.dockerignoreファイルを作成し、次のように行を追加します： node_modules npm-debug.logこれにより、ローカルノードモジュールとデバッグログがDocker画像にコピーされないようにします。 .dockerignoreのスクリーンショット： 
Docker画像を作成するには、次のコマンドを実行します。
docker build -t <your username>/<your app name> .
ポート49160で構築された画像を実行するには、実行します。
docker run -p 49160:8080 -d <your username>/<your app name>
-pフラグは、パブリックポートをコンテナ内のプライベートポートにリダイレクトします。
画像が実行されていることを確認するには、実行してください。
docker ps
リモートドッカーイメージをAWS Elastic BeanStalkに展開するには、画像をDocker Hubにプッシュします。
docker push <your username>/<your app name>:latest
もっと詳しく知る
参照のために、node.jsは、ここでnode.jsアプリをDockerizeする方法に関するガイドを公開しています。
AWS Elastic BeanStalkを以前に使用したことがない場合は、ドキュメントを読むことから始めることができます。
以下としてdockerrun.aws.jsonファイルを作成します。
{
"AWSEBDockerrunVersion": "1",
"Image": {
"Name": "your-docker-username/repo-name",
"Update": "true"
},
"Ports": [
{
"ContainerPort": "8080"
}
]
}
これには、弾力性のあるBeanStalkが引っ張るべきリモートドッカー画像に関する情報が含まれます。次に、Elastic BeanStarkアプリを作成し、このファイルをアップロードします。
弾力性のあるBeanStalkにアプリをセットアップするには、まず、Elastic BeanStalk Console->アプリケーションに移動し、「新しいアプリケーションの作成」をクリックします。
アプリケーション名を入力してください： 
作成したアプリの「新しい環境の作成」をクリックしてください。 
このアプリの「Webサーバー環境」を選択します。 
「プラットフォーム」の場合は、「Docker」を選択し、好きなようにプラットフォームのブランチとバージョンを選択します。
「アプリケーションコード」の場合、「コードをアップロード」を選択し、作成したばかりのdockerrun.aws.jsonをアップロードしてください。 
「より多くのオプションの構成」に移動し、プリセット構成を選択するか、ロードバランサーを含む構成を作成します。 
アプリはすぐに作成され、ElasticBeanStalkアドレスに展開されます。 
もっと詳しく知る
参照のために、AWSには、AWS Elastic BeanStalkにDockerコンテナの展開に関するドキュメントがあります。
好きなように、任意のプラットフォームでドメインアドレスを購入できます。この例では、展開されたアプリをGoogleドメインから購入したアドレスに接続する方法を示します。
まず、好きなドメイン名を選択して購入します。
ドメインアドレスは、購入後にGoogleドメインアカウントに表示されます。左メニューの「DNS」に移動し、「カスタムリソースレコード」にスクロールする
cnameレコードを追加し、弾性Beanstalkアプリアドレスに「データ」として、「www」を「名前」として入れます。 
また、「DNS」ページにカスタム名サーバーを追加する必要があります。これを「名前サーバー」セクションで行います。 
AWSによると、「ホストされたゾーンは、ドメインのDNSクエリに応答する方法をルート53に伝えています」。最初にAWSルート53にホストゾーンを作成しましょう。
AWSコンソールのルート53に移動し、「ホストゾーン」に移動します。
[ホストゾーンの作成]をクリックし、購入したばかりのドメインアドレスを入力してください。 
ホストゾーンが作成されます。 
Googleドメインでタイプ「ns」にリストされている「値」を1つずつ「カスタムネームサーバー」にコピーします。 
Googleドメインに変更された変更が発効するのに最大48時間かかる場合があることに注意してください。
HTTPSを設定するには、AWSのSSL証明書を取得し、ドメインアドレスにリンクする必要があります。
