= AWS Amplify を使用して React アプリケーションをデプロイする方法 =
== AWS Amplify を使用して React アプリケーションをデプロイするためのガイド ==
私はソフトウェア エンジニアとしてコンサルティングを始めて以来、
私が取り組んできた個人的および専門的なプロジェクト。この冬休みは、ポートフォリオ サイトの設計、開発、およびデプロイに時間を費やしました。この記事では、AWS Amplify を使用してそれをデプロイする方法について説明します。 Web サイトは dan-murphy.com で、コードは GitHub で見ることができます。
= 簡単な背景 =
私の専門的な仕事のほとんどは、データ駆動型アプリケーションの構築とデータ パイプラインの合理化を伴います。これらのタスクを達成するために、私は定期的に Python と Ruby を使用し、あらゆるフロントエンド作業に JavaScript を組み込みます。 React に慣れるために、このフレームワークを使用してポートフォリオ Web サイトを構築することにしました。
= アプリケーションのセットアップ =
最初に行ったステップは、アプリケーションの構造を決定することでした。利用しました
ディレクトリの基本テンプレートとして create-react-app を作成し、いくつかの追加フォルダーを使用してアプリケーションを再構築しました。最終的なセットアップは次のようになります。
ソース
コンポーネント
ãâ¢ãâãâarchives
ãâ¢ãâãâextras
Ãâ¢ãâãâデータ
ãâ¢ãâãâimgs
ページ
ãâ¢ãâãâ内容
Ãâ¢ãâãâデータ
スタイル
テスト
備品
注目すべき変更点のいくつかは、
**コンポーネント**
、 と
**ページ**
ディレクトリ。
**スタイル**
、
: これは、アプリケーションのすべてのコンポーネントを格納する場所です。コンポーネントを一元化されたフォルダーに格納することで、コードの再利用とリファクタリングが容易になり、他のユーザーがより直感的に理解できるようになります。私のポートフォリオ Web サイトを構成するコンポーネントの一部は次のとおりです。
コンポーネント
ヘッダ、
フッター、および
プロジェクトサイドバー。
: ここで、アプリケーションの個別のページを作成します。から必要なコンポーネントをインポートします。
ページ
フォルダーを作成し、それらを集約してページをデザインします。これは、私がこれをどのように行ったかの例です
コンポーネントのホームページ:
: ここで、アプリケーションのグローバル CSS スタイルを定義します。使うのが大好き
スタイル
styled-components は個々のコンポーネント用ですが、各ページで使用できるグローバル スタイルを作成すると便利であることがわかりました。
最後に、リクエストを正しいページにマップするには、
反応ルータドム。ルートは
以下に示す App.js ファイル:
これでマッピングされます
ホームページ、
/projects へのリクエスト
プロジェクトページ、
/へのお願いについて
AboutPage、および
/bookshelf へのリクエスト
ブックページ。アプリケーションの開発が完了したので、他のユーザーが使用できるようにデプロイする必要があります。
/へのリクエスト
= AWS Amplify を使用したデプロイ =
== 概要 ==
React Web サイトをデプロイする方法はいくつかありますが、最も簡単な方法の 1 つは、
**AWS Amplify Amplify は、スケーリング可能なモバイルおよびウェブアプリを構築するための最速かつ最も簡単な方法として説明されています。 AWS は、サーバーのセットアップ、依存関係のインストール、およびウェブサイトの本番ビルドの作成に伴うすべての複雑さを推定するため、直感的な UX の構築だけに集中できます。 AWS Amplify がデータ駆動型アプリケーション (具体的には、**フロントエンド** と **バックエンドを備えたウェブサイト) に提供するものについて詳しく知るには、ドキュメントをご覧ください。
== リポジトリの接続 ==
AWS Amplify でウェブアプリをホストするには、まずソースコードを含むリポジトリに接続する必要があります。これを行うには、次の場所に移動できます。
*AWS Amplify* *はじめに* **Host My Web App をクリックし、**Connect app repo *page、scroll to*page、scroll to 
次に、ソース コードを含むリポジトリに接続できる別のページにリダイレクトされます。この例では GitHub を選択しますが、AWS Amplify は BitBucket、GitLab、AWS CodeCommit もサポートしており、Git プロバイダーなしでのデプロイもサポートしています。
承認が成功したら、デプロイするリポジトリを選択し、AWS Amplify が本番ビルドに使用するブランチを選択できます。
その後、クリック
**次へ** すると、AWS から *build* と *test* の設定を構成するよう求められます。 AWS が提供するベース テンプレートを以下に示します。
バージョン: 1
フロントエンド：
フェーズ:
ビルド前:
コマンド:
- npm インストール ビルド:
コマンド:
-npmランビルド
アーティファクト:
baseDirectory: ビルド
ファイル:
-
キャッシュ：
パス:
- node_modules
さらに、
**高度な設定** トグルでは、環境変数とカスタム ビルド コンテナーを設定できます。
最後に、アプリケーションの設定を確認したら、
**Save and Deploy **そして **AWS がアプリケーションの設定とデプロイを開始します。 AWS のデプロイが完了したら、Amplify ホームページに移動して、新しくデプロイされたアプリケーションを確認できます。AWS はアプリケーションの構成とデプロイを開始します。 AWS のデプロイが完了したら、Amplify のホームページに移動して、新しくデプロイされたアプリケーションを確認できます。
では、次を使用して URL をカスタマイズしましょう。
**AWS Amplify ドメイン管理
== カスタム ドメインの追加 ==
カスタム ドメインの追加を開始するには、左側のサイドバーに移動して、
**ドメイン管理 
**ドメイン管理**の設定。
次に、選択します
**ドメインの追加 **ドメインの構成 **ドメイン名を入力し (以下を参照)、クリックします **ドメイン名を入力し (以下を参照)、
この後、ドメインに必要なリダイレクトを設定できます。たとえば、次の例では、httpsdan-murphy.com から httpswww.dan-murphy.com へのリダイレクトを作成します。
最後に、カスタム ドメインが正しく設定されると、AWS は
**検証証明書 この証明書は、AWS Certificate Manager コンソールでも表示できます。
== CNAME レコードの追加 ==
カスタム ドメインを構成する最後の手順は、CNAME レコードを追加することです。次の例では Google Domains を使用していますが、基本的な概念はドメイン レジストラーが異なっても同じです。
まず、下にスクロールして
**Google Domains の **カスタム リソース レコード**。すべてのサブドメインを AWS Amplify ドメインにポイントする *CNAME * レコードを作成します。 名前: サブドメイン名を入力します。サブドメインが www.domain.com の場合は、 と入力します。 www app.domain.com の場合は、app と入力します。データ: ドメイン管理ページで、[アクション] をクリックし、[DNS レコードの表示] を選択します。次に、Configure DNS provider で利用可能な AWS Amplify ドメインを入力します。 
**Domains Management** ページで **Actions **View DNS Records** を選択します
全体として、カスタム リソース レコードは次のようになります。
次に、もう1つ追加します
AWS Certificate Manager 検証サーバーを指す *CNAME* レコード。検証済みの AWS Certificate Manager は、アプリケーションの TLS を処理します。 名前: 検証サーバーのサブドメインを入力します。ドメインの所有権を確認するための DNS レコードが _1234.example.com の場合は、_1234 のみを入力します。データ: ACM 検証証明書を入力します。検証サーバーが _1234.abcdefg.acm-validations.aws. の場合は、_1234.abcdefg.acm-validations.aws と入力します。
検証証明書のすべての情報は、AWS Certificate Manager コンソールにあります。 2回目以降
*CNAME* が追加され、カスタム レコードは次のようになります: 
最後に、追加しましょう
**Synthetic Record** サブドメイン転送を設定するには: サブドメイン: ドメイン URL を入力: www. 
= まとめ =
全体として、この記事では、React アプリケーションを構築し、AWS Amplify を使用してそれらをデプロイする方法を学びました。最初に、react アプリケーションをモジュール化する方法について説明しました。
*components* *pages* フォルダー。次に、**AWS Amplify** と、それを使用して静的およびデータ駆動型アプリケーションをデプロイする方法について学びました。最後に、**AWS Amplify Domain Management** と **Google Domains ** を使用してアプリケーションのドメインをカスタマイズする方法を学びました。 **そして**そして
この記事または私のポートフォリオ サイトについて質問、懸念、またはフィードバックがある場合は、お気軽にコメントまたはメールでお問い合わせください。
*
[email protected]*。読んでくれてありがとう！
SHARED WEB HOSTING#7
