概要
社内でAWSを使ったシステム設計を任される予定があり、AWSのサービスを勉強中です。
チュートリアルと画面が異なるため、記事にしています。
以下もご覧いただけると幸いです。
【AWS10分間チュートリアル】Docker コンテナのデプロイ
教材
10分間チュートリアル
https://aws.amazon.com/jp/getting-started/tutorials/
ReactJSアプリをデプロイしてホストする
https://aws.amazon.com/jp/getting-started/hands-on/deploy-react-app-cicd-amplify/
チュートリアル概要
Reactアプリケーションを作成し、それをGitHubリポジトリーにプッシュします。
次に、リポジトリをAmplifyコンソールに接続し、
amplifyapp.comドメインでホストされているグローバルに利用可能なコンテンツ配信ネットワーク（CDN）にデプロイします。
環境構築
OS
win10 Pro
nodejs
nodejsをインストールしておきます。
https://nodejs.org/ja/download/
node.exeにパスを通して、以下を実行します。
バージョンが12.16.2であることがわかりました。
> node -v
v12.16.2
git
以下のwindowsにインストールするを参考にインストールします。
1.5 使い始める - Gitのインストール
AWS Amplifyコンソール
AWS Amplifyコンソールは、サーバーレスバックエンドを備えた単一ページのウェブアプリケーションまたは静的サイトを開発、デプロイ、ホストするためのGitベースのCI / CDワークフローを提供します。Amplifyは、Gitリポジトリに接続すると、フロントエンドフレームワークとAmplify CLIで構成されたサーバーレスバックエンドリソースの両方のビルド設定を決定し、すべてのコードコミットで更新を自動的にデプロイします。
1. 新しいReactアプリケーションを作成する
ターミナルにて、以下を実行します。
npx create-react-app amplifyapp
cd amplifyapp
npm start
git リポジトリを作成する
git init
git remote add origin https://github.com/(username)/amplifyapp.git
git add .
git commit -m "initial commit"
git push origin master
アプリをAmplifyにデプロイする
URLをクリックすると、AWS上でReactアプリが動作しているのを確認できます。
and save to reload Part 2.と言葉を変更します。
githubにpushします。
git add .
git commit -m "second commit"
git push origin master
すると...URLにアクセスすると、表示が変わっています。
これであなたもCI/CDの一端に触れました
GitHubと統合し、Amplifyコンソールを使用して、Reactアプリケーションをクラウドにデプロイしました。
AWS Amplifyコンソールを使用すると、アプリケーションをクラウドに継続的にデプロイし、グローバルに利用可能なCDNでホストできます。