53ningen.com

IAM 認証付きの AppSync GraphQL API を CLI から叩く

AppSync GraphQL API をテストする際には API キーを用いるのが便利ですが、本番運用の際に API キーを用いるケースはそう多くなく一般には AWS_IAM をデフォルトの認証モードとすることが多いかと思います。

そうすると開発環境の AppSync GraphQL API も必然的に AWS_IAM をデフォルトの認証モードとしたくなります。

その状況下で手元環境から CLI 経由で手軽に API を叩きたい場合、毎回コマンドの組み立て方を忘れるのでメモ。

結論としては awscurl を用いて以下のようにリクエストすれば OK。例に漏れず region と service の指定を忘れずに。

$ ENDPOINT_URL=...
$ awscurl -X POST \
  -d '{ "query": "query MyQuery { listAppSyncTests { items { title } } }" }' \
  --profile <PROFILE> \
  --region ap-northeast-1 \
  --...

2022年の現場

参考:

• 2020 年の現場
• 2021 年の現場

1. ⬅️ 青山吉能
2. ⬅️ おもしろそうな地方遠征イベント
3. ⬅️ Luce Twinkle Wink☆
4. ⬅️ 安野希世乃/石原夏織（ライブ）

控え

• Mia REGINA

今年もよろしくお願いいたします ...

Health Planet API で遊ぶ

タニタの体重計と連携したデータは Health Planet API から取得できます。この記事ではドキュメントを見ながら Health Planet API を叩いて体重と体脂肪率のデータを取得する流れをみていきます。

API の仕様書はこちら: Health Planet API 仕様書 Ver1.0.1

API を叩くまでの準備

アクセストークンの取得

ドキュメントによると以下のとおり OAuth 2.0 に準じているそうなのでアクセストークンを取得していきます

当 API は OAuth 2.0 に準じて作成されております。 各 API において SSL 通信が必須条件となります。

流れは以下のとおり

1. ウェブブラウザ経由で GET /oauth/auth し認可する、リクエストパラメータに code が付与された状態でリダイレクトされる
2. リダイレクトのリクエストを受け取ったウェブサーバーは code を用いて POST /oatuh/toke...

WordPress から Next.js への移行

• たしか 2012 年ごろから 53ningen.com の裏側として WordPress が動いていました
  • 当初はさくら VPS 上に MySQL, Nginx, WordPress などのほかいろんなものを相乗りにさせていた（学生時代なのでやんちゃは許される）
  • その後 AWS 上の EC2 に MySQL, WordPress を相乗りにする形を経て、ALB + EC2 + RDS (+ S3 + CloudFront) の構成に落ち着きました
  • コンテナ移行しようと思ってましたが WordPress で頑張ることにモチベーションをあまり見いだせなくなっていました
• そんなこんなの経緯があり、このたび WordPress を停止し Next.js の静的サイト生成（SSG）を用いる形に変更しました
• この記事では移行の流れについて簡単にメモしておきます（半分自分向け）

😢 そもそもなぜ WordPress を使いつづけていたのか

• 手元で長期間にわたり運用しつづける LAMP スタック的なアプリケーション（実際には nginx, Maria...

メモ: React JS Crash Course 2021 が良い件について

React 入門教材として React JS Crash Course 2021 - YouTube がかなりよさそうなのでメモしておく

だいたいざっくりと以下のような内容が 2 時間くらいの尺にまとまっている

• React の概要
• React を利用した Todo アプリの制作
  • State, Effect の Hooks の利用
  • 外部 API の利用

これ見れば React の入門書はいらなそうなぐらい情報がきちんと圧縮されていてわかりやすいものだった ...

TypeScript + CDK で理解する AppSync: はじめの一歩

この記事は TypeScript の CDK で単純な Hello, World! を返却する AppSync の GraphQL API を作成することを通して AppSync や GraphQL API に関する基本的な内容を段階を踏んで理解できるように構成されたものです。

あわせて作成した GraphQL を curl、Node.js アプリケーション、React アプリケーションから呼び出す方法についても確認していきます。

これらのステップを踏むことにより、さらに複雑で実践的な GraphQL や AppSync に関する内容を掴むための足掛かりとなるかと思います。

なお、本記事中の各種コードは GitHub にて公開しています。

$ git clone git@github.com:53ningen/CDK-AppSync.git

1. Hello, World!

まずは GraphQL クエリを投げると、Hello, World! が帰ってくる画期的なシス...

Ajv の JTDSchemaType で複雑な JSON オブジェクトをバリデーションする

Ajv の JTDSchemaType で複雑な JSON オブジェクトをバリデーションする際の記述方法がわからなくて 30 分くらい溶けたのでメモっておきます。

配列

export interface AppParameters {
    items: string[]
}

const AppParametersSchema: JTDSchemaType<AppParameters> = {
    properties: {
        items: { elements: { type: 'string' } },
    },
    optionalProperties: {
    },
    additionalProperties: false
}

マップ

export interface AppParameters {
    map: { id: string }
}

const AppParametersSchema: JTDSchemaType<AppParameters> = {
    properti...

Lambda 関数上で io-ts を利用すると例外発生時にタイムアウトする

※　自分用メモです

• 概要: Node.js 14 ランタイムの Lambda 関数でデプロイパッケージに io-ts が含まれていると、例外発生時に即時関数実行が停止せず、タイムアウトまで待ち時間が発生する

通常、以下のようなコードで簡単に例外を発生させ、関数実行を停止させられる

import 'source-map-support/register'

export async function handler(event: object, _: object): Promise<object> {
 throw Error()
}

ところが、以下のように io-ts を import しただけで例外発生時にタイムアウトまで待ち時間が発生してしまう

import * as t from 'io-ts'
import 'source-map-support/register'

export async function handler(event: object, _: object): Promise<object> {
 throw Erro...

SAM CLI + CDK を試す

• 基本的に このドキュメント に書いてあることを試しただけの記録
• ドキュメントは Python だが、手元では Lambda Runtime: Node.js14.X, CDK: TypeScript で試した

aws-sam-cli-beta-cdk の導入

brew install aws-sam-cli-beta-cdk

Project の作成

以下のようにプロジェクトの作成が可能

sam-beta-cdk init --project-type CDK --package-type Zip --runtime nodejs14.x --dependency-manager npm --app-template hello-world --cdk-language typescript --nam...

GitLab での CI/CD 入門

GitLab の CI/CD を学んだ記録

• see: Get started with GitLab CI/CD | GitLab
• see: Keyword reference for the .gitlab-ci.yml file | GitLab

Hello, World!

1. Repository のルートに .gitlab-ci.yml を作成
2. ジョブの定義を行うと Hello, World! できる

stages:
  - dev

hello-job1:
  stage: dev
  script:
    - echo "Hello, $GITLAB_USER_LOGIN!"
    - echo "This is $CI_COMMIT_BRANCH branch."
    - sleep 5

hello-job2:
  stage...