S3を使用したVue.jsプロジェクトのリリース方法（備忘録）

　AWSを用いたVue.jsファイルのリリース手順についての備忘録を記載しています。

1. VSCodeの操作

　まず、VSCodeを開きリリースを行うフォルダを展開して置く。
　※　下記キャプチャでは、既に開いている状態ではあります。

　その後、Command Prompt を選択する。

　Command Prompt を選択後、ターミナルに vue ui と入力すると、
　Vueプロジェクトマネージャーを起動し始める。

　Vueプロジェクトマネージャー画面を開いたらbuildを行うフォルダをインポートする。

　フォルダを選択したら、下部にある「このフォルダをインポートする」ボタンを押下する。

　インポート後、プロジェクトダッシュボード画面へ遷移する。
　メニューの「タスク」を押下し、build画面を開く。

　「タスクの実行」ボタンを押下すると、buildが開始される。
　ステータスが進行されるので、完了するまで待機する。

　右上部にある「出力」ページでは、build情報を確認できる。
　　→ faildになった場合、エラー内容を確認可能

　build後、ステータスを確認する。
　　・Success : ビルド完了 (キャプチャは成功時のもの)
　　・Faild : ビルド失敗　・・・エラー確認し、修正後再度行う必要がある。

　buildが成功したら、プロジェクト内に新しくdistフォルダが作成される。
　　・css
　　・img
　　・js
　　・favicon
　　・index
　今回は、上記のファイルを確認。

　distフォルダを確認したら、次の手順へ進む。

　まず、AWSアカウントでログインし、S3操作画面へ移動する。

　対象のバケットを選択し、古いオブジェクトを全て削除する。

　オブジェクトの削除画面へ遷移したら、指定したオブジェクトに相違は無いか確認した上で、下部に「完全に削除」と入力し、オブジェクトの削除を実行する。

　オブジェクトの削除を確認したら画面を閉じる。

　先程buildし、作成されたdistフォルダをアップロードする。

　アップロードを完了したら画面を閉じる。
　次に、CloundFrontの手順へ移行する。

　まず、CloundFront操作画面へ移動する。

　対象のIDを選択し、「キャッシュ削除」を選択する。

　今回は、一番古いデータのキャッシュを削除し、再度コピー処理を行うので、
　最下行のIDを選択し、「新規にコピー」する。

　再度ID作成されたら、リリース作業の完了です。

　最後に更新されているか否かを使用環境のURLに接続し、画面を確認する。

APIリリース同様、簡易的に書き記しています。
詳しい意味合いは別途調べてみて下さい！