はじめに
この記事は、2025年7月に開催される「Progateハッカソン powered by AWS」での学びをまとめたものです。
この記事を通して、以下のような GUI 編集環境を構築します。
ツイートの動画は Web 上で動かしていますが、最終的にローカルで片付くような構成にしています。
AWS については見識が浅いので、間違いや改善点があればぜひ Discassion でご指摘ください。
前提
Cloud Formation（以下 CFn）とは
AWS のリソースを定義するためのテンプレート言語、およびそのテンプレートをもとに AWS リソースをデプロイするためのサービスです。
それまでは AWS マネジメントコンソール上でリソースを作成していましたが、CFn を使うことでコードでリソースを定義することが可能になりました。
CFn テンプレートは JSON または YAML で記述されます。だいたい以下のような感じ。
Resources セクションにリソースを定義していくことで、AWS リソースを作成できます。
AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31
Resources:
DummyParameter:
Type: AWS::SSM::Parameter
Properties:
Name: /dummy/placeholder
Value: placeholder
Type: String
リソースの種類は Type で識別しています。リソースタイプの種類は以下。
CDK とは
AWS リソースをプログラムで定義するためのフレームワークです。
リソースをコード上で管理する（Infrastructure as Code, IaC）ことができるため管理が容易であり、また AI Agent との親和性も高いです。
CDK は先述した CloudFormation の上に構築されており、CDK で定義したリソースは最終的に CFn テンプレートに変換されます。
つまり、CDK 自体は一般的なプログラミング言語で記述されますが、付属の CLI によって最終的に CFn テンプレートが生成されます。これにより、CloudFormation でのデプロイが可能になります。
言語としては JavaScript、TypeScript、Python、Java、C# などがサポートされています。
公式docs：
ここまでが前提知識です。
以下、GUI 編集環境を立てるためのツール群です。
AWS Application Composer とは
AWS が提供する、CDK を GUI で編集できるサービスです。
各リソースを示すノードをドラッグ＆ドロップで配置し、リソース間の依存関係を矢印でつなぐことで、CFn のコードを生成してくれます。
詳しくは後述しますが、ローカルのファイルに変更内容を吐き出すことができるため、VSCode などのエディタで編集することも可能です。
AWS Toolkit とは
VSCode の拡張機能です。
前述した AWS Application Composer は Web 上のサービスですが、これを VSCode 上で利用できるようにするためのツールがここに含まれます。
cdk-from-cfn とは
CFn テンプレートから CDK のコードを生成するためのツールです。
実践
さっそく準備していきます。
環境
筆者の環境を以下に示しておきます。
- Windows 11 (WSL2 / Ubuntu 24.04.01 LTS)
- Node.js 24.0.2
- Python 3.11.10
- AWS CDK 2.1017.1 (build 60506e5)
- aws-cdk-lib 2.198.0
プロジェクトを初期化
cdk プロジェクトを初期化します。
mkdir cdk-from-cfn-example && cd $_
npx cdk init app --language typescript
いい感じに初期化されたらok。
下準備
必要なツール群をインストールします。
npm install -D cdk-from-cfn nodemon
pip install aws-sam-translator pyyaml
aws 公式リポジトリから、SAM を CFn に変換するためのスクリプトをダウンロードします。
curl -LO https://raw.githubusercontent.com/aws/serverless-application-model/develop/bin/sam-translate.py
package.json の scripts セクションに以下を追加します。
上から SAM を CFn に変換するもの、CFn を CDK に変換するもの、その２つをコードの変更に応じて自動で行うもの、です。
私の好みでワンライナーにしてますが、スクリプトに分けてもいいと思います。
"scripts": {
// ...
"sam-translate": "AWS_DEFAULT_REGION=us-east-1 python sam-translate.py --template-file=sam-template.yaml --output-template=template.json",
"codegen": "node -e \"const [cdkfromcfn, fs] = [require('cdk-from-cfn'), require('fs')]; fs.writeFileSync(process.argv[2], cdkfromcfn.transmute(fs.readFileSync(process.argv[1]).toString(), 'typescript', 'CdkStack'));\"",
"codegen-mode": "nodemon --ignore .aws-composer --ignore template.json --exec \"npm run sam-translate && npm run codegen ./template.json ./lib/cdk-stack.ts\" ./sam-template.yaml"
},
Application Composer が CFn を吐き出す先のファイルと、そこから SAM 部分を変換した CFn コードを置くためのファイルをあらかじめ用意しておきます。
touch sam-template.yaml template.json
sam-template.yaml は空だと codegen-mode 実行時にエラーになるので、ダミーとして以下の内容を入れておきます。
AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31
Resources:
DummyParameter:
Type: AWS::SSM::Parameter
Properties:
Name: /dummy/placeholder
Value: placeholder
Type: String
これで準備完了です。
やってみる
さて、実際に動かしてみます。
まず、codegen-mode を実行します。
npm run codegen-mode
次に、sam-template.yaml を右クリックし、 Open with Application Composer を選択します。
Application Composer の画面が開きます。
lib/cdk-stack.ts を確認しながら編集してみます。
以下のように、編集内容が CDK のコードに反映されていることが確認できれば成功です。
参考
Progate公式コミュニティ 💻 日々エンジニアを目指す方々が集まっています✨ ✅プログラミングに関する情報共有 ✅コミュニティメンバーによるイベントへの参加 ✅開発経験者による技術的な質問への回答 独学でエンジニアを目指す、あなたの参加を待っています！
Discussion