あめがえるのITブログ

頑張りすぎない。ほどほどに頑張るブログ。

AWS Amplifyの初期設定をやってみた


ユーザーガイドを読んでもいまいちよくわからないのでとりあえずやってみた。

やること

AWS Amplifyの初期設定(初回アプリケーション作成)まで実施する。

前提

  • Gitリポジトリが必要 ※今回はCodeCommitを利用する
  • ローカル環境でGitコマンドが使用できること ※今回はWindows環境でPowerShellを利用する

Amplify アプリケーション作成

1.Gitリポジトリ作成
1-1.[AWS]-[CodeCommit]
1-2.[リポジトリを作成]

1-3.下記を入力
 ・リポジトリ名:任意
 ・説明:任意

1-4.[作成]


2.IAM Git認証用ユーザID/PW生成
2-1.[AWS]-[IAM]-[ユーザー]
2-2.[ユーザーの作成]

2-3.下記を入力
 ユーザー名:任意
 許可のオプション:ポリシーを直接アタッチする
  ※今回は面倒なのでユーザに直接ポリシーをアタッチしましたがグループ、ロールを作ってつけましょう。
 許可ポリシー:AWSCodeCommitFullAccess



2-4.[ユーザーの作成]

2-5.作成したユーザーを選択
2-6.[セキュリティ認証情報]タブを選択

2-7.[AWS CodeCommit の HTTPS Git 認証情報]の[認証情報を生成]
2-8.[認証情報をダウンロード]し、[閉じる]

3.CodeCommitへ接続・初期化
3-1.[AWS]-[CodeCommit]-[リポジトリ]
3-2.作成したリポジトリの[URLのクローン]-[HTTPS]をクリック

3-3.ローカル環境でPowerShellを起動
3-4.下記を入力

> mkdir <ローカルリポジトリフォルダ>
> cd <ローカルリポジトリフォルダ>
> git clone <作成したリポジトリのURL>
※3-2でクリップボードにURLがコピーされるので貼り付ける。
> git clone https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/test-amplify-repo
Cloning into 'test-amplify-repo'...
warning: You appear to have cloned an empty repository.

3-5.認証画面で項番2でダウンロードした認証情報を入力

3-6.ローカルリポジトリに適当なファイルを配置

> ls
    ディレクトリ: C:\git
Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2024/05/19     13:22                test-amplify-repo
> cd <リポジトリ名>
> New-Item -Path . -Name "test.txt"

3-7.下記を入力

> git add .

> git commit -m "test"
[main (root-commit) ebd5ef1] test
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 test.txt
PS C:\git\test-amplify-repo> git log
commit xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx (HEAD -> main)
Author: xxxxxxxxx <xxxxxxxx@xxxxxxxx.co.jp>
Date:   Sun May 19 13:41:33 2024 +0900

    test

> git push origin main
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 201 bytes | 201.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
remote: Validating objects: 100%
To https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/test-amplify-repo
 * [new branch]      main -> main


4.Amplify アプリケーション作成
4-1.[AWS]-[Amplify]
4-2.[新しいアプリを作成]

4-3.下記を選択
 アプリケーションデプロイ:CodeCommit
 リポジトリとブランチを追加:
  ・作成したリポジトリ
  ・main
 アプリケーション名:任意



4-4.[保存してデプロイ]

※ロケットが飛んだらしばらく待つ

※コンソール画面に戻ったら完了


5.動作確認
5-1.デプロイされたURLにアクセスしてWebサイトが表示されることを確認
 5-1-1.[AWS]-[Amplify]-作成したアプリケーションを選択
 5-1-2.[デプロイされたURLにアクセス]
  ※失敗が出てる、、、

 5-1-3.Webサイトが表示されることを確認



感想

ここからが本番。先は長い、、、