Amplify CLI のカスタムリソースを CloudFormation で作成してみた
Use CloudFormation to add custom AWS resources - JavaScript - AWS Amplify Gen 1 Documentation
CloudFormation で VPC を追加してみました。
実行環境
- Cloud9
- Amplify CLI バージョン: 12.14.4
Amplify CLI のインストール手順
デフォルトでは Cloud9 環境に Amplify CLI はインストールされていないため、明示的にインストールする必要があります。
$ npm install -g @aws-amplify/cli
npm install で「permission denied」となった場合の解決方法
以下のようなエラーでインストールできない場合、後述のコマンドをお試しください。
npm error code EACCES
npm error syscall mkdir
npm error path /usr/local/lib/node_modules/@aws-amplify
npm error errno -13
npm error [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@aws-amplify'] {
npm error errno: -13,
npm error code: 'EACCES',
npm error syscall: 'mkdir',
npm error path: '/usr/local/lib/node_modules/@aws-amplify'
npm error }
npm error
npm error The operation was rejected by your operating system.
npm error It is likely you do not have the permissions to access this file as the current user
npm error
npm error If you believe this might be a permissions issue, please double-check the
npm error permissions of the file and its containing directories, or try running
npm error the command again as root/Administrator.
npm notice
npm notice New major version of npm available! 10.9.2 -> 11.1.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.1.0
npm notice To update run: npm install -g npm@11.1.0
npm notice
npm error A complete log of this run can be found in: /home/ec2-user/.npm/_logs/2025-02-25T10_45_19_123Z-debug-0.log
上記エラー発生時に実行するコマンドは以下の通りです。
$ mkdir -p ~/.npm-global
$ npm config set prefix '~/.npm-global'
$ echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
$ source ~/.bashrc
$ npm install -g @aws-amplify/cli
Amplify CLI で VPC を追加してみた
【CloudFormation入門】5分と6行で始めるAWS CloudFormationテンプレートによるインフラ構築 | DevelopersIO
使用する CloudFormation テンプレートは上記ブログで紹介されているテンプレートを JSON 形式に変換したものです。
まずは Amplify プロジェクトを作成します。
$ mkdir test; cd test
$ amplify init
? Enter a name for the project test
The following configuration will be applied:
Project information
| Name: test
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: none
| Source Directory Path: src
| Distribution Directory Path: dist
| Build Command: npm run-script build
| Start Command: npm run-script start
? Initialize the project with the above configuration? Yes
Using default provider awscloudformation
? Select the authentication method you want to use: AWS access keys
? accessKeyId: ********************
? secretAccessKey: ****************************************
? region: ap-northeast-1
Adding backend environment dev to AWS Amplify app: d5ujzu2g3xyop
Deployment completed.
以下のコマンドでカスタムリソースを CloudFormation で作成します。
$ amplify add custom
How do you want to define this custom resource? · AWS CloudFormation
Provide a name for your custom resource · customResource7f624ed7
Do you want to access Amplify generated resources in your custom CloudFormation file? (y/N) · no
Do you want to edit the CloudFormation stack now? (Y/n) · no
上記コマンド実行後、amplify/backend/custom/<resource-name> というディレクトリに <resource-name>-cloudformation-template.json というファイルが作成されます。
このファイルが CloudFormation テンプレートになっているため、テンプレートにリソースを定義することで Amplify CLI からカスタムリソースを作成することができます。
今回は以下のようにテンプレートを編集しました。
{
"AWSTemplateFormatVersion": "2010-09-09",
"Parameters": {
"env": {
"Type": "String"
}
},
"Resources": {
"FirstVPC": {
"Type": "AWS::EC2::VPC",
"Properties": {
"CidrBlock": "10.0.0.0/16"
}
}
}
}
デプロイします。
$ amplify push
Current Environment: dev
┌──────────┬────────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name │ Operation │ Provider plugin │
├──────────┼────────────────────────┼───────────┼───────────────────┤
│ Custom │ customResource7f624ed7 │ Create │ awscloudformation │
└──────────┴────────────────────────┴───────────┴───────────────────┘
Are you sure you want to continue? (Y/n) · yes
CloudFormation コンソールを確認すると、カスタムリソース用のネストされたスタックが作成されていることも確認できます。
デプロイ完了後に VPC を確認できれば作成完了です。
まとめ
今回は Amplify CLI のカスタムリソースを CloudFormation で作成してみました。
どなたかの参考になれば幸いです。
Discussion