Amplify Function を TypeScript で開発し、ESLint, Prettier で解析する CI/CD 環境

Amplify 便利ですよね。Amplify Function を TypeScript で実装し Lambda にデプロイする方法を調査しました。

本記事は Amplify Docs の公式サイトの解説を元に TypeScript を ESLint と Prettier で静的コード解析した上で Lambda にデプロイする一連の流れを説明します。

本題ではないものは割愛して公式サイトのリンクを掲載します。

CI/CD 環境の考え方

基本となる考え方は上記記事と同じです。

• CI はソースコードの①静的コード解析→②テストを担う
• CD は③ビルド→④デプロイを担う

環境構築

Amplify CLI をインストール

npm install -g @aws-amplify/cli

TypeScript, ESLint, Prettier, husky のインストール

package.json

{
  "devDependencies": {
    "@types/node": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.30.3",
    "@typescript-eslint/parser": "^5.30.3",
    "eslint": "^8.0.1",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "husky": "^8.0.1",
    "prettier": "^2.7.1",
    "typescript": "^4.7.4"
  }
}

Amplify Function を TypeScript で開発

Amplify Function を自動生成

amplify add function で generateReport という名前でファンクションを自動生成します。すると amplify/backend/function/generateReport/src 配下にいくつかの JavaScript ファイル等が生成されています。

ファンクションを TypeScript で開発

amplify/backend/function/generateReport/lib 配下に TypeScript で開発したプログラムを格納します。

CI/CD 環境準備

ESLint, Prettier で開発した TypeScript を静的ソースコード解析

.eslintrc.json と .prettierrc を準備してください。

package.json

{
  "scripts": {
    "lint:fix": "prettier --write 'amplify/backend/function/**/lib/*.ts' && eslint --fix amplify/backend/function/**/lib/*.ts",
  }
}

TypeScript をデプロイ用 JavaScript へトランスパイル

amplify push コマンドは任意のスクリプト処理を実行してからLambda にデプロイするように設定出来ます。

package.json のスクリプトに TypeScript をトランスパイルする処理を書きます。

{
  "scripts": {
    "amplify:generateReport": "cd amplify/backend/function/generateReport && tsc -p ./tsconfig.json && cd -"
  },
}

各ファンクションのフォルダ直下（amplify/backend/function/generateReport）に tsconfig.json を配置してください。

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "lib": ["dom", "esnext"],
    "module": "commonjs",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "outDir": "./src",
    "baseUrl": "./",
    "rootDir": "./lib",
    "paths": {
      "src": ["./lib"]
    }
  }
}

CI/CD 実行

CI（継続的インテグレーション）

husky で git commit 前に lib 配下の TypeScript 開発ソースコードを ESLint, Prettier で静的コード解析します

.husky/pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

yarn lint:fix

CD（継続的デリバリ）

husky で git push 前に lib 配下の TypeScript 開発ソースコードを JavaScript にトランスパイルして src 配置して、Lambda にデプロイします。

.husky/pre-push

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

amplify push

最終的には以下のようなフォルダ構成になっています。

以上です。