AWS(S3)を使用したリリースの手順

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

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

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/bb8f3b43-5ae8-967a-01a3-0dde99a21a52.png" width="1000">

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/c223fba0-f1f5-cb73-e7c2-d54642371410.png)

## 2. build方法

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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/3ff17992-e283-0f4b-7f1a-4b1b99ff3ce9.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/ad54ac98-efc6-c7c4-438e-8d66917ba337.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/f1fecc5a-3426-5d4e-1941-ab04440a63df.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/e98c4ff9-210c-279f-55c7-da5fbc146835.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/4738097f-29d2-c47a-176b-26a19551369b.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/35a9a75a-5da5-710d-c1e1-28554bfbedaf.png)

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

## 3. S3へbuildしたオブジェクトを追加

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/349baa98-1be4-041c-43fd-dc880543a0c6.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/b759fb36-ebfb-38c6-4346-efac4d555356.png)
　オブジェクトの削除画面へ遷移したら、指定したオブジェクトに相違は無いか確認した上で、下部に「完全に削除」と入力し、オブジェクトの削除を実行する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/f72be38b-4719-30af-c592-bee91cbb8aea.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/0014d801-76bc-f49f-ba34-16a9111f30f7.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/72695d82-3733-a90c-4af1-cf1377adc59f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/762dd99b-26d1-aad9-70e7-c96e5804cae7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/72d2decf-c0b2-03aa-21df-ae6c2f9e438f.png)

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

## 4. CloundFrontからキャッシュ削除を行う

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/e8dd6a12-7004-ab2d-12f6-867803ae5f3d.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/b954a30f-dd23-3cca-081d-eb39eb96f393.png)
　

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/d7075d82-d140-6abf-b6ec-5755ed9f9967.png)

　今回は、一番古いデータのキャッシュを削除し、再度コピー処理を行うので、
　最下行のIDを選択し、「新規にコピー」する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/84783e1f-c4c4-debb-7bac-51aa1bdf1ac8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/e2a37222-173a-f4ce-d8be-553043458643.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2297939/2ffdd0c0-c6d2-6963-775c-e06d407e571e.png)

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


## おわりに

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