= Amazon S3 に React アプリをデプロイする =
== S3 で React アプリをデプロイする方法に関する 5 分間のガイド ==
あなたは React アプリを完成させ、それをどこかでホストしようとしています。 Amazon AWS S3 を使用して React アプリをホストできることをご存知ですか?比較的簡単で、低コストで、迅速に導入できます。
= 始めましょう! =
== 前提条件 ==
ホスティングに入る前に、管理セットアップを完了させましょう。以下が完了していることを確認してください。
**AWS アカウントをお持ちです ここで AWS アカウントにサインアップしてください: httpsaws.amazon.com/resources/create-account/ **AWS ユーザーを作成する AWS コンソールで、[IAM] タブに移動し、[ä] に移動します。サイドバーの「ユーザー」セクション。
[ユーザーの追加] をクリックし、[ユーザーの追加] をクリックして、[プログラムによるアクセス] にチェックを入れます。 ä¸.
[次へ: アクセス許可] をクリックし、ここで [既存のポリシーを直接アタッチ] を選択します。 âãâ。デプロイメントの目的については、「AdministratorAccess」「AdministratorAccess」を確認してください。
[次へ] ボタンをクリックし、最後に [ユーザーの作成] をクリックします。
最後のステップで、アクセス キー ID とシークレット アクセス キーを受け取ります。ダウンロードして
**後で必要になるので、コンピューターに保存します
== AWS CLI をインストール ==
AWS CLI は、デプロイ プロセスを簡素化するのに役立つ強力なツールです。
Homebrew (macOS 用) を使用して AWS CLI をインストールしましょう。 Homebrew をまだインストールしていない場合はインストールします。
*注: Windows を使用している場合は、公式ドキュメントの手順を参照してください * *こちら*
ターミナルを開き、入力します
醸造インストール awscli.
CLI ツールがインストールされたら、AWS アカウントを次のように設定できます。
設定します。ここで、以前にダウンロードしたアクセス キー情報を入力する必要があります。次のようになります。
リージョンについては、AWS コンソールで URL を確認すると、リージョンが示されます。たとえば、私は ãâ¢ãâãâap-southeast-1ãâ¢ãâãâ です。
= React アプリの作成 =
React アプリをデプロイする準備がすでに整っている場合があります。ただし、サンプル アプリが必要な場合は、次のオプションを使用できます。
- 定型の React アプリを実行して生成します
npx create-react-app my-app
- httpsgithub.com/harishv7/react-hook-form-example からサンプル React アプリ (フォームの例を含む) をダウンロードします。これは、React アプリにフォームを追加するためのチュートリアルで行われました。ここで確認してください。
完了したら、依存関係がすべてインストールされていることを確認します
yarn install を使用してアプリを実行します
糸スタート。
= S3 バケットのセットアップ =
サンプル アプリの準備ができたので、S3 バケットを構成してアプリをホストします。
AWS コンソールで、ãâ¢ãâãâS3ãâ¢ãâãâ を検索し、S3 ダッシュボードに移動します。 「バケットの作成」をクリックし、バケットに「my-react」などの名前を付けます。 -app-2021ãâ¢ãâãâ (またはあなたが望むもの)。
*注意: バケット名は S3 全体で一意である必要があります。存在しない一意の名前を選択してください。そうしないと、エラーが発生します!* 
ライブでホストしているため、バケットへのパブリック アクセスをオンにします。
残りの設定はそのままにして、[バケットの作成] をクリックします。 S3 ダッシュボードに次のようなエントリが表示されます。
クリックして、新しく作成した S3 バケットに入ります。
[プロパティ] をクリックして、一番下までスクロールします。 「静的 Web サイト ホスティング」を参照してください。
ãâ¢ãâãâEnableãâ¢ãâãâをクリックし、ãâ¢ãâãâindex.htmlãâ¢ãâと入力しますãâ インデックス ドキュメントの下。
他のフィールドはそのままにして、[変更を保存] をクリックします。
= S3 へのデプロイ =
これで、アプリを S3 にデプロイする準備が整いました。その方法は、次の CLI コマンドを使用することです。
aws s3 sync build/ s3your-bucket-name>--acl public-read
このコマンドを、äâ¢ãâãâdeployãâ¢ãâãâ スクリプトとして package.json ファイルに追加することもできます。
を使用してアプリを構築しましょう
最適化された生産ビルドの作成に役立つ糸ビルド。
次に、上記の CLI コマンドを実行します。または、package.json で発行スクリプトをセットアップしている場合は、次を使用できます。
糸展開。
これで、アプリがデプロイされました。
アプリがホストされている場所 (ウェブサイトのリンク) を見つけるには、AWS S3 コンソールに移動し、作成したバケットをクリックします。
[プロパティ] タブに移動し、[静的] Web サイトまでスクロールします。ホスティングのセクションと私たちの URL がそこにあります。
それをクリックすると、アプリが新しいタブで開きます。これが私のものです！
=結論=
React アプリを Amazon S3 に正常にデプロイしました!これは、React プロトタイプをすばやくデプロイしてテストし、他のユーザーと共有するための優れた選択肢です。展開も非常に簡単で迅速です。
このチュートリアルがお役に立てば幸いです。
ハッピーコーディング！ ãâ°ãâãâãâ»
*その他のコンテンツは * *plainenglish.io*
SHARED WEB HOSTING#7
