【AWS Amplify】GitHub連携でVueアプリをAmplifyへデプロイする手順

# 1. 概要
この記事では、 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3837534/516f6ed7-1e48-892e-5b56-467cc9b55744.png" alt="Amplify" width="14"> AWS AmplifyにGithubを連携し、Vueアプリをデプロイする手順を記載しています。


# 2. 目次
1. 概要
1. 目次
1. 手順
    1. 事前準備
        1. Vueアプリを作成する
        1. Githubにアップロードする
    1. AWS Amplifyにデプロイする
        1. マネジメントコンソールをひらく
        1. AWS Amplifyをひらく
        1. AWS Amplifyでアプリ作成する
    1. 動作確認
1. 参考資料

# 3. 手順
### 3.1. 事前準備
##### 3.1.1. Vueアプリを作成する
参考：[yarn とは？（＋ Mac に yarn を導入する手順）](https://qiita.com/to3izo/items/5cce739683fddfe5532a)
```bash
$ yarn create vite aws-amplify-mark1 --template vue
$ cd aws-amplify-mark1
$ yarn
$ yarn dev
```
##### 3.1.1. Githubにアップロードする
※事前にGithubでアップロード先のレポジトリを作成する必要があります。参考：[リポジトリのクイック スタート](https://docs.github.com/ja/repositories/creating-and-managing-repositories/quickstart-for-repositories)
```bash
$ cd aws-amplify-mark1 # カレントディレクトリがすでにaws-amplify-mark1の場合は不要
$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin git@github.com:"ここは自分のOrganizationに置き換える"/aws-amplify-mark1.git
$ git push -u origin main
```
補足：[ryo-arima/aws-amplify-mark1](https://github.com/ryo-arima/aws-amplify-mark1)のようになれば完了

### 3.2. AWS Amplifyにデプロイする
##### 3.2.1. マネジメントコンソールをひらく
![mgmt_console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3837534/beec4953-785a-ff37-dc3c-10663c672411.png)

##### 3.2.2. AWS Amplifyをひらく
![スクリーンショット 2024-08-21 23.34.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3837534/a1ce2263-4238-1f3a-bb09-0eeac4300bc0.png)

##### 3.2.3. AWS Amplifyでアプリ作成とデプロイ
![スクリーンショット 2024-08-21 23.41.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3837534/ef21058a-5e8e-ab43-ed14-369824afe85f.png)
![スクリーンショット 2024-08-21 23.41.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3837534/d21f4a84-36f5-aa21-fedc-219e0c7ad4fb.png)
<br>
Githubとの連携設定
「Only select repositories」を選択し、先ほどアップロードしたレポジトリを選択する
![スクリーンショット 2024-08-21 23.43.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3837534/93a7b9a6-549b-1586-656e-d4091c60b297.png)
![スクリーンショット 2024-08-21 23.42.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3837534/456291e1-5c31-f685-f03c-f3bc42d74453.png)
![スクリーンショット 2024-08-21 23.44.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3837534/7cc9d3f6-f80a-5f59-f647-2653c1ad1b2a.png)
「Install & Authorize」をクリックし、AWS Amplifyの設定画面に戻る
<br>
連携したレポジトリを選択し、「次へ」をクリック
![スクリーンショット 2024-08-21 23.47.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3837534/04fe45a1-8488-b56b-7cc7-6acaa0b3ea82.png)
デフォルト値のまま「次へ」をクリック
![スクリーンショット 2024-08-21 23.47.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3837534/9142533d-740e-e316-e30c-10365e6dc4d8.png)
デフォルト値のまま「保存してデプロイ」をクリック
![スクリーンショット 2024-08-21 23.48.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3837534/cc74b7e9-8bc4-35db-f11f-1fcabc865856.png)
ステータスが「デプロイ済み」になるのを確認する※数分かかります。
![スクリーンショット 2024-08-21 23.49.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3837534/bd801155-e6c6-a75b-291e-6a65ef52ddef.png)

### 3.3 動作確認
ドメインのURLへアクセスし、以下の表示になれば完了
![スクリーンショット 2024-08-21 23.50.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3837534/78d10897-2b7b-94de-39a7-1ced747216d8.png)


おわりです。

# 4. 参考資料
- Vite：https://ja.vitejs.dev/
    - はじめに：https://ja.vitejs.dev/guide/
- AWS Amplify：https://aws.amazon.com/jp/amplify/
- GitHub Docs：https://docs.github.com/ja
    - リポジトリのクイック スタート:
https://docs.github.com/ja/repositories/creating-and-managing-repositories/quickstart-for-repositories