53ningen.com

@gomi_ningen's Website

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...
Read More

Next.js のチュートリアルを進めた記録

チュートリアルを進める

Hello, World!

チュートリアル にしたがって脳死状態でコマンドを打ち込んでいきます

mkdir yoppibirthday2020
cd yoppibirthday2020
npm init -y
npm install --save react react-dom next
mkdir pages

package.json の scripts をちょっといじって以下のようにしてあげる

{
  "name": "yoppibirthday2020",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": []...
Read More

Gatsby.js ことはじめ

  • 5/18 から Gatsby.js を書き始めた
  • つまづいて、調べて解決した点をメモっていく
  • 言語学習の過程が記録として残る
  • 間違っている可能性が大いにあるので、この記事は自分向けです

導入

Quick Start | GatsbyJS を見ながら進めれば難なくできます

npm install -g gatsby-cli
gatsby new gatsby-site
cd gatsby-site

# Start development server.
gatsby develop

# Create a production build.
gatsby build

# Serve the production build locally.
gatsby serve

GitHub pages にデプロイ

[How Gatsby Works with GitHub Pages | GatsbyJS](https://www.gatsbyjs.o...

Read More

twipla の参加者名とtwitter ID のリストをエクセルファイルに落とし込む

twipla で立てたイベントの参加者名と twitter ID を CSV 形式(エクセルでひらけます)で抽出するゴミみたいなワンライナースクリプトを雑に書いたのでメモっておく。

品質はゴミだけど、タイムラインにフラスタ企画立ててる人結構いるので必要な方はどうぞ。

使い方

(1) Chrome で twipla のイベントページを開く (2) Cmd+Option+J で Chrome Developer Tool のコンソールを開く (3) 次のコードを実行

console.log(
  j$('.float_left.member_list.round_border li')
    .toArray()
    .map((e) =>
      [
        e.textContent.trim(),
        e.lastChild['href'].slice(24, e.lastChild['href'].length),
      ].join(',')
    )
    .join('\n')
)

<a href="...

Read More

CloudWatch Logs サブスクリプションフィルタにより Lambda に流れ込むイベントのデータをデコードする

CloudWatch Logs サブスクリプションフィルタの使用 に書かれているように CloudWatch Logs のサブスクリプションフィルタにより Lambda 関数が起動するときのペイロードの Data は Base64 でエンコード + gzip 圧縮されている。

Lambda レコードの Data 属性は、Base64 でエンコードされており、gzip 形式で圧縮されています。Lambda が受け取る実際のペイロードは、{ "awslogs": {"data": "BASE64ENCODED_GZIP_COMPRESSED_DATA"} } の形式になります。raw データは、コマンドラインから次の UNIX コマンドを使用して調べることができます。

これを解く簡単なコードをよく使うのでメモとして残しておく。

const zli...
Read More

Lambda のイベントソースとして SQS を設定する

2018/06/28 の記事 AWS Lambda Adds Amazon Simple Queue Service to Supported Event Sources | AWS News Blog にて AWS Lambda が Amazon SQS をイベントソースとしてサポートしたという話を見かけたので試してみました。

SQS にジョブを突っ込んでラムダをワーカーとして動かすというのはわりとありがちかなと思っていたんですが、いままでは SQS をポーリングして Lambda を Invoke する役割の子を自前で実装しなければならず、やや面倒ではありましたが、これでよりお手軽になりました。早速試してみましょう。

以下、特に明記しない限り東京リージョンでの検証になります。

SQS キューの作成

ジョブを突っ込むための SQS キューをいつもどおり...

Read More

27円/月で運用できるAWS Lambda を用いたウェブサイトの外形監視

ウェブサイトの外形監視とは?

ウェブサイトがユーザーからきちんと閲覧できるかどうかを監視するという至極単純なものが「ウェブサイトの外形監視」です。外形というワードが入っているとおり、ユーザー側から名前解決を正常に行うことができ、宛先にきちんとリクエストを行え、妥当な時間内に正常なレスポンスを受け取ることができるかをチェックすることが目的になると思います。

したがって、構築されたサーバーとはネットワーク的にも物理的にも独立した場所から監視を行えると良いのですが、そうすると外形監視サーバーのお守りをしなければならず、個人でちゃんとやろうとすると微妙に面倒ではあります。

AWS Lambda を用いたウェブサイトの外形監視

AWS Lambda は、オンデマンドでコードの断片を実行することができるアプリケーション基盤です。あらかじめサーバーを立てて置かなくても、実行したいコードを配置しておき、実行したいときにサーバーのことなど何も考えずに呼び出すことができます。ウェブサイトの外形監視は、せいぜいリクエストを送ってステータスコードやレスポンスタイムなどを見てあげるだ...

Read More

WebSocket はじめのいっぽ

WebSocket はサーバー/クライアント間での効率的な双方向通信を実現するための仕組みです。チャット・グループウェア・ゲームなどで利用されることが多いです。サーバー側は WebSocket に対応している node.js などを利用します。

WebSocket の動作とクライアント側の実装

WebSocket による通信では、まずサーバーとのコネクションを確立を行います。クライアント側からサーバー側へ HTTP でコネクション確立のリクエストを送り、サーバー側が接続元やプロトコルを確認した後、接続可否のレスポンスを返します。接続が許可された場合、クライアント側は WebSocket によるコネクションを開始します。これをハンドシェイクと呼びます。クライアント側のハンドシェイクは以下の一行で済みます。

//  Insatiate WebSocket Object
var websocket = new WebSocket('ws://hoge.com/foo', 'protocol');

コネクションが確立すると onopen イベントハンドラ、切断さ...

Read More

HTML5のAPIまとめ

HTML5 と JavaScript と組み合わせて利用できる API について概要をまとめてみた。

Drag and Drop API

以前から mouseup,mousedown などのイベントが存在したが、HTML5 では draggable 属性に true と設定するだけで、ほぼ全ての要素がドラッグアンドドロップ可能になる。ドラッグする要素には draggable, ondragstart, id 属性の設定が必須。またドロップする要素には ondragenter, ondragleave, ondragover, ondrop 属性を設定できる。

ドラッグアンドドロップでのデータ受け渡しには DataTransfer を用いる。具体的な実装は以下のようにやる。

function onDrop(e) {
  var text = e.dataTransfer.getData('text/plain')
  //  以下略...
}

File API

この API を用いることにより、ファイルの読み書きをアドオンなしで行うことが出...

Read More

Copyright © 53ningen.com