Zenn
Open2

勉強ログ

mizchimizchi

プロジェクトの雛形をつくる

next.js application

yarn init -y
yarn add react react-dom next
yarn add --dev typescript @types/react @types/node

src/pages/index.tsx で仮ページを作る

export default () => {
  return <div>Hello</div>
}

vercel

vercel.json をいじってリージョンを日本にする

{
  "regions": ["hnd1"]
  }
}

next.config.json でサーバーレスモードにする

module.exports = {
  target: "serverless",
};
mizchimizchi

GCP の設定

  • プロジェクトを作成
  • gcloud をインストール
  • IAM でサービスアカウントを作成。json で認証キーの発行 https://console.cloud.google.com/iam-admin
  • IAM から Pub/Sub Admin の Role を付与
  • GOOGLE_APPLICATION_CREDENTIALS="<your-key-path>" を設定

API Route の設定

GCP Credentials & Next.js - DEV を参考に、GCP の IAM を設定する。

src/pages/api/track.ts

import { NextApiRequest, NextApiResponse } from "next";
import { PubSub } from "@google-cloud/pubsub";

const pubsub = new PubSub({
  projectId: "<your-project-id>",
  credentials: {...},
});
const topic = pubsub.topic("analyzer");

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const messageObject = { data: { ...req.body } };
  const messageBuffer = Buffer.from(JSON.stringify(messageObject), "utf8");
  try {
    await topic.publish(messageBuffer);
    res.statusCode = 200;
    res.setHeader("Content-Type", "application/json");
    res.end(JSON.stringify({ ok: true }));
  } catch (err) {
    res.statusCode = 400;
    res.setHeader("Content-Type", "application/json");
    res.end(JSON.stringify({ ok: false, message: err.message }));
  }
}