CDKプロジェクトのセットアップ

CDKでなにか作り始める手順のメモ。

プロジェクトディレクトリの初期化

まずは、アプリケーションの雛形の準備。

$ mkdir my-cdk-proj
$ cd my-cdk-proj
$ npx cdk init app --language=typescript
npx: 235個のパッケージを25.117秒でインストールしました。
Applying project template app for typescript
Initializing a new git repository...
Executing npm install...
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN my-cdk-proj@0.1.0 No repository field.
npm WARN my-cdk-proj@0.1.0 No license field.

# Welcome to your CDK TypeScript project!

This is a blank project for TypeScript development with CDK.

The `cdk.json` file tells the CDK Toolkit how to execute your app.

## Useful commands

 * `npm run build`   compile typescript to js
 * `npm run watch`   watch for changes and compile
 * `npm run test`    perform the jest unit tests
 * `cdk deploy`      deploy this stack to your default AWS account/region
 * `cdk diff`        compare deployed stack with current state
 * `cdk synth`       emits the synthesized CloudFormation template

yarnを使うなら次のコマンドを実行

$ yarn
$ rm package-lock.json

この時点で次のコマンドを実行して、古くなっているライブラリはアップグレードしておく。

$ yarn outdated
$ yarn upgrade

アップグレードしたら一旦、コミットしておく。

ESLint の設定

サクッと、モジュールを追加して eslint --init を実行する。
色々質問される。

$ yarn add -D eslint
$ eslint --init
? How would you like to use ESLint? 
  To check syntax only 
  To check syntax and find problems 
❯ To check syntax, find problems, and enforce code style
? What type of modules does your project use? (Use arrow keys)
❯ JavaScript modules (import/export) 
  CommonJS (require/exports) 
  None of these 
? Which framework does your project use? 
  React 
  Vue.js 
❯ None of these
? Does your project use TypeScript? (y/N) y
? Where does your code run? 
 ◯ Browser
❯◉ Node
? How would you like to define a style for your project? (Use arrow keys)
❯ Use a popular style guide 
  Answer questions about your style 
  Inspect your JavaScript file(s) 
? Which style guide do you want to follow? (Use arrow keys)
❯ Airbnb: https://github.com/airbnb/javascript 
  Standard: https://github.com/standard/standard 
  Google: https://github.com/google/eslint-config-google 
? What format do you want your config file to be in? 
  JavaScript 
❯ YAML 
  JSON 
Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.1.0 eslint-plugin-import@^2.18.2 @typescript-eslint/parser@latest
? Would you like to install them now with npm? (Y/n) y
Installing @typescript-eslint/eslint-plugin@latest, eslint-config-airbnb-base@latest, eslint@^5.16.0 || ^6.1.0, eslint-plugin-import@^2.18.2, @typescript-eslint/parser@latest

+ eslint-plugin-import@2.20.1
+ eslint@6.8.0
+ eslint-config-airbnb-base@14.0.0
+ @typescript-eslint/parser@2.19.0
+ @typescript-eslint/eslint-plugin@2.19.0
added 100 packages from 59 contributors, removed 48 packages, updated 624 packages and audited 1204909 packages in 50.603s
found 0 vulnerabilities

Successfully created .eslintrc.yml file in /Users/morishita.hiromitsu/Develop/iko-yo/cypress-e2e-test-ci

最後にnpmを使ってインストールしてくれるので、yarn を使っている場合には、次を実行する。

$ yarn
$ rm package-lock.json

ここで最後の質問? Would you like to install them now with npm? (Y/n) に No と答えると、package.json も更新されないまま終わってしまう。二度手間感はあるが、一旦 ｎｐｍ でインストールして、package.json を更新したほうが手間は少ないと思う。

で、終わったら一旦コミットしておく。

追加モジュールのインストール

yarn add -D eslint-import-resolver-typescript eslint-plugin-jest

.eslint.yaml の編集

とりあえずこれくらい設定しておく。後は必要に応じて足していく。

env:
  es6: true
  node: true
  jest/globals: true
extends:
  - airbnb-base
  - plugin:import/errors
  - plugin:import/warnings
  - plugin:import/typescript
globals:
  Atomics: readonly
  SharedArrayBuffer: readonly
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaVersion: 2018
  sourceType: module
plugins:
  - '@typescript-eslint'
  - jest
  - import
ignorePatterns:
  - '*.js'
  - '*.d.ts'
rules:
  "@typescript-eslint/no-unused-vars": error
  "@typescript-eslint/no-unused-expressions": error
  import/extensions: [error, ignorePackages, { "ts": "never", "js": "never" }]
  import/no-unresolved: error
  import/prefer-default-export: off
  no-new: off
  no-unused-vars: off
  no-useless-constructor: off
  no-unused-expressions: off

ここまで設定したら、次のコマンドで lint エラーを修正しておく。

$ eslint . --ext .ts --fix

npm script の追加

package.json の scripts に次を足しておく

{
// 〜略〜
  "scripts": {
    // 〜略〜
    "eslint": "./node_modules/.bin/eslint . --ext .ts",
    "clean": "rm -rf ./{bin,lib,test}/{**,}/{*.d.ts,*.js}",
    // 〜略〜
  },
// 〜略〜
}

.editorconfig の追加

こんな感じで。

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

# The JSON files contain newlines inconsistently
[*.json]
insert_final_newline = ignore

[*.md]
trim_trailing_whitespace = false

.envrc の作成

AWSのクレデンシャルなどリポジトリに入れられないものを環境変数で設定できるようにしておく。
最初にやっておく。
コードにとりあえずと思って書いてしまうと、必ずコミットしてプッシュすると思え！