CloudFormation
ここでは、前回作成したリポジトリの続きから進めていきます。
まずは AWS CLI と Github Appをインストールし、 Github Personal Access Token (PAT)を取得し、
CloudFormationの.ymlファイルで静的ウェブをAmplify通してデプロイします。
AWS CLIの設定
a. AWS CLIをインストール
b. AWS アクセスキー
AWS IAM にてアクセスキーを作成し、取得をします。
注意
上記のシークレットアクセスキーが再生できないため、.csvファイルをダウンロードボタンで安全な場所に
保管しましょう。
c. アクセスキー設定
最後に AWS CLI にアクセスキーを設定します。上記画面のアクセスキーをコピペします。
$ aws configure
AWS Access Key ID [None]: *************
AWS Secret Access Key [None]: ***************
Default region name [None]: ap-northeast-1
Default output format [None]: json
Github Appをインストール
Amplify が GitHub リポジトリに安全かつ最小限の権限でアクセスし、 ソース取得・ビルド・Webhook 設定を行うため、従来の OAuth に代わって GitHub App のインストールが必要です。
https://github.com/apps/aws-amplify-ap-northeast-1へアクセスし、
以下の通りGithub Appのインストールをします。
Personal Access token 作成
https://github.com/settings/tokensへアクセス
CFのテンプレート作成
こちらは AWS CloudFormation テンプレートで、 GitHub 上の MkDocs サイトを AWS Amplify を使ってデプロイし、 カスタムドメイン tutorial.yourdomain.com で公開する構成を定義しています。
Parameters:
GitHubAccessToken:
Type: String
NoEcho: true
Description: GitHub personal access token
Resources:
MyAmplifyApp:
Type: AWS::Amplify::App
Properties:
Name: static-website
Repository: https://github.com/your-name/your-repo
AccessToken: !Ref GitHubAccessToken
BuildSpec: |
version: 1.0
frontend:
phases:
preBuild:
commands:
- pip install mkdocs-material
build:
commands:
- mkdocs build
artifacts:
baseDirectory: site
files:
- '**/*'
AmplifyBranch:
Type: AWS::Amplify::Branch
Properties:
AppId: !GetAtt MyAmplifyApp.AppId
BranchName: main
AmplifyDomain:
Type: AWS::Amplify::Domain
Properties:
AppId: !GetAtt MyAmplifyApp.AppId
DomainName: yourdomain.com
SubDomainSettings:
- Prefix: tutorial
BranchName: main
a. パラメータ定義
GitHubAccessToken: GitHub リポジトリへアクセスするための個人アクセストークン（PAT）をパラメータとして受け取ります。NoEcho: true により、CloudFormation コンソール上で値が表示されないように保護されています。
b. リソース定義
-
MyAmplifyApp— Amplify アプリの作成MyAmplifyApp: Type: AWS::Amplify::App Properties: Name: static-website Repository: https://github.com/BobbyTumur/static-website AccessToken: !Ref GitHubAccessToken- GitHub リポジトリから
static-websiteという名前で Amplify アプリを作成。 AccessTokenによりプライベートリポジトリも扱えるようになる。
BuildSpec:
BuildSpec: | version: 1.0 frontend: phases: preBuild: commands: - pip install mkdocs-material build: commands: - mkdocs build artifacts: baseDirectory: site files: - '**/*'mkdocs-materialをインストールし、mkdocs buildで静的サイトを生成。site/フォルダの中身をデプロイ対象とする。
- GitHub リポジトリから
-
AmplifyBranch— デプロイするブランチの指定AmplifyBranch: Type: AWS::Amplify::Branch Properties: AppId: !GetAtt MyAmplifyApp.AppId BranchName: main- GitHub の
mainブランチを Amplify アプリに紐づけ、ブランチ単位での自動ビルド／デプロイが可能になります。
- GitHub の
-
AmplifyDomain— カスタムドメインの設定AmplifyDomain: Type: AWS::Amplify::Domain Properties: AppId: !GetAtt MyAmplifyApp.AppId DomainName: yourdomain.com SubDomainSettings: - Prefix: tutorial BranchName: maintutorial.yourdomain.comをmainブランチに割り当てます。- これにより、
https://tutorial.yourdomain.comでサイトが公開されます。
注意
このドメインを使用するには、事前に Route 53 や外部の DNS プロバイダで DNS 設定を行う必要があります。 ドメイン取得していない場合は、
AmplifyDomainのリソースを削除してください。
CloudFormation実行
$ aws cloudformation deploy \
--template-file template-cf.yml \ # (1)!
--stack-name amplify-deploy \ # (2)!
--parameter-overrides GitHubAccessToken=$(cat ~/.github_amplify_token) \ # (3)!
--capabilities CAPABILITY_IAM
Waiting for changeset to be created..
Waiting for stack create/update to complete
Successfully created/updated stack - amplify-deploy
- CFのテンプレート作成で作成したテンプレートを指定
- CloudFormationのスタックの名付け
- Personal Access Token 作成したトークンの指定
ウェブへアクセス
クリーンアップ
完了🔥
上記において、Amplify **がリポジトリへアクセスできるよう、GitHub** にて Amplify App をインストールしました。 また、そのアクセスのための認証情報として PAT (Personal Access Token) を発行・ダウンロードしました。 この PAT を CloudFormation テンプレートに含めることで、CloudFormation によってスタックおよび Amplify アプリを正常に作成・実行することができました。
参照リンク：