Webサイトのデプロイ作業をAWS Amplifyに移行しています

2021.04.14

Webサイトを静的サイトジェネレーター Nanocで作成しています
レビュワーの作業量を減らすため、WebサイトへのデプロイをAmplifyに移行しています
設定ミスを防ぐためCloudFormationを活用しています

原田です。今回はWebサイトをAWS Amplifyを用いて自動的に公開（デプロイ）しようとしていることについて書きます。

WebサイトをNanocで作成

弊社ではWebサイトの更新に静的サイトジェネレーターのNanocを利用しています。Nanocについては過去のブログでもご紹介しています。

レビュワーの作業量を減らすためAmplifyに移行

Webサイトの公開手順の一例です。

GitLabにはWebサイト用のプロジェクト（リモートリポジトリ）が存在します。
Webコンテンツのメンテナンスは、Webデザイナーがリモートリポジトリをローカルリポジトリにフォーク・作業用ブランチを作成し、Webコンテンツに修正を加えます。
WebデザイナーはWebコンテンツ修正・確認後リモートリポジトリにプルリクエスト（マージリクエスト）を行いレビューを依頼します。
レビュワーはプルリクエストを確認（レビュー）し、内容に問題がなければmain（master）ブランチにマージします。マージ後はnanoc deployコマンドを実行しmainブランチをWebサイトに公開します。

今回Amplifyに移行するのは、上記手順の最後「4. nanoc deployコマンドを実行しmainブランチをWebサイトに公開」の部分です。概要ではありますがAmplifyへの移行手順を記します。

注意事項：

すべてAWSマネジメントコンソール上で行います。お試しになる場合は適切な権限を有するIAMユーザーでご確認ください。
各種設定情報はブログ用に作成したものです。実際の本番環境での利用はご自身で判断願います。

AWS Identity and Access Management（IAM）

GitLab → CodeCommit リポジトリ連携ユーザーを作成

GitLabリポジトリをCodeCommitリポジトリと連携させるためのユーザーを作成します。このユーザーのアクセス権限にはAWSCodeCommitPowerUserポリシーを設定し、認証情報はAWS CodeCommit の HTTPS Git 認証情報のみを有効にしてください。Git認証情報作成時に認証情報（User Name, Password）をCSVファイルでダウンロードできますので保管しておいてください。認証情報は後ほどGitLabリポジトリのミラーリング設定で使用します。

その他の認証情報（アクセスキー、AWS CodeCommit の SSH キー、Amazon Keyspaces (for Apache Cassandra) の認証情報）は使用しませんので削除してください。

IAM: リポジトリ連携ユーザーのアクセス権限

IAM: AWS CodeCommitのHTTPS Git認証情報

サービスロールを作成

Amplifyコンソールに登録したアプリケーションをバックグラウンドで動作させるためのサービスロールを作成します。今回はサービスロールのアクセス権限にAdministratorAccessポリシーを設定しますが、セキュリティ上の観点から必要最小限の権限での運用もご検討ください。

IAM: Amplify用サービスロールのアクセス権限

IAM: Amplify用サービスロールの信頼関係

【参考】サービスロールの必要最小限の権限（クリックでコードを表示）

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Resource": [
                "arn:aws:logs:us-west-2:XXXXX:log-group:/aws/amplify/YYYYY",
                "arn:aws:logs:us-west-2:XXXXX:log-group:/aws/amplify/YYYYY:*"
            ],
            "Action": [
                "logs:CreateLogGroup",
                "logs:CreateLogStream",
                "logs:PutLogEvents"
            ]
        },
        {
            "Effect": "Allow",
            "Resource": [
                "arn:aws:codecommit:us-west-2:XXXXX:example.co.jp"
            ],
            "Action": [
                "codecommit:GitPull"
            ]
        }
    ]
}

AWS CodeCommit：リポジトリを作成

GitLabリポジトリが非公開の場合はAmplifyからGitLabのコミットを監視することはできません。しかしGitLabからリポジトリの変更をCodeCommitにアップすることで、AmplifyはCodeCommitから通知を受け取り動作します。

CodeCommit: リポジトリの作成

ここではリポジトリを作成して、リポジトリのURLを控えておいてください（HTTPSのクローンを選ぶことでクリップボードにURLがコピーされます）。URLは後ほどGitLabリポジトリのミラーリング設定で使用します。

CodeCommit: URLのコピー

GitLabリポジトリにミラーリング設定

GitLabリポジトリの変更をCodeCommitに反映させるためミラーリング設定を行います。

GitLab: 設定 > リポジトリ > ミラーしているリポジトリ

GitリポジトリURL: https://[認証情報（CSV）のUser Name]@[CodeCommitリポジトリのURL]
ミラーの方向: プッシュ
認証方法: パスワード
パスワード: [認証情報（CSV）のPassword]

