kyohei's blog

profile picture
Written by Kyohei Tsukuda who lives and works in Tokyo 🇯🇵 , building useful things 🔧.
email / facebook / X / GitHub

Blog

Next.js で Markdownから静的ページを生成する

July 27, 2021 - 1658 words - 9 mins
Next.js で UI をそんなにこだわらない静的ページ(例えばヘルプページやプライバシーポリシーなど)やブログのような記事を開発者以外が編集するような場合、基本的には React で書くよりマークダウンを使って記述し、それを表示した方が早いことがあります。 React で作られたメインのコンテンツとは別にマークダウンをベースにした静的ページを Next.js 上につくりたい場合以下のやり方で実… read more

Koaあれこれ

July 23, 2021 - 501 words - 3 mins
body parser https://github.com/koajs/bodyparser json, form , text , xml での body をパースするのに必要。 import Koa from 'koa'; import bodyParser from 'koa-bodyparser'; const app = new Koa(); app.… read more

AWS AmplifyでCLIからbasic認証の設定を解除する

June 28, 2021 - 394 words - 2 mins
また Amplify ネタ。 AWS Amplify で next.js(SSR)を利用した frontend の場合、現状 basic 認証が利用できません。 https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/server-side-rendering-amplify.html#access-control-unsupporte… read more

AWS Amplify + Cognito + Next.jsで認証付きページ作る

June 14, 2021 - 2373 words - 12 mins
AWS Amplify + Cognito + Next.js で認証付きページ(ログインが必要なページ)を作る方法です。 モチベ やりたいこと とあるプロダクトの管理画面を作りたい 管理画面はプロダクトサイトとは別の場所(ドメイン)で作成し、プロダクトサイトと切り離す。 管理ユーザ用のテーブルは作りたくない 認証機能を 0 から作るのは面倒なので、Cognito の認証機能を利用したい。(UI… read more

foreverで動作しているNode.jsのアプリケーションログをCloudWatchに送る

June 02, 2021 - 973 words - 5 mins
forever を利用して daemon で起動しているアプリケーションのログを CloudWatch に流す方法です。 forever のログファイル forever はアプリケーション起動時にデフォルトで ~/.forever 以下に a93c.log のようなランダムなファイル名のログファイルを出力します。 今回は CloudWatch Agent で取得するためファイル名を固定します。 f… read more

Code Deployを使ったnode.jsアプリケーションデプロイ方法

May 20, 2021 - 711 words - 4 mins
node.js のアプリケーションを EC2 へ自動デプロイする方法です EC2 側の設定 EC2 に CodeDeploy-Agent をインストール https://docs.aws.amazon.com/codedeploy/latest/userguide/codedeploy-agent-operations-install-linux.html こちらを参考に CodeDeploy-A… read more

TypeScriptで配列型の要素がオブジェクトの場合にその型を取得する方法

April 30, 2021 - 212 words - 2 mins
TypeScript でライブラリ内や自動的に生成された型定義で、配列の要素がオブジェクトであるときに、その要素が型として定義されていない場合があります。この型を呼出したり型として再定義する方法です。 export type Animals = { name: string; size: number }[]; // または exportされていない場合 type Animals = { na… read more

Stripe API with Next.js

April 25, 2021 - 1155 words - 6 mins
Stripe の API を Next.js で動かしてみた備忘録です。 準備 Stripe の Business アカウントを取得。 https://dashboard.stripe.com/register Next.js をインストールし、Stripe のライブラリをインストールする。 # node.js用ライブラリ npm install --save stripe # react及びフロ… read more

最速でNext.jsのローカル環境を作成する

March 23, 2021 - 561 words - 3 mins
create-next-app とかよりもっとプレーンな Next.js の環境をサクッと作りたい場合。 ディレクトリを作成して、、 mkdir next-app && cd next-app # もしくは take next-app 以下のコマンドを実行 npm init -y npm install next react react-dom npm install types… read more

Zora Coreをローカルで動かす

February 23, 2021 - 171 words - 1 mins
zora core をローカルのチェーン(Ganashe)で動かす方法です。 clone, install git clone git@github.com:ourzora/core.git cd core yarn env ファイルの作成 ルートディレクトリに.env.localを作成。RPC_ENDPOINT と PRIVATE_KEY を設定する。 RPC_ENDPOINT は Ganac… read more