副業におすすめなサイトを見る→

AngularアプリのソースをS3に上げてCloudFrontでキャッシュ削除する

S3とcloudFront

アプリリリースのお知らせ

予定を探すアプリyoteipickerをリリースしました。

アプリの利用用途:暇だから何か予定入れたいけど今週の土日は何しようかな〜?ってときに使えるアプリです。

AngularアプリをビルドしてコードをS3にアップするにはどうすればいいんだろう…
また、S3にアップした後にCloudFrontでキャッシュ削除したい…

この記事では上記の悩みを解決します。

解説するステップとしては、

STEP
ソースをビルドする
STEP
ビルドしたソースをS3にアップする
STEP
CloudFrontでキャッシュを削除する

上記です。

>>ココナラと似てるおすすめの副業サイトを確認する

>>リモートワークもあるおすすめの転職サイトを確認する

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

Contents

ソースをビルドする

S3にデプロイする前にソースをビルドしましょう。

Angularの実行バージョンはv14です。

ビルドしたいディレクトリで以下のビルドコマンドを打ちます。私の場合はyoteiPickerというアプリのディレクトリで実行しています。

開発環境の場合

yoteiPicker % ng build

本番環境の場合

yoteiPicker % ng build --configuration=production

ビルドが終了すると、実行したディレクトリにdistというディレクトリが新たに作成されるので、dist配下にビルドしたソースがアップされます。

ビルドしたソースをS3にアップしてデプロイする

先ほどソースをビルドしたものがdist配下にあることを確認してください。

次にAWSにログインしS3よりソースをアップするS3バケットを選択します。

バケットを選択したら、バケット内にあるものを削除します。この時、assetsだけは削除しないようにしましょう。

※私の場合は、assetsの他にビルドしたときに一部のpngファイルがビルドされないためassetsの他にも削除しないものがあるのでそれは削除しないようにしています。

削除するものが全て選択できたら、右上にある削除ボタンを押します。すると以下のオブジェクト削除ページに遷移します。

削除するファイルを改めて確認したらテキストボックスに完全に削除と入力します。

そして、オブジェクトの削除ボタンを押します。

先ほどのオブジェクトは削除されます。削除に失敗しましたと表示されていますがこれは気にしなくていいです。

次にビルドしたソースをアップするので、画面中央にある概要のソースであるs3://yoteipickerのURLをクリックします。

アップロードする画面になるので、アップロードボタンを押します。

ここでビルドしたソースを用意しておきましょう。

ビルドしたソースをアップします。ドラッグ&ドロップでできます。

また、削除する際にassetsは残しているので、アップロードするファイルにもassetsは含めなくていいです。

アップロードするファイルをすべて確認したらアップロードボタンを押します。

すると、以下のようにアップロードに成功しましたというページが表示されます。

これでS3にビルドしたソースをデプロイする方法は終わりです。

S3にデプロイできたので、CloudFrontのキャッシュを削除していきます。

CloudFrontでキャッシュを削除する

CloudFrontでキャッシュを削除しましょう。

AWSでCloudFrontと検索し、作成したCloudFrontのサービスをクリックします。

キャッシュ削除という項目があるのでクリックします。

キャッシュ削除を作成とあるのでクリックします。

全てのキャッシュを削除するのであれば、以下のように/*と記載してキャッシュ削除を作成ボタンをクリックします。

少し時間はかかりますが、以下のようにステータスが完了済みになればキャッシュ削除成功です。

これで全ての作業は終了です。

>>ココナラと似てるおすすめの副業サイトを確認する

>>リモートワークもあるおすすめの転職サイトを確認する

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

スキルを売り買いするならココナラ

コメント

コメントする

CAPTCHA


Contents
閉じる