AWS CDK に触れてみた。AWS CDK とは AWS Cloud Development Kit の略称で、日本語にすると AWS クラウド開発キットのこと。 AWS CloudFormation の設定は通常は JSON や YAML 形式で設定するが、とてもじゃないが人間が書ける代物ではない。



<pre class="wp-block-code"><code lang="yaml" class="language-yaml">AWSTemplateFormatVersion: "2010-09-09"
Description: A sample template
Resources:
 MyEC2Instance: #An inline comment
 Type: "AWS::EC2::Instance"
 Properties: 
 ImageId: "ami-0ff8a91507f77f867" #Another comment -- This is a Linux AMI
 InstanceType: t2.micro
 KeyName: testkey
 BlockDeviceMappings:</code></pre>



もはや英語だ。CDK はこのファイルを生成するのに手慣れたプログラミング言語を利用できるよ、というツールである（たぶん）。 自分が手慣れた言語である、TypeScript でも書くことができた。プログラミングかのように設定が書けるってことだと認識している。



試してみた CDK コマンドたち



<pre class="wp-block-code"><code class=""># cdkプロジェクトの作成
cdk init app --language typescript

# 新しい環境をデプロイする際に、最初の一回に必要なコマンド。S3バケットなど、AWS CDKが利用するキットをCloudFormationスタックとしてAWSにデプロイする
cdk bootstrap

# aws cdkのコードを合成してCloudFormationテンプレートを表示する。コードが正しいかの確認がMacローカルで可能
cdk synth

# 書いたコードをAWSにデプロイする
cdk deploy
cdk deploy --all
cdk deploy FirstCdkStack</code></pre>



こんなかんじのスタックを書いてみた。



<pre title="first-cdk-stack.ts" class="wp-block-code"><code lang="typescript" class="language-typescript">import { CfnOutput, Duration, Stack, StackProps, CfnParameter } from 'aws-cdk-lib';
import { Construct } from 'constructs';
// import * as sqs from 'aws-cdk-lib/aws-sqs';
import { Bucket } from 'aws-cdk-lib/aws-s3'

export class FirstCdkStack extends Stack {
 constructor(scope: Construct, id: string, props?: StackProps) {
 super(scope, id, props);

 const duration = new CfnParameter(this, 'duration', {
 type: 'Number',
 default: 6,
 minValue: 1,
 maxValue: 10
 })


 const myBucket = new Bucket(this, 'someBucket', {
 lifecycleRules: [{
 expiration: Duration.days(duration.valueAsNumber)
 }]
 })

 new CfnOutput(this, 'mybucket', {
 value: myBucket.bucketName
 })
 }
}</code></pre>



おお！



<figure class="wp-block-image size-full"><img src="https://wp.katsushi-ougi.com/wp-content/uploads/2022/07/image.png" alt="" class="wp-image-3403"/></figure>



ちゃんとできてる。AWS凄いな。これが Infrastructure as Code ってやつか。

AWS CDK に触れてみるtest

IE11 が対象外になったことで JavaScript は webpack などのモジュールバンドラ無しで書いてもブラウザで動作するようになりました。ウェブアプリなど React を利用するシーンでは、まだまだモジュールバンドラを利用したほうがいいと思いますが（TypeScriptで書きたいですよね）、ウェブサイトではモジュールバンドラ無しで十分だと思います。



Rails7 でも Webpacker が剥がされて、Node.js レスな環境を提供しています。



<h2>JavaScript モジュール</h2>



具体的には <a rel="noreferrer noopener" href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules" data-type="URL" data-id="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules" target="_blank">JavaScript モジュール</a>を利用します。ブラウザのサポート状況を確認しても、IE以外は問題なさそうです。以下簡単なサンプルです。



<pre title="utils/EventEmitter.js" class="wp-block-code"><code lang="javascript" class="language-javascript">class EventEmitter {
 ...
}

export default EventEmitter;</code></pre>



main.js で、EventEmitter クラスを import して使います。拡張子は必須です。拡張子が不要なのは webpack の設定でしたよね、そういえば。



<pre title="main.js" class="wp-block-code"><code lang="javascript" class="language-javascript">import EventEmitter from './libs/EventEmitter.js';

const ev = new EventEmitter();

console.log(ev);</code></pre>



HTML側に設定を書きます。



<pre class="wp-block-code"><code class="">&lt;script type="module" src="/assets/js/libs/utils/EventEmitter.js">&lt;/script>
&lt;script type="module" src="/assets/js/main.js">&lt;/script></code></pre>



type 属性に module をつければ OK です。main.js にも付けましょう。これだけで OK 。Node.js レスで JavaScript を記述することができます。



<h2>ライブラリの import</h2>



ではライブラリの扱いはどうしましょう？グローバルで読み込むのもアリですが、import で読み込むことも可能です。import maps という web標準の機能を利用します。が、しかし、この機能はまだ使えるブラウザ環境が少ないです。



<a href="https://caniuse.com/import-maps">Import maps | Can I use... Support tables for HTML5, CSS3, etc</a>



大きなところでは Safari がダメですね。意外に Edge はイケる。これは Polyfill を利用します。



<a href="https://github.com/guybedford/es-module-shims">guybedford/es-module-shims: Shims for new ES modules features on top of the basic modules support in browsers</a>



<pre class="wp-block-code"><code lang="javascript" class="language-javascript">&lt;script async src="https://ga.jspm.io/npm:es-module-shims@1.5.8/dist/es-module-shims.js">&lt;/script>

&lt;!-- https://generator.jspm.io/#U2NhYGBkDM0rySzJSU1hKEpNTC5xMLTQM9Az0C1K1jMAAKFS5w0gAA -->
&lt;script type="importmap">
{
 "imports": {
 "react": "https://ga.jspm.io/npm:react@18.0.0-rc.0/index.js"
 },
 "scopes": {
 "https://ga.jspm.io/npm:react@18.0.0-rc.0/": {
 "object-assign": "https://ga.jspm.io/npm:object-assign@4.1.1/index.js"
 }
 }
}
&lt;/script>

&lt;script type="module">
 import react from 'react';
 console.log(react);
&lt;/script></code></pre>



ブラウザサポート状況はこんなかんじ。



<figure class="wp-block-image size-full"><img src="https://wp.katsushi-ougi.com/wp-content/uploads/2022/06/image-3.png" alt="" class="wp-image-3375"/></figure>



普通に使う程度なら問題無さそう。でもグローバルとして扱えばよいかなと個人的には思います。



<h2>ファイルを大量にロードするが問題ないのか？</h2>



<pre class="wp-block-code"><code lang="markup" class="language-markup">&lt;script type="module" src="/assets/js/libs/utils/EventEmitter.js">&lt;/script>
&lt;script type="module" src="...">&lt;/script>
&lt;script type="module" src="...">&lt;/script>
...</code></pre>



こういう記述が続くので、ロードするファイル数がかなり多くなります。gulp などで、JavaScript ファイルを一個にまとめて通信量を減らした経験がある人には眉をひそめる記述でしょう。



が、それは HTTP/1.1 時代のお話。現代は HTTP/2 の時代です。HTTP/2 はストリームという概念を導入したことで、並列で通信が可能になりました。HTTP/1.1 のように、Aのロード終了後にBをロード...というシリアルな処理にはならない模様です。画像もスプライト画像にして通信量を減らす、という時代もありましたがそれも過去の話になりました。



<h2>デメリット</h2>



HTML に module を記述するのが結構面倒です。大量にモジュールを扱うウェブアプリなどには不向きでしょう。ウェブサイト向きかなと思いました。

AWS CLI を使ってみる