上記の値を入力後、ミラーリポジトリボタンをクリックすると登録されます。ミラーされたリポジトリの一覧に登録したCodeCommitリポジトリが表示されますが、登録直後はCodeCommitを自動更新しないので一覧上の今すぐ更新ボタンをクリックしてください。

AWS Amplifyコンソール：アプリケーションを定義

Amplifyコンソールではアプリケーション（アプリ）にリポジトリを接続することでコードの変更（コミット）がリポジトリに反映されたタイミングでアプリのデプロイ（Webサイトの公開）が実施されます。アプリ登録時の設定は以下のとおりです。

From your existing code: AWS CodeCommit
リポジトリ（リポジトリブランチの追加）: CodeCommitに作成したリポジトリを選択
ブランチ（リポジトリブランチの追加）: main（master）
アプリの名前（ビルド設定の追加）: example.co.jp（CodeCommitの名称と合わせています）
ビルドの設定（ビルド設定の追加）: Nanocの各種設定はそのまま使用しますのでここではnanoc compileを実行するための設定を行います（アプリコンテナ上で公開するのでnanoc deployの実施は不要です）。
```
version: 1
frontend:
phases:
preBuild:
  commands:
    - rvm use 2.6.3
    - bundle install
build:
  commands:
    - bundle exec nanoc compile
artifacts:
baseDirectory: output
files:
  - '*/'
cache:
paths: []
```
サービスロール（ビルド設定の追加）: 上記で作成したAmplify用サービスロール

最後に確認画面が表示されますので設定内容を確認後、保存してデプロイボタンをクリックします。Amplifyコンソールはアプリを作成しデプロイを実施します。Webコンテンツの内容にもよりますが数分後にはデプロイが完了します。

Amplifyコンソール: デプロイ完了後の画面

実際にAmplifyでの運用が始まると

main（master）以外のブランチでレビューを実施したい
Basic認証を有効にしたい
デプロイ時にメール通知が欲しい

という要望も挙がってくるかと思います。Amplifyコンソールではこれらの設定も可能です。

Amplifyコンソール: ブランチの自動検出（デプロイ）、Basic認証の有効化

Amplifyコンソール: メール通知の設定

設定ミスを防ぐためにCloudFormationを活用しています

今回はIAM, CodeCommit, Amplifyの設定をご紹介しましたけど、それぞれの機能に様々な設定が必要であることがお分かりいただけると思います。複数Webサイトを管理している場合、WebサイトごとにAmplifyコンソール等で人間が入力操作を行うと気付かないうちに設定ミスを起こす可能性があります。

これを防ぐためにAWS CloudFormationを活用しています。AWSのインフラ環境をYAMLやJSONデータで作成することでInfrastructure as Codeが実現され、冪等性も保証されます。上記でご紹介したIAM, CodeCommit, Amplifyの一連の設定もCloudFormationで定義することが可能です。引き続きAmplify, CloudFormation等を学び自在に環境が構築できるよう努めます。

こちらの記事もオススメです！

	AWS Amplify のログイン認証機能を試してみた「AWS Amplify」を利用して、ログイン画面の実装について手順を紹介します。
	TourBoxを使って動画編集処理の時間短縮に成功！ダイヤルやボタンにキーボードショートカットを自由に定義。Premiere Proでの動画編集作業がとても楽になりました。
	紙の書籍から電子書籍での読書に変えました KindleとFire HDを使い分けて電子書籍を読んでいます。
	2020年2月にシンガポールの海底ケーブル陸揚げ局を見に行ったインターネットを支える海底ケーブル陸揚げ局の外観を見ることができました。
	AWSクラウドハンズオン講座で講師デビューしました（動画・資料あり） AWSのハンズオン講座で初めて講師を務めました。動画や資料もあります。

ファーエンドテクノロジーからのお知らせ（2024/04/24更新）

	入門Redmine 第6版出版記念企画セミナー「Redmineのアクセス制御」【2024/5/30開催】入門Redmine 第6版（2024年3月23日発売）の書籍から「Redmineのアクセス制御」について解説します。
	My Redmine 初回ご契約で「入門Redmine 第6版」プレゼントのお知らせ Redmineのクラウドサービス「My Redmine」を初めてご契約いただいたお客様にRedmine解説書「入門Redmine 第6版」を進呈いたします。
	2024年度ブランドパートナーに島根県在住のモデルユイさんを継続起用ユイさん（モデルスタジオミューズ所属）をファーエンドテクノロジーの2024年度ブランドパートナーとして継続して起用します。
	My Redmine スタンダードプランおよびAdminサポートデスクプランの料金改定のお知らせ【2024年4月ご利用分より】 2024年4月ご利用分より、My Redmine スタンダードプラン（民間企業・個人向け及び官公庁向け）とAdminサポートデスクプランの料金を改定いたします。
	Redmineの最新情報をメールでお知らせする「Redmine News」配信中新バージョンやセキュリティ修正のリリース情報、そのほか最新情報を迅速にお届け