AWSを使用して反応アプリケーションを展開する方法

TimePlayの私の新しいポジションで始めた最初の挑戦のうちの1つは、AWSに反応するアプリケーションを展開する方法を考え出していました.
Amplifyは、Webホスティング、GraphSQL API、およびそれらのWebアプリケーションの詳細を迅速にスピンする能力を持つフロントエンド開発者を提供するAWSの傘の下で多くのサービスの一つです.すべてのバックエンドコンポーネントがAWSによって統合管理されているので、フロントエンドの開発者はもはやサーバーの面倒を心配する必要がなくなり、代わりにフロントエンドの仕事に集中することができます.
この記事では、1つのページのアプリケーションを展開するために必要な手順を超えるつもりです.以下のコマンドを使ってインストールすることができます.

npm install -g @aws-amplify/cli

さらに、シンプルさのために、そして、このチュートリアルの焦点を自分自身で増幅するために、私は文字通りベースの出力を展開していますcreate-react-app ( CRA ) TypeScriptテンプレートによる作成コマンド

npx create-react-app my-app --template typescript

さあ始めましょう!

ステップ1

ランamplify configure . これは、AWSのIAMアカウントページを開きますし、いずれかのオプションを増幅するための新しいIAMのユーザーを作成したり、既存のIAMのユーザーを使用します.CLIは、新しいユーザーの優先領域と名前をプロンプトを表示しますが、ユーザーが既にいる場合は、既存のユーザーの資格情報を次の手順で提供できます.
新規ユーザーを作成するか、既存のユーザーを使用するかどうか、次のパーミッションセットを確認します.

また、このIAMポリシーをAWS組織に追加し、ユーザーにアタッチします.( Visual Editorを使用するか、下のJJSONを使用します)

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "amplify:*",
            "Resource": "*"
        }
    ]
}

AWSユーザーを設定したら、CLIはユーザーのアクセスキーIDと秘密アクセスキーを要求します.入力し、AWSプロファイルを残すdefault 閉じるこの動画はお気に入りから削除されています.今すぐ増幅が設定されています.
⚠️ 重要
このチュートリアルの目的のために、これらは十分であるべきです.ただし、Amplifyユーザーに必要な最小限のアクセス許可だけを設定することをお勧めします.見るthis page on the Amplify CLI documentation 増幅アクションに必要なアクセス許可の詳細については.

ステップ2 -初期化

ユーザーが設定されたので、プロジェクトのルートディレクトリにamplify init . 雲の上であなたのamplifyプロジェクトをセットアップするように、プロンプトに続いてください.このチュートリアルでは、アプリケーションを選択し、アプリケーションを配備するときに適切なビルドコマンドを実行するようにCLIを設定します.
ℹ️ ノート
また、VueやAngleなどの別のフレームワークを使って構築されたアプリケーションを展開している場合は、少しの変更でこれらの手順を実行することもできます.また、これらのフレームワークにはオプションがあります.また、あなたが持っている限り、あなたはまた、Explifysrc and dist ディレクトリと最終的なビルド「出力」は、終わりますdist .
ℹ️ ノート
Amplifyが初期化されると、amplify/ ディレクトリと更新.gitignore 特定のファイルを増幅するためのルールを無視する.これらをソースコントロールにプッシュします.

ステップ3 -ホスティングを追加

今、あなたのプロジェクトのために増幅されますamplify add hosting プロジェクトにホスティングサイトを追加します.あなたは“あなたのための完全な展開パイプラインを管理”を拡大するように“増幅コンソールでホスティング”を選択することができます.(S 3バケツとCloudFrontディストリビューションが作成されますが、CloudFrontディストリビューションはAWSアカウントにはありません)また、S 3 BucketとCloudFrontディストリビューションを管理するために「Amazon Cloudfront and S 3」を選択することができます.
この記述の時点で、CLIはあなたの選択に基づいてあなたのホストのために以下のオプションを提示します

オプションを使用したホスティング

Amplify Console GITHUB、GITLAB、Bitbucket、CodeReMITなどのプロバイダでホストされているGit Repoを使用することができます.また、任意のプッシュを行うことによって管理されているCDパイプラインをトリガします.

また、manual 手動で展開したり、CircleCiやJenkinsのような別のCI/CDパイプラインの一部として計画している場合.また、このメソッドを使用する場合は、ブラウザを使用してファイルをドラッグしてドラッグすることもできます.このチュートリアルでは、このオプションを選択します.

「アマゾンCloudfrontとS 3」オプション

Insecure HTTP (S3) オプションは、S 3のバケツに構築されたサイトを配備するだけです.CloudFrontまたは別のCDNプロバイダを使用してCDNを追加する計画をする場合に便利です.我々のCloudFrontディストリビューションは、Terraformを使用して処理されます.

AもありますSecure HTTPS (S3+CloudFront) あなたがS 3に展開して、1ステップでCloudfront CDNでそれを前面にしたいならば、方法.

ℹ️ ノート
すべての展開の後にCDNキャッシュを無効にする必要があります.あなたが展開を管理するためにAmplifyコンソールを使うならば、それはあなたのためにこれをします.を使用する場合S3+CloudFront オプションを渡すことができます--invalidateCloudFront to amplify publish この場合、アンプリングCLIは無効化要求を行う.

ステップ4 -配備

これで、ホスティングを追加しましたamplify publish アプリケーションを構築して展開するには、アプリケーションを展開します.
一旦それが正常に展開するならば、あなたは展開を見るためにあなたがアクセスできるリンクをあなたに提供します.

今、あなたは反応アプリケーションを正常にいくつかの簡単な手順では、クラウドを使用してクラウドに展開している!ホープは、このチュートリアルを便利に発見し、私が逃している可能性がある場合は、コメントを残して躊躇しないでください.
Cover Photo そばPixabay on Pexels