「TypeScript」カテゴリーアーカイブ

MacでTypeScripのAWS CDKを試す

本記事では、AWSのGetting Started with the AWS CDKのチュートリアルを参考にAWS CDKを使ったTypeScriptを試してみた記録です。

  • AWS CDKのインストール
  • TypeScriptテンプレートのダウンロード
  • TypeScriptの作成
    • ライブラリファイルの作成
    • 実行ファイルの作成
  • TypeScriptのコンパイル
  • デプロイ環境の準備
  • AWSリソースのデプロイ

AWS CDKのインストール

以下のコマンドを利用してaws-cdkをグローバルインストールします。cdkコマンドをプロジェクトごとに管理したい場合は、-gオプションを外してローカルインストールする必要があります。

$ npm install -g aws-cdk
$ cdk --version
2.4.0 (build 993f14d)

TypeScriptテンプレートのダウンロード

利用できるTypeScriptのテンプレートは以下の通りで、app、lib、sample-appが選択できます。今回はappを選択します。

Available templates:
* app: Template for a CDK Application
   └─ cdk init app --language=typescript
* lib: Template for a CDK Construct Library
   └─ cdk init lib --language=typescript
* sample-app: Example CDK Application with some constructs
   └─ cdk init sample-app --language=typescript

プロジェクト用のディレクトリを作成し、appテンプレートをダウンロードします。ダウンロードが完了するとTypeScriptのコンパイルに必要なファイルが作成されます。

$ mkdir aws-cdk
$ cd aws-cdk/
$ cdk init app --language typescript
~~省略~~
✅ All done!

TypeScriptの作成

ライブラリファイルの作成

lib配下には、TypeScriptの雛形ファイルが作成されます。チュートリアルのS3サンプルコードを利用して以下のように編集します。これは、aws-cdk-test-bucketという名前のS3バケットを作成するだけのコードです。なお、クラス名であるTestS3StackはCloudFormationのスタック名になります。

import { Stack, StackProps } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { aws_s3 as s3 } from 'aws-cdk-lib';

export class TestS3Stack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);
    const bucket = new s3.Bucket(this, 'CdkTestBucket', {
        bucketName: 'aws-cdk-test-bucket',
        versioned: true,
        websiteRedirect: {hostName: 'aws.amazon.com'}});
  }
}

実行ファイルの作成

bin配下には、lib配下で作成したクラスのインスタンを生成して実行するためのTypeScriptコードがあります。以下のように編集してTestS3Stackを実行するように設定します。

#!/usr/bin/env node
import 'source-map-support/register';
import * as cdk from 'aws-cdk-lib';
import { TestS3Stack } from '../lib/aws-cdk-stack';

const app = new cdk.App();
new TestS3Stack(app, 'TestS3Stack', {});

TypeScriptのコンパイル

編集したTypeScriptをビルドします。ビルドが完了するとJavaScriptファイルが生成されます。

$ npm run build

> aws-cdk@0.1.0 build
> tsc

$ cdk ls
TestS3Stack

作成したTypeScriptをCloudFormationの形式に変換したい場合は以下のコマンドを利用します。

$ cdk synth
Resources:
  CdkTestBucket3821C40C:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: aws-cdk-test-bucket
      VersioningConfiguration:
        Status: Enabled
      WebsiteConfiguration:
        RedirectAllRequestsTo:
          HostName: aws.amazon.com
    UpdateReplacePolicy: Retain
    DeletionPolicy: Retain
    Metadata:
      aws:cdk:path: TestS3Stack/CdkTestBucket/Resource
~~省略~~

デプロイ環境の準備

bootstrapコマンドを使用して、cdkを利用してデプロイできる環境を構築します。ここでは、CDKToolkitという名前のCloudFormationスタックが実行されます。

# aws cliの設定をしていない場合はあらかじめ設定しておきます。
$ aws configure
$ cdk bootstrap
~~省略~~
 ✅  Environment aws://[AWSのアカウントID]/[CLIで設定しているリージョン] bootstrapped.

実行が完了するとS3のバケットが作成されます。間違ってこのS3バケットを削除してしまうと、デプロイ時にエラーが発生します。その際は、CloudFormationのStackを削除して再度cdk bootstrapを実行してください。

$ aws s3 ls
2022-01-09 14:38:26 [バケット名]

#上記のバケットを削除してcdk deployを実行すると以下のエラーが発生します。
[100%] fail: No bucket named ‘バケット名’. Is account ‘アカウント名’ bootstrapped?

AWSリソースのデプロイ

deployコマンドを使用してTypeScriptに記述したバケットを作成します。一度CloudFormationの形式に変換された後、TestS3Stackという名前のスタックが作成されて実行されます。

$ cdk deploy

✨  Synthesis time: 8.98s

TestS3Stack: deploying...
[0%] start: Publishing ~~省略~~
[100%] success: Published ~~省略~~
TestS3Stack: creating CloudFormation changeset...

 ✅  TestS3Stack

✨  Deployment time: 50.63s

Stack ARN:
~~省略~~

✨  Total time: 59.6s

AWS上で確認すると、以下の通りバケットが作成されていました。

$ aws s3 ls | grep aws-cdk-test-bucket
2022-01-09 15:58:02 aws-cdk-test-bucket

以上です。

MacでTypeScriptをインストールしてコンパイルを試す

  • TypeScriptとは
  • Node.jsのインストール
  • TypeScriptのインストール
  • TypeScriptでコンパイルを試す

TypeScriptとは

TypeScriptを一言で説明すると、独自の構文からJavaScriptにコンパイルするためのツールです。JavaScriptとの大きな違いは型定義が必要な点です。

https://www.typescriptlang.org

JavaScriptは型を定義しないで開発できますが、開発する上で多くの弊害があります。例えば、ソースコードを読む時に何の変数かが一目で分かりませんし、その変数に間違った型を定義するとプログラムが実行されるまで気付くことができません。

TypeScriptでは独自の構文からJavaScriptを生成することで、それらの欠点を補います。JavaScriptの可読性を向上したり、定義を強制したり、型エラーを実行前に検知したりすることで開発生産性を向上します。TypeScriptはJavaScriptのコードを綺麗に保つ上で今後重宝されていくと思います。

Node.jsのインストール

以下のコマンドでNode.jsの推奨バージョンをインストールします。推奨バージョンは、こちらから確認できます。

$ brew install nodebrew
# nodebrew installで"Failed to create the file"のエラーが出た場合は以下のコマンドを実行
$ mkdir -p .nodebrew/src
# 推奨バージョンのインストール
$ nodebrew install-binary v16.13.1
Fetching: https://nodejs.org/dist/v16.13.1/node-v16.13.1-darwin-x64.tar.gz
########################################################################################################################## 100.0%
Installed successfully

インストールが完了したら、以下のコマンドでパスを通します。毎回パスを通すのが面倒な方は~/.bash_profileに登録しておくと便利です。

$ nodebrew use v16.13.1
use v16.13.1
$ export PATH=$HOME/.nodebrew/current/bin:$PATH
$ node -v
v16.13.1

TypeScriptのインストール

TypeScriptをプロジェクトで管理するため、ディレクトリを作成して以下のコマンドでローカルインストールを実行します。

$ mkdir getting-start
$ cd getting-start/
$ npm install --save-dev typescript tslint @types/node

TypeScriptでコンパイルを試す

TypeScriptでコンパイルし、型定義のエラーを出力するところまで実施します。

String型で定義した変数に文字列を代入するだけのindex.tsを作成します。なお、TypeScriptの拡張子はtsです。

let message: string
message = "Hello World"

以下のコマンドでコンパイルします。コンパイルするときには、コンパイルオプションを指定する”tsconfig.json”が必要です。今回は何も指定せずにコンパイルするので、中身を空にしています。

$ touch tsconfig.json
$ ./node_modules/.bin/tsc

index.tsファイルと同じディレクトリにindex.jsファイルが生成されています。中身を確認すると、JavaScriptに変換されていることがわかります。

$ cat index.js
var message;
message = "Hello World";

JavaScriptではmessage変数の型が定義されていませんので、messageに数値を代入してもJavaScriptでは問題ありません。しかしTypeScriptでは型を定義しており、数値を代入することができません。この挙動を確認してみます。

index.tsファイルを以下のように編集します。

let message: string
message = 1

再度コンパイルすると、messageに異なる型を代入しているのでエラーが出力されます。

$ ./node_modules/.bin/tsc
index.ts:2:1 - error TS2322: Type 'number' is not assignable to type 'string'.

2 message = 1
  ~~~~~~~

Found 1 error.

本記事では以上とします。