53ningen.com

RabbitMQ の基本的な操作

RabbitMQ の基本的な構成要素

RabbitMQ においてメッセージは主に以下のような流れを経る

AMQP 0-9-1 Model in Brief The AMQP 0-9-1 Model has the following view of the world: messages are published to exchanges, which are often compared to post offices or mailboxes. Exchanges then distribute message copies to queues using rules called bindings. Then the broker either deliver messages to consumers subscribed to queues, or consumers fetch/pull...

AppSync GraphQL API を用いて手軽に Subscription を試す

AppSync GraphQL API への Mutation, Subscription を通して簡単な メッセージの Pub/Sub を試す手順をメモしておきます。GraphQL API の Subscription をお手軽に試してみたい方や、テスト目的のモック Mutation, Subscription を手軽に作りたいときに便利な手順かと思います。

スキーマの作成

AppSync GraphQL API を作成したのち、まずはスキーマの作成を行います。今回はできるだけ細かいことを省いて Mutation, Subscription 実験用の GraphQL API を作成したいため以下のように簡単なものとなります。

type Message {
  messageId: String!
  message: String!
}

type Mutation {
  sendMessage(message: String!): Message
}

type Subscription {
  addedMessage: Message @aw...

ActiveMQ の基本的な操作

ActiveMQ の導入

• サーバーに ActiveMQ を導入するほか、Amazon MQ のマネージドな ActiveMQ ブローカーを利用することも可能
• セルフホスティングする際にはドキュメントに沿って作業を行う: https://activemq.apache.org/getting-started

Amazon Linux への ActiveMQ の導入

$ sudo yum update -y
$ sudo amazon-linux-extras install java-openjdk11 -y
$ java --version
openjdk 11.0.13 2021-10-19 LTS
OpenJDK Runtime Environment 18.9 (build 11.0.13+8-LTS)
OpenJDK 64-Bit Server VM 18.9 (build 11.0.13+8-LTS, mixed mode, sharing)
$
$ wget https://apache.mirror.iphh.net/activemq...

react-markdown で数式を表示させる

react-markdown を使って Markdown 形式の記事を SSG する際に数式もいい感じに表示できるようにした。

といっても、react-markdown の README.md に書かれているとおりの手順を進めるだけ（この記事は半分数式のテスト表示のため...）。

導入手順

以下の 2 ステップ

1. yarn add remark-math rehype-katex
2. ReactMarkdown 要素の rehypePlugins に rehypeKatex を追加、remarkPlugins に remarkMath を追加

+ import remarkMath from 'remark-math'
+ import rehypeKatex from 'rehype-katex'
+ import 'katex/dist/katex.min.css'
...
   ...

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! が帰ってくる画期的なシス...