ReactアプリケーションをAWS 3、CloudFrontに配備する

2490 ワード

サブプロジェクト雷祖梅テキストリンク

完成したV 1…!!

LEZOMEV 1が完成しました!では、導入します.

S 3パケットの作成

まずS 3パケットを生成する

パブリックアクセスのブロックを無効にするには、分散されたWebにアクセスできるので、ついでに無効にします.

S 3パケット設定

S 3パケットが作成されている場合は、設定する必要があります.
作成したbucketに入ると、「プロパティ」タブが表示され、その下部に「静的Webサイト管理」の設定が表示されます.

ここで管理を有効にし、デフォルトのドキュメントをindexに設定します.htmlに設定します.

CloudFront配布の作成

次に、CloudFront Distributionを作成し、S 3に接続します.

Webを選択してください.

さっき作ったように見えるS 3 bucketを選択

「Redirect HTTP to HTTPSを選択します.キャッシュしないので、Managed-CachingDisabledを選択してください.」各ポリシーの設定値を表示するには、View Policy Detailsを表示します.

自分のドメインがない場合は、このセクションをスキップできます.
ドメイン名をAlternate DomainNameに挿入し、次のSSL CertificateでCustom SSL Certificateを選択して証明書を選択します.
証明書はAWS Certificate Managerから入手できます.

ドメイン接続

CloudFront配布が完了した場合は、Route 53接続ドメインに移動します.
管理領域に入ってレコードを生成します.

簡単なルートを選択し、次のルートにジャンプします.(Route 53もずいぶん変わりました…)

目的のエイリアスを追加し、作成したDistributionに接続します.私が今発表するのは紹介ページaboutです.janghoseung.comとして作成します.
単純なレコード定義をクリックしてレコードを作成するだけです.応用に時間がかかりますので、お待ちください.

aws-cli

Webに直接アクセスしてアップロードするのではなく、コマンドラインAPIを使用して配置します.
インスタント更新を反映するためにアップロードする場合、--cache-controlオプションを使用してno-storeを適用し、キャッシュを完全にブロックします.(CloudFrontを使用して無効にすることもできます.)