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


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

WebサイトをNanocで作成

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

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

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

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

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

注意事項:

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: 設定 > リポジトリ > ミラーしているリポジトリ

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

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

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

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


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

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

という要望も挙がってくるかと思います。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等を学び自在に環境が構築できるよう努めます。


My Redmine

こちらの記事もオススメです!
AWS Amplify のログイン認証機能を試してみた
「AWS Amplify」を利用して、ログイン画面の実装について手順を紹介します。
TourBoxを使って動画編集処理の時間短縮に成功!
ダイヤルやボタンにキーボードショートカットを自由に定義。Premiere Proでの動画編集作業がとても楽になりました。
紙の書籍から電子書籍での読書に変えました
KindleとFire HDを使い分けて電子書籍を読んでいます。
2020年2月にシンガポールの海底ケーブル陸揚げ局を見に行った
インターネットを支える海底ケーブル陸揚げ局の外観を見ることができました。
AWSクラウドハンズオン講座で講師デビューしました(動画・資料あり)
AWSのハンズオン講座で初めて講師を務めました。動画や資料もあります。
ファーエンドテクノロジーからのお知らせ(2021/04/28更新)
Redmine 4.2.0以前のGitアダプタの任意ファイル読み取り脆弱性 (#35085) 対応済みのご報告
Redmine 4.2.0以前のGitアダプタの任意ファイル読み取り脆弱性 (#35085) 対応済みのご報告
2021年度ブランドパートナーに島根県在住のモデル ユイさんを連続起用
ユイさん(モデルスタジオミューズ所属)をファーエンドテクノロジーのブランドパートナーとして継続して起用します。今年度で4年目となります。
My Redmine TLS 1.0 / 1.1 無効化のお知らせ
Redmineのクラウドサービス「My Redmine」では、古い暗号化通信プロトコルであるTLS 1.0と1.1を無効化しました。
APPS JAPAN 2021 フェーズ02(4/19〜23開催)にオンライン出展
4月19日〜23日に開催される「APPS JAPAN 2021」のフェーズ02(オンライン開催)に出展します。
Redmineの最新情報をメールでお知らせする「Redmine News」配信中
新バージョンやセキュリティ修正のリリース情報、そのほか最新情報を迅速にお届け