Zenn
📥

自分用のAWS CDKプロジェクトのテンプレート作ってみた

2023/06/04に公開
AWS
AWS CDK
tech

AWS CDK便利ですよね。コンソールでポチポチやるのもいいですが、サービスに慣れてしまってかっこよくCDKのみで構築できたらと思っています。

今回は、そんなAWS CDKのサンプルコードに対して、CDKのガイドラインに従うようなlinterやformatterを設定し、huskyによる自動テストも組み込んだtypescriptのプロジェクトテンプレートを作りました。

作ったものはこちらになります。

https://github.com/okojomoeko/aws-cdk-project-template

自分の備忘録的にどうやって上記のテンプレートを作ったのか手順を残しておこうと思います。

手順

1. 必要なツールの導入

eslintやprettier、huskyなどひととおり導入します。

npm i -D husky lint-staged @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-jest eslint-config-prettier eslint prettier

2. ツールの設定

eslintとprettier

aws cdkのDESIGN_GUIDELINESから内容を少し抜粋すると、下記のような感じの命名規則やスタイルが低減されています。

対象 命名規則
クラス名 パスカルケース
プロパティ キャメルケース
メソッド キャメルケース
インターフェイス(Behavioral interfaces) IMyInterface
インターフェイス(Data interfaces) MyDataScruct
列挙名(enum) パスカルケース
列挙型のメンバー(enumMember) UPPER_CASE
  • Indentation: 2 spaces
  • Line length: 150

なので、上記のガイドラインに合わせてeslintを設定します。

ただし、下記の通りプロパティについてはルールを設定していません。

{
    "@typescript-eslint/naming-convention": [
      "error",
      {
        "selector": "class",
        "format": ["PascalCase"]
      },
      // {
      //   "selector": "property",
      //   "format": ["camelCase"]
      // },
    ]
}

理由としては、aws cdkでCloudFormationのテンプレートを直接いじるとき(アブストラクションとかエスケープハッチとか)、プロパティとして指定する値にPascalCaseを使うためです。

公式では下記の例が記載されており、この場合propertyを設定してしまうとerrorになってしまいます。

new cdk.CfnResource(this, 'MyBucket', {
  type: 'AWS::S3::Bucket',
  properties: {
    // Note the PascalCase here! These are CloudFormation identifiers.
    AnalyticsConfigurations: [
      {
        Id: 'Config',
        // ...
      }
    ]
  }
});

ついでにprettierにもformatしてもらいたいので、それも導入するようにしました。

ただし、デフォルトだとprettierは"singleQuote": falseの設定であり、eslint側の設定と差がでないように.prettierrc.jsonに設定しておきます。

{
  "singleQuote": true
}

Biome

npm i -D --save-exact  @biomejs/biome
npx @biomejs/biome init --jsonc

eslint と prettier についての設定を migrate できます。

npx @biomejs/biome migrate eslint --write --include-inspired
npx @biomejs/biome migrate prettier --write

そのまま migrate して使うと少し使いづらいところがあるので、ちょっとだけ設定を修正します。詳細は別記事にしています。

huskyとlint-staged

huskyの導入です。

npx husky install

huskyによってgit hookを使えるようになりますが、どのhookで処理をやらせるかというところで下記の方針で導入しました。

  • commitのたびにlinterとformatterでコードをいい感じに修正
  • push前にテストを実施する

ということで、下記の通りpre-commitとpre-pushを入れました。

npx husky add .husky/pre-commit "npx lint-staged"; npx husky add .husky/pre-push "npm run build; npm run test"

おわり

簡単にですが、自分用のAWS CDKのプロジェクトテンプレートを作成しました。

まだまだもっと開発効率を上げることができるような気がするので、これが最低限という心持ちでどしどしDeveloper eXperienceがよくなるような機能を入れていきたいですね。

むしろもっとこれも入れておいたほうがいいみたいなものがあればぜひ教えていただきたいです。

Discussion