AWS Amplify を別のサービスで再現してみた
ソリューション事業グループ
クラウドサービス事業本部
サービス開発推進部
広野 祐司
2022年6月23日
Copyright © SCSK Corporation

って言うけど、何をしたの？

Copyright © SCSK Corporation

やったことAWS Amplify の機能を、AWS の別サービスを組み合わせて作ってみました。
Amazon Route 53
DNS管理

AWS Amplify
サーバーレスアプリのビルド・デプロイ

AWS Certificate Manager
SSL証明書管理
Amazon EventBridge
イベント管理AWS CodePipeline
CI/CDパイプライン管理
AWS CodeBuild
アプリケーションコードのビルド

全9種類

AWS Lambda
AWS リソースをコードで実行
Amazon S3
アプリケーションホスティング・CI/CDアーティファクト用一時ストレージ
Amazon CloudFront
コンテンツ配信・キャッシング (CDN)AWS CloudFormation
リソースプロビジョニング
Copyright © SCSK Corporation2なんでわざわざそんなことを？

Copyright © SCSK Corporation

当社ワクチン予約システム開発時の課題がずっと気になっていたからです。

Copyright © SCSK Corporation

樋口さんのプレゼンを拝借

ワクチン予約システム開発
当時、樋口さん、広野、AWSさんですぐに解決できませんでした。

AWS

いい方法が見つからない！

これを解決しておきたかったのが理由です。
Copyright © SCSK Corporation

5

そもそも AWS Amplify ってAWS Cloud

アプリのコードさえ用意できれば、アプリを自動的にビルド、デプロイする
CI/CD環境とアプリの稼働環境を提供してくれる

リージョン
Developer

VPC
アプリ開発

Cloud9統合開発環境神サービス。

① コードプッシュ
CodeCommit
コード管理

AWS Amplify③ ビルド・デプロイ② ソースコード取得

User

ユーザアクセス

なので、AWS Amplify でできないことをしようと思ったら独自に機能を作りこむ必要がありました。

Copyright © SCSK Corporation

6

実際にやってみたこと

Copyright © SCSK Corporation

IPアドレス制限の実装方法を2パターン考えました

1. アプリ全体にIPアドレス制限をかける
2.アプリ内、特定のページだけIPアドレス制限をかける

Copyright © SCSK Corporation

8１．アプリ全体にIPアドレス制限をかける

Copyright © SCSK Corporation

AWS Amplify だと
AWS Cloudリージョン
Developer

VPC
アプリ開発

ここで、ユーザのIPアドレスに対して制御をかける機能がない

Cloud9統合開発環境① コードプッシュ
CodeCommit
コード管理

AWS Amplify③ ビルド・デプロイ② ソースコード取得

User

ユーザアクセス

Copyright © SCSK Corporation

10

AWS Amplify を使わずに同等の仕組みを作ってみた
AWS Cloudリージョン
CI/CD パイプライン

Developer

VPC
アプリ開発

CodePipeline
Cloud9統合開発環境⑤ ソースコード情報保存
ソースコード情報取得① コードプッシュ
CodeCommit
コード管理

ビルド

④ ソースコード情報取得

CodeBuild⑥ ソースコード情報取得⑨ アーティファクト保存⑦ ソースコード取得

アーティファクト
保存用バケット⑧ ビルド
EventBridge
コード更新
イベントチェック

② コード変更検知

CloudFormation

S3⑩ アーティファクト取得

呼出参照(OAI)

デプロイ⑪ デプロイ③ CI/CDパイプライン呼出
Systems Manager
パラメータストア

アプリ配置
バケット
CloudFront
キャッシュクリア⑫ キャッシュクリア

Lambdaバックエンドプロビジョニング時に環境変数を登録、ビルド時にbuildspec.ymlに従い環境変数を取得

User

さらにWAFを追加して、アクセスを許可するIPアドレスを制御

CloudFront
ユーザアクセス
コンテンツ配信
WAF
ソースIPアドレスチェック
Copyright © SCSK Corporation

11

2．アプリ内、特定のページだけIPアドレス制限をかける

Copyright © SCSK Corporation

AWS Amplify だと
AWS Cloud

サーバーレスアプリの制約上、画面内のあらゆる制御はユーザのブラウザ内で行われる。

リージョンDeveloper

VPC
アプリ開発

Cloud9統合開発環境＝AWS Amplifyや代替の仕組みで制御できる代物ではない。

① コードプッシュ
CodeCommit
コード管理

AWS Amplify③ ビルド・デプロイ② ソースコード取得

User

ユーザアクセス

そして、アプリ単体では自分のIPアドレスがわからない＝IPアドレスによる画面単位の制御ができないという課題がある

Copyright © SCSK Corporation

13

自分のIPアドレスさえわかればアプリ内で制御を入れられる
例えば、管理者画面 (Admin) のボタンを表示させる／させないを制御する

例えば、ソースコード内で管理者画面を構成するパスを有効にする／しないを制御する

Copyright © SCSK Corporation14

ということで、自分のIPアドレスを取得する仕組みを作ってみた
ここに存在する、ユーザのソースIPアドレス（グローバルIPアドレス・IPv4）をAmazon API Gateway に取得、返送してもらう

AWS Cloud

リージョン

User

Internet
AmazonAPI Gateway

自分のIPアドレスがわかったぞ！

IPアドレス返送

IPアドレス取得

Amazon API Gateway には MOCK モードがあり、API Gateway 内で処理を折り返すことができる。
アクセスログ取得用途でユーザのIPアドレスを取得する機能があるので、それを利用する。
Copyright © SCSK Corporation15

めでたし、めでたし。
樋口さーん、あのときできなかった
こと、できるようになったよ～！

Copyright © SCSK Corporation

紹介した機能の実装方法は TechHarmony ブログで紹介しています

1.アプリ全体にIPアドレス制限をかける
https://blog.usize-tech.com/build-cicd-env-as-amplify-console/2.アプリ内、特定のページだけIPアドレス制限をかける
https://blog.usize-tech.com/get-ipaddress-by-api-gateway/

Copyright © SCSK Corporation17

駆け足でしたが、ご清聴ありがとうございました。

Copyright © SCSK Corporation

Appendix

Copyright © SCSK Corporation

自己紹介

広野 祐司 （ひろの ゆうじ）
ソリューション事業グループ クラウドサービス事業本部

サービス開発推進部 サービス開発課

略歴• netXDC 監視・運用サービス運営• 海外グローバル運用サービスの国内展開• 2019年度より社内クラウド人材育成を推進
教育進捗管理ツール や e-Learningツール を開発・提供中
2020, 2021 APN AWS Top Engineers 受賞

2022 AWS Partner Ambassador 受賞
Copyright © SCSK Corporation.

20