AngularアプリをビルドしてコードをS3にアップするにはどうすればいいんだろう…
また、S3にアップした後にCloudFrontでキャッシュ削除したい…
この記事では上記の悩みを解決します。
解説するステップとしては、
上記です。
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
ソースをビルドする
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のサービスをクリックします。
キャッシュ削除という項目があるのでクリックします。
キャッシュ削除を作成とあるのでクリックします。
全てのキャッシュを削除するのであれば、以下のように/*と記載してキャッシュ削除を作成ボタンをクリックします。
少し時間はかかりますが、以下のようにステータスが完了済みになればキャッシュ削除成功です。
これで全ての作業は終了です。
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
コメント