S3を使用したVue.jsプロジェクトのリリース方法（備忘録）
AWSを用いたVue.jsファイルのリリース手順についての備忘録を記載しています。
1. VSCodeの操作
まず、VSCodeを開きリリースを行うフォルダを展開して置く。
※ 下記キャプチャでは、既に開いている状態ではあります。
その後、Command Prompt を選択する。
Command Prompt を選択後、ターミナルに vue ui と入力すると、
Vueプロジェクトマネージャーを起動し始める。
2. build方法
Vueプロジェクトマネージャー画面を開いたらbuildを行うフォルダをインポートする。
フォルダを選択したら、下部にある「このフォルダをインポートする」ボタンを押下する。
インポート後、プロジェクトダッシュボード画面へ遷移する。
メニューの「タスク」を押下し、build画面を開く。
「タスクの実行」ボタンを押下すると、buildが開始される。
ステータスが進行されるので、完了するまで待機する。
右上部にある「出力」ページでは、build情報を確認できる。
→ faildになった場合、エラー内容を確認可能
build後、ステータスを確認する。
・Success : ビルド完了 (キャプチャは成功時のもの)
・Faild : ビルド失敗 ・・・エラー確認し、修正後再度行う必要がある。
buildが成功したら、プロジェクト内に新しくdistフォルダが作成される。
・css
・img
・js
・favicon
・index
今回は、上記のファイルを確認。
distフォルダを確認したら、次の手順へ進む。
3. S3へbuildしたオブジェクトを追加
まず、AWSアカウントでログインし、S3操作画面へ移動する。
対象のバケットを選択し、古いオブジェクトを全て削除する。
オブジェクトの削除画面へ遷移したら、指定したオブジェクトに相違は無いか確認した上で、下部に「完全に削除」と入力し、オブジェクトの削除を実行する。
オブジェクトの削除を確認したら画面を閉じる。
先程buildし、作成されたdistフォルダをアップロードする。
アップロードを完了したら画面を閉じる。
次に、CloundFrontの手順へ移行する。
4. CloundFrontからキャッシュ削除を行う
まず、CloundFront操作画面へ移動する。
対象のIDを選択し、「キャッシュ削除」を選択する。
今回は、一番古いデータのキャッシュを削除し、再度コピー処理を行うので、
最下行のIDを選択し、「新規にコピー」する。
再度ID作成されたら、リリース作業の完了です。
最後に更新されているか否かを使用環境のURLに接続し、画面を確認する。
おわりに
APIリリース同様、簡易的に書き記しています。
詳しい意味合いは別途調べてみて下さい！