「Vercel」の記事 - Crieit

microCMS の X-API-KEY リニューアルに合わせて Vercel の設定と Gatsby のプロジェクトを更新する

2021-11-05T21:44:25+09:00

メール通知で microCMS の X-API-KEY がリニューアルされたという通知を受け取って対応することにしました。

APIキーをX-MICROCMS-API-KEYへとリニューアルしました。 | microCMSブログ

従来のX-API-KEY, X-WRITE-API-KEY, X-DRAFT-KEYは統合され、X-MICROCMS-API-KEYに変更となります。

APIキーをX-MICROCMS-API-KEYへとリニューアルしました。 | microCMSブログ

とのことなので、これに対応することにします。

microCMS

まずは microCMS 側の作業。新しいAPIキーを発行し直します。

「APIキー管理」のAPIキーの一覧で「旧X-API-KEY」があることを確認。

選択して詳細画面から「削除」を選択。

続いて新しいAPIキーを発行し直します。

X-MICROCMS-API-KEY を発行します。今回はAPI経由では参照しかしないので GET のみの権限とします。

発行されたAPIキーをコピーして控えます。

これで microCMS 側の作業は完了です。

Vercel

続いて Vercel にログインします。

プロジェクトの「Settings」から「Enviroment Variables」に進みます。

API_KEYの値を先ほど控えた値に変更します。

これでOKかと思ったのですが……。

00:03:22.489    error microCMS API ERROR:
00:03:22.489    statusCode: 401
00:03:22.489    message: X-MICROCMS-API-KEY header is invalid.
00:03:22.492    not finished source and transform nodes - 1.046s
00:03:23.631    Error: Command "npm run build" exited with 1

ビルドログを見ると 401エラーでコケていますね。認証に失敗しているようです。

microCMSの新しいX-MICROCMS-API-KEYに対応する | Vanilla note

検索すると、 Gatsby の microCMS 連携のパッケージも更新しないといけないとのこと。

Gatsby プロジェクト

そこで該当パッケージのバージョンをアップデートします。

  "dependencies": {
    // 略
    "gatsby-source-microcms": "^1.2.1",
    // 略
  }

gatsby-source-microcms を

  "dependencies": {
    // 略
    "gatsby-source-microcms": "^2.0.0",
    // 略
  }

2.0.0 にアップデート。

これでビルドを走らせ、正常に完了することを確認しました。

参考

Vercel に関しては自分の過去の記事も参考にして辿りつつ……。

Gatsby.js + Vercel + microCMS の JAMStack 環境を構築する – Ewig Leere(Lab2)

Vercel のサイトに独自ドメインのサブドメインを割り当てる

2021-08-29T20:31:13+09:00

Gatsby.js + Vercel + microCMS の JAMStack 環境のサイトの仕上げとして、独自ドメインのサブドメインを割り当てます。

Vercel の設定

Vercel のプロジェクトで「Settings」→「Domains」と進みます。

ここで割り当てたいドメインを入力して「Add」。

いったん Invalid Configuration と怒られますがひとまず保留。

ドメイン管理側サービスの設定

詳細部に書かれている cname.vercel-dns.com を CNAMEレコードとして設定します。

ドメイン管理側のサービスで指示通りの CNAMEレコードを設定します。これで DNS権威サーバの設定が書き変わります。

DNSキャッシュサーバへの設定反映を確認

これで30分くらい待ち、 DNSキャッシュサーバ権威サーバの設定が反映されるのを確かめます。

> nslookup

## 略

> server 8.8.8.8

## 略

> hogehoge.exmaple.jp
サーバー:  dns.google
Address:  8.8.8.8

権限のない回答:
名前:    hogehoge.exmaple.jp
Address:  192.0.2.1

まだですね……。

> hogehoge.exmaple.jp
サーバー:  dns.google
Address:  8.8.8.8

権限のない回答:
名前:    cname.vercel-dns.com
Address:  76.76.21.21
Aliases:  hogehoge.exmaple.jp

お、来ました。

Vercel の設定画面でもクリアになりました。

これで指定したサブドメインにアクセスすると、確かにデフォルトの vercel.app と同じサイトにアクセスできることが確認できました。

割り当て成功です。

ちなみに、今回はドメイン管理側のサービスで *.exmaple.jp IN A 192.0.2.1 という感じのサブドメインのワイルドカード指定の Aレコードが存在していたのでそれが邪魔しないか気がかりでしたが、大丈夫のようです。

Gatsby.js + Vercel + microCMS の JAMStack 環境を構築する

2021-08-29T00:49:34+09:00

microCMS の設定が完了したので、次は microCMS からデータを取得するように Gatsby.js の方に手を入れます。また、 microCMS と Vercel に設定を加えて連携させ、 Gatsby.js + Vercel + microCMS の JAMStack 環境を構築します。

改修

今回はleonids: Gatsby Starter | Gatsbyを使用しているので、その前提で。

テーマが変わったり、 microCMS のスキーマが変われば諸々の調整が必要となります。

パッケージの追加

> yarn add yarn add gatsby-source-microcms

## 略

Done in 231.79s.

> yarn add marked

## 略

Done in 7.30s.

今回は microCMS を利用するので gatsby-source-microcms を追加します。また、本文コンテンツは Markdown で記述しているのですが Gatsby.js の自前の Markdownパーサまで手が届かなかったので安直に marked を使いました。

それから、内部的には dotenv も使用していますが yarn.lock を見たら既に入っていたので追加はしていません。

gatsby-config.js

さて、改修の最初は Gatsby.js の設定から。

module.exports = {

  // 略

  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },

    // 略

    },
      `gatsby-plugin-feed`,
    {

    // 略

  ],

  // 略

}

これを以下のように修正。

const activeEnv = process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV
if(activeEnv === "development") {
  require("dotenv").config({
    path: `.env.${activeEnv}`,
  })
}

module.exports = {

  // 略

  plugins: [
    {
      resolve: 'gatsby-source-microcms',
      options: {
        apiKey: process.env.API_KEY,
        serviceId: process.env.SERVICE_ID,
        apis: [{
          endpoint: process.env.APIS_ENDPOINT,
        }],
      },
    },

    // 略

    {
      resolve: `gatsby-plugin-feed`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                title
                description
                siteUrl
              }
            }
          }
        `,
        feeds: [
          {
            serialize: ({ query: { site, allMicrocmsHogeHogeBlog } }) => {
              return allMicrocmsHogeHogeBlog.edges.map(edge => {
                return Object.assign({}, edge.node, {
                  description: edge.node.keywords,
                  date: edge.node.date,
                  url: site.siteMetadata.siteUrl + edge.node.slug,
                  guid: site.siteMetadata.siteUrl + edge.node.slug,
                  custom_elements: [{ "content:encoded": edge.node.body }],
                })
              })
            },
            query: `
              {
                allMicrocmsHogeHogeBlog(sort: {fields: [date], order: DESC}) {
                  totalCount
                  pageInfo {
                    perPage
                    pageCount
                  }
                  edges {
                    node {
                      body
                      createdAt
                      date
                      id
                      keywords
                      publishedAt
                      revisedAt
                      slug
                      title
                      updatedAt
                    }
                  }
                }
              }
            `,
            output: "/rss.xml",
            title: "HogeHoge Blog's RSS Feed",
          },
        ],
      },
    },

    // 略

  ],

  // 略

}

変更点は以下。

ローカルのファイルをコンテンツのリソース参照先としていたのを microCMS をリソースとするように修正
gatsby develop 時は問題なかったのですが、 gatsby build 時に RSSフィードを生成する gatsby-plugin-feedプラグインが通常の Markdown の構成をデフォルトにしており、 microCMS に置き換えたことでデータスキーマが異なるとエラーになってしまいました (本番ビルド時に気付いた)。
- そこで、 gatsby-plugin-feedプラグインの GraphQL も今回定義した microCMS のスキーマに沿って変更しました。併せて serializeメソッドの中身もスキーマに合わせて調整。
gatsby-source-microcms | Gatsbyのサンプルコードでは Git 管理下になる gatsby-config.js に APIキー等の情報がそのままベタ書きになってしまうので、 dotenv で外部ファイルに取り出すことで隠蔽しました
- 後述しますが、 Vercel の環境変数も process.env で渡ってくるので、development の場合は dotenv 経由の外部ファイルをパラメータのリソースに、 production の場合は Vercel の環境変数をリソースとするように書き分けました

gatby-node.js

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const blogPost = path.resolve(`./src/templates/blog-post.js`)
  const result = await graphql(
    `
      {
        allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: DESC }
          limit: 1000
        ) {
          edges {
            node {
              fields {
                slug
              }
              frontmatter {
                title
              }
            }
          }
        }
      }
    `
  )

  if (result.errors) {
    throw result.errors
  }

  // Create blog posts pages.
  const posts = result.data.allMarkdownRemark.edges

  posts.forEach((post, index) => {
    const previous = index === posts.length - 1 ? null : posts[index + 1].node
    const next = index === 0 ? null : posts[index - 1].node

    createPage({
      path: post.node.fields.slug,
      component: blogPost,
      context: {
        slug: post.node.fields.slug,
        previous,
        next,
      },
    })
  })

  // Create blog post list pages
  const postsPerPage = 5
  const numPages = Math.ceil(posts.length / postsPerPage)

  Array.from({ length: numPages }).forEach((_, i) => {
    createPage({
      path: i === 0 ? `/` : `/${i + 1}`,
      component: path.resolve("./src/templates/blog-list.tsx"),
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
      },
    })
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

これを以下のように修正。

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const result = await graphql(
    `
      {
        allMicrocmsHogeHogeBlog(sort: {fields: [date], order: DESC}) {
          totalCount
          pageInfo {
            perPage
            pageCount
          }
          edges {
            node {
              body
              createdAt
              date
              id
              keywords
              publishedAt
              revisedAt
              slug
              title
              updatedAt
            }
          }
        }
      }
    `
  )

  if (result.errors) {
    throw result.errors
  }

  // Create blog posts pages.
  const posts = result.data.allMicrocmsHogeHogeBlog.edges

  result.data.allMicrocmsHogeHogeBlog.edges.forEach((post, index) => {
    const previous = index === posts.length - 1 ? null : posts[index + 1].node
    const next = index === 0 ? null : posts[index - 1].node

    createPage({
      path: post.node.slug,
      component: path.resolve('./src/templates/blog-post.js'),
      context: {
        slug: post.node.slug,
        previous,
        next,
      },
    });
  });

  // Create blog post list pages
  const postsPerPage = result.data.allMicrocmsHogeHogeBlog.pageInfo.limit || 10
  const numPages = Math.ceil(result.data.allMicrocmsHogeHogeBlog.totalCount / postsPerPage)
  console.log(result.data.allMicrocmsHogeHogeBlog.totalCount, postsPerPage)

  Array.from({ length: numPages }).forEach((_, i) => {
    createPage({
      path: i === 0 ? `/` : `/${i + 1}`,
      component: path.resolve("./src/templates/blog-list.tsx"),
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
      },
    })
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `microcmsHogeHogeBlog`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

gatsby-source-microcms | Gatsbyのサンプルコードはシンプル過ぎて GraphQL初心者には分かりづらかったので、 gatsby develop で起動した http://localhost:8000/___graphql の GraphQL を試すGUIでひたすらAPIを叩いてパラメータを変えたりしてどういう GraphQL を作れば望んだレスポンスを得られるか確認しながら地道に調整していきました
ベースのコードをなるべく変えないように調整して、各種プロパティの階層等を調整しました
MarkdownRemark や allMarkdownRemark が Markdownファイルをリソースとする場合のキーのような働きをしているのが分かったので、それを http://localhost:8000/___graphql で表示された microCMS のキーに変更したり

GraphQL の構造やレスポンスに慣れるまで時間がかかりましたが、最終的には http://localhost:8000/___graphql であれこれ試したのが一番効果がありました。

blog-list.tsx

記事一覧ページ。トップページもこのテンプレートから生成されています。

// Gatsby supports TypeScript natively!
import React from "react"
import { PageProps, Link, graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { rhythm } from "../utils/typography"

type PageContext = {
  currentPage: number
  numPages: number
}
type Data = {
  site: {
    siteMetadata: {
      title: string
    }
  }
  allMarkdownRemark: {
    edges: {
      node: {
        excerpt: string
        frontmatter: {
          title: string
          date: string
          description: string
        }
        fields: {
          slug: string
        }
      }
    }[]
  }
}

const BlogIndex = ({
  data,
  location,
  pageContext,
}: PageProps) => {
  const siteTitle = data.site.siteMetadata.title
  const posts = data.allMarkdownRemark.edges
  const { currentPage, numPages } = pageContext

  const isFirst = currentPage === 1
  const isLast = currentPage === numPages
  const prevPage = currentPage - 1 === 1 ? "/" : `/${currentPage - 1}`
  const nextPage = `/${currentPage + 1}`

  return (
    
      
      {posts.map(({ node }) => {
        const title = node.frontmatter.title || node.fields.slug
        return (
          
            
              {{
                  marginBottom: rhythm(1 / 4),
                }}
              >
                {{ boxShadow: `none` }} to={node.fields.slug}>
                  {title}
                
              
              {node.frontmatter.date}
            
            
              {{
                  __html: node.frontmatter.description || node.excerpt,
                }}
              />
            
          
        )
      })}

      
        {{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          
            {!isFirst && (
              
                ← Previous Page
              
            )}
          
          
            {!isLast && (
              
                Next Page →
              
            )}
          
        
      
    
  )
}

export default BlogIndex

export const pageQuery = graphql`
  query blogPageQuery($skip: Int!, $limit: Int!) {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          excerpt
          fields {
            slug
          }
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            title
            description
          }
        }
      }
    }
  }
`

これを以下のように改修。

// Gatsby supports TypeScript natively!
import React from "react"
import { PageProps, Link, graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { rhythm } from "../utils/typography"

type PageContext = {
  currentPage: number
  numPages: number
}
type Data = {
  site: {
    siteMetadata: {
      title: string
    }
  }
  allMicrocmsHogeHogeBlog: {
    edges: {
      node: {
        id: string
        keywords: string
        title: string
        updatedAt: string
        slug: string
        revisedAt: string
        publishedAt: string
        date: string
        createdAt: string
        body: string
      }
    }[]
  }
}

const BlogIndex = ({
  data,
  location,
  pageContext,
}: PageProps) => {
  const siteTitle = data.site.siteMetadata.title
  const posts = data.allMicrocmsHogeHogeBlog.edges
  const { currentPage, numPages } = pageContext

  const isFirst = currentPage === 1
  const isLast = currentPage === numPages
  const prevPage = currentPage - 1 === 1 ? "/" : `/${currentPage - 1}`
  const nextPage = `/${currentPage + 1}`

  return (
    
      
      {posts.map(({ node }) => {
        const title = node.title || node.slug
        return (
          
            
              {{
                  marginBottom: rhythm(1 / 4),
                }}
              >
                {{ boxShadow: `none` }} to={node.slug}>
                  {title}
                
              
              {node.date}
            
            
              {{
                  __html: node.keywords,
                }}
              />
            
          
        )
      })}

      
        {{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          
            {!isFirst && (
              
                ← Previous Page
              
            )}
          
          
            {!isLast && (
              
                Next Page →
              
            )}
          
        
      
    
  )
}

export default BlogIndex

export const pageQuery = graphql`
  query blogPageQuery($skip: Int!, $limit: Int!) {
    site {
      siteMetadata {
        title
      }
    }
    allMicrocmsHogeHogeBlog(
        sort: {fields: [date], order: DESC}
        limit: $limit
        skip: $skip
    ) {
      edges {
        node {
          body
          createdAt
          date(formatString: "YYYY/MM/DD")
          id
          keywords
          publishedAt
          revisedAt
          slug
          title
          updatedAt
        }
      }
    }
  }
`

ここは大々的な改修というよりは、 GraphQL の変更と、それに併せて変化したデータ構造に合わせてプロパティ名やチェーンを調整した感じです。

blog-post.js

import React from "react"
import { Link, graphql } from "gatsby"

import Bio from "../components/bio"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { rhythm, scale } from "../utils/typography"

const BlogPostTemplate = ({ data, pageContext, location }) => {
  const post = data.markdownRemark
  // const siteTitle = data.site.siteMetadata.title
  const { previous, next } = pageContext

  return (
    
      
      
        
          {{
              marginBottom: 0,
            }}
          >
            {post.frontmatter.title}
          
          {{
              ...scale(-1 / 5),
              display: `block`,
              marginBottom: rhythm(1),
            }}
          >
            {post.frontmatter.date}
          
        
        {{ __html: post.html }} />
        
{{
            marginBottom: rhythm(1),
          }}
        />
        
          
        
      

      
        {{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          
            {previous && (
              
                ← {previous.frontmatter.title}
              
            )}
          
          
            {next && (
              
                {next.frontmatter.title} →
              
            )}
          
        
      
    
  )
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
      }
    }
  }
`

これを以下のように改修。

import React from "react"
import { Link, graphql } from "gatsby"

import Bio from "../components/bio"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { rhythm, scale } from "../utils/typography"
import marked from "marked"

const BlogPostTemplate = ({ data, pageContext, location }) => {
  const post = data.microcmsHogeHogeBlog
  // const siteTitle = data.site.siteMetadata.title
  const { previous, next } = pageContext

  return (
    
      
      
        
          {{
              marginBottom: 0,
            }}
          >
            {post.title}
          
          {{
              ...scale(-1 / 5),
              display: `block`,
              marginBottom: rhythm(1),
            }}
          >
            {post.date}
          
        
        {{ __html: marked(post.body) }} />
        
{{
            marginBottom: rhythm(1),
          }}
        />
        
          
        
      

      
        {{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          
            {previous && (
              
                ← {previous.title}
              
            )}
          
          
            {next && (
              
                {next.title} →
              
            )}
          
        
      
    
  )
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
      }
    }
    microcmsHogeHogeBlog(slug: { eq: $slug }) {
      id
      keywords
      title
      updatedAt
      slug
      revisedAt
      publishedAt
      date(formatString: "YYYY/MM/DD")
      createdAt
      body
    }
  }
`

こちらも blog-list.tsx と同様 GraphQL の変更とそれに伴うプロパティ名やチェーンの調整がメインです。本文の Markdown は冒頭の通り時短のため marked を使いました。

こうして見てみると、 GraphQL に慣れるまでかなり紆余曲折した気がするのですが、 blog-list.tsx や blog-post.js は特に出来上がったコードがあまり元から変化していませんね……。

microCMS で APIキーを参照

microCMS で APIキーを控えます。

「サービス設定」→「APIキー」と進みます。今回必要なのは「X-API-KEY」。これを控えておきます。

Vercel の設定

続いて Vercel の設定へ。

環境変数の設定

まずは環境変数の設定。

プロジェクトを選択後、「Settings」から「Enviroment Variables」へ。

「NAME」にコードに記載したキーの名前を付けて、実際の値を入力します。画面では APIキーなので上述の microCMS の管理画面で控えた APIキーを入力。

他、必要な変数をセットします。

Deploy Hooks を登録

次に Deploy Hooks をひっかけます。

プロジェクトの「Settings」から今度は「Git」へ。

Deploy Hooks に名前を入力、ブランチは通常は main になるかと。

登録されたら Hook の URL を控えます。

microCMS の設定

お次は microCMS の画面へ。

サービスの管理画面から「API設定」→「Webhook」へ。

Vercel は一覧にはないので「カスタム通知」を選択。

名前は任意の名前を。

Hook の URL に先ほど控えた URL を入力します。

権限はこのような感じ。基本的に公開されているデータに変更が加わったら Hook が通知を行うものとします。

テスト投稿

ここまで設定できたら、試しに記事を新しく追加してみます。

すると、 Vercel 側でプロジェクトが反応してビルドが走り始めました。

microCMS に記事を追加すると、 Github のリポジトリに push することなく勝手にビルドが走ってサイトが更新されることが確認できました。

これで Gatsby.js + Vercel + microCMS で JAMStack なブログの仕組みが構築できました。実験成功です。

参考

Vercel の環境変数

環境変数の分かち書き

GatsbyJSで開発環境にのみページを存在させる方法 ++ Gaji-Laboブログ

gatsby-plugin-feed

gatsby-plugin-feed | Gatsby

基本 Gatsby.js のプラグインのページはシンプルなサンプルなので http://localhost:8000/___graphql で GraphQL を試して感覚をつかむ方が早かった気がします。

Gatsby.js + Vercel でブログを作ってみる

2021-08-25T22:14:35+09:00

兼ねてより試してみたかった Gatsby.js + Vercel の組み合わせに着手してみました。

1. Gatsby.js のインストールと Gitリポジトリの準備

まずは Gatsby.js のプロジェクトを作って Gitホスティングサービスに push します。

> yarn init

## 略

success Saved package.json
Done in 2.33s.

適当なディレクトリで package.json を生成。

> yarn add gatsby-cli

## 略

Done in 26.05s.

続いて gatsby-cli をインストールします。一応グローバルではなくローカルで。

: Gatsby Starter | Gatsby

今回のテーマはこれにします。

> gatsby new mptotkb https://github.com/renyuanz/leonids
╔════════════════════════════════════════════════════════════════════════╗
║                                                                        ║
║   Gatsby collects anonymous usage analytics                            ║
║   to help improve Gatsby for all users.                                ║
║                                                                        ║
║   If you'd like to opt-out, you can use `gatsby telemetry --disable`   ║
║   To learn more, checkout https://gatsby.dev/telemetry                 ║
║                                                                        ║
╚════════════════════════════════════════════════════════════════════════╝
info Creating new site from git: https://github.com/renyuanz/leonids.git

Cloning into 'mptotkb'...
remote: Enumerating objects: 60, done.
remote: Counting objects: 100% (60/60), done.
remote: Compressing objects: 100% (44/44), done.
Receiving objects: 100% (60/60), 542.69 KiB | 5.32 MiB/s, done.eceiving objects: 100% (60/60)

success Created starter directory layout
info Installing packages...
info Preferred package manager set to "npm"

## 略

Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd mptotkb
  gatsby develop

プロジェクト作成完了。

> cd mptotkb
> gatsby develop

## 略

info
Hi from the Gatsby maintainers! Based on what we see in your site, these coming
features may help you. All of these can be enabled within gatsby-config.js via
flags (samples below)

Preserve webpack's Cache (https://github.com/gatsbyjs/gatsby/discussions/28331), which changes Gatsby's cache clearing behavior to not clear webpack's
cache unless you run "gatsby clean" or delete the .cache folder manually.
Here's how to try it:

module.exports = {
  flags: { PRESERVE_WEBPACK_CACHE: true },
  plugins: [...]
}

⠀
You can now view gatsby-starter-leonids in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 48.261s

OK。完了しました。

最初は手始めということでこの状態でいったん push しておきたいと思います。 Gitリポジトリに登録するのは親ディレクトリではなく作成したプロジェクト (今回は mptotkb 下) です。

GitHub でリポジトリを作成して、このリポジトリに先ほどのプロジェクトを push 。ちなみにリポジトリは public である必要があります。

2. Vercel と Gitホスティングサービスの連携

次に Vercel でアカウントを作ります。

今回は GitHub を使用しているので「Continue with GitHub」を選択。

「Authorize Vercel」で Vercel のアクセスを認証します。

ログインできました。

3. リポジトリのインポート

一度中断してしまったのでダッシュボードから。ここからであれば「New Project」で次へ進みます。

Import Git Repository から「Add GitHub Org or Account」。

インポートするリポジトリを選択します。今回は1つのリポジトリだけに Vercel に連携させます。

リポジトリの確認です。使用しているフレームワークが自動判別されるのはありがたいですね。

次の画面でフローに沿って設定を進めていきます。最初に Vercel のチームを作成する画面が有効になっていますが、今回は個人なので「Skip」。

プロジェクトの設定。出力の設定や環境変数を設定できますが、今回はそのままで。

デプロイ中。

少し待つとデプロイが完了します。そこでURLから実際の画面を表示させると……きちんとデプロイされていました！

ここまでで Gatsby.js + Vercel でブログを作成することができました。

今後の課題としては以下の通り。

サイト名や著者情報といった基本情報のカスタマイズ
どうやらブログ記事の Markdown ファイルを生成する CLI やユーティリティはなさそうで、手作業で記事をちまちま作っていくのは手間なので記事リソースを別の場所 (Headless CMS とか) で管理して JAMStack にする

あとは折角なので GraphQL にも少しは触ってみたいところですね。

参考

Gatsby.js + Vercel

【ZEIT Now】Gatsbyサイトを無料サーバーVercelで公開する方法を徹底解説 | WebCraftLog
Gatsby + microcms + Vercel でブログを作って公開したい
Vercel – Git - Vercel Documentation
- 参考記事とは画面構成が変わっていたため、最終的には Vercel のドキュメントが頼りでした

Vercel

NetlifyキラーのVercelでウェブサイトをホストしたら簡単すぎて笑顔になった | DevelopersIO

Next.jsとVercelとRecoilとMaterial Tableを使ってAWSのステータスダッシュボードを作ってみた話

2021-03-01T01:31:55+09:00

AWSのステータス確認難しいよね

AWSを使ったことのある人ならばわかると思いますが、公式がAWSの障害情報を掲載するAWS Service Health Dashboardがあまり使いやすくないです。

それぞれのリージョンの障害がRSSで配信される形式になっているのですが、わざわざRSSを登録するのもめんどくさいし、Slackとかの連携に乗っけるのもそれはそれで便利なのですが、そもそもSlackを見ていないほかの人でも障害情報を共有したいです。

実は、AWS Service Health Dashboardの情報はJSONで取得することができます。

https://status.aws.amazon.com/data.json

こちらのJSONを活用して勉強がてら使いやすいダッシュボードを作っていきます。

クビになるぞ！

最近、これといった新しい技術に触れておらず、このままだとクビになりそうなので、そろそろ重い腰を上げてNext.jsを勉強することにしました。

また、Next.jsを使う場合はVercelが便利だよーとのことですので、こちらも使っていきます。

Next.js

Next.jsではpages/api配下に格納したコードについては、サーバーサイドとして振る舞います。

クライアントから直接status情報がかかれたJSONを読みとってもよかったのですが、HTMLの面倒なサニタイジング処理やら、値の補完など面倒なことはサーバーサイドに持ってこようということで、
statusJSONを取得して、フロントに返却するサーバーコードを書いていきます。

次のようなコードになりました。

import { NextApiRequest, NextApiResponse } from 'next'
import axios from 'axios'

export interface AwsStatusResp {
  archive: AwsStatusArchive[]
}

export interface AwsStatusArchive {
  service_name: string
  summary: string
  date: string
  status: string
  details: string
  description: string
  service: string
}

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  axios
    .get('https://status.aws.amazon.com/data.json')
    .then((resp) => {
      const handlerResp = resp.data.archive.map((x) => ({
        // eslint-disable-next-line @typescript-eslint/camelcase
        service_name: x.service_name,
        summary: x.summary,
        region: x.service.includes('management-console')
          ? 'global'
          : x.service.split('-').slice(1).join('-') === ''
          ? 'global'
          : x.service.split('-').slice(1).join('-'),
        date: x.date,
        status: x.status,
        details: x.details,
        service: x.service.includes('management-console')
          ? 'management-console'
          : x.service.split('-')[0],
        description: x.description
          .replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '')
          .replace(/ /g, '\n'),
      }))
      res.statusCode = 200
      // eslint-disable-next-line no-console
      console.log(handlerResp)
      res.json(handlerResp)
    })
    .catch((error) => {
      console.error(error.response)
      res.statusCode = error.response.status || 500
      res.statusMessage = error.response.statusText || 'InternalServerError'
      res.json({ error: error.response.statusText || 'InternalServerError' })
    })
}

export default handler

注意点として、必ずハンドラーはexport defaultを指定してあげないこと以外はいたって直感的なコードとなっております。

Vercelに載っけるとわかるのですが、こちらのコード、Lambdaにデプロイされることになります。たしかに見覚えある感じですね。

また、Next.jsと関係ないのですが、axiosのレスポンスに型がつけられるって知ってましたか？

export interface AwsStatusResp {
  archive: AwsStatusArchive[]
}

export interface AwsStatusArchive {
  service_name: string
  summary: string
  date: string
  status: string
  details: string
  description: string
  service: string
}

  axios
    .get('https://status.aws.amazon.com/data.json')
    .then((resp) => { ..........

Material Table

Material UI準拠のテーブルとして、Material Tableなるものがありましたので今回採用することにしました。

import MaterialTable from 'material-table'
import tableIcons from '../components/tableIcons'

 (
                
                  {dayjs
                    .unix(Number(rowData.date))
                    .format('YYYY-MM-DDTHH:mm:ssZ[Z]')}
                
              ),
              defaultSort: 'desc',
              type: 'string',
            },
            {
              title: 'Status',
              field: 'status',
              lookup: statusMapping,
            },
          ]}
          data={aws}
          detailPanel={[
            {
              tooltip: 'Details',
              render: (rowData) => {
                return (
                  <>
                    {rowData.summary}
                    
                      {dayjs
                        .unix(Number(rowData.date))
                        .format('YYYY-MM-DDTHH:mm:ss')}{' '}
                      {rowData.service_name}
                    
                    {rowData.description}
                  
                )
              },
            },
          ]}
          options={{
            filtering: true,
            grouping: true,
            exportButton: true,
            exportFileName: 'exported',
            headerStyle: {
              backgroundColor: '#e77f2f',
              color: '#FFF',
            },
          }}
          isLoading={loading}
          actions={[
            {
              // Issue: https://github.com/mbrn/material-table/issues/51
              //@ts-ignore
              icon: tableIcons.BarChartIcon,
              tooltip: 'Show Bar Chart',
              isFreeAction: true,
              disabled: loading,
              onClick: async () => {
                setShowGraph(!showG)
              },
            },
            {
              // Issue: https://github.com/mbrn/material-table/issues/51
              //@ts-ignore
              icon: tableIcons.Refresh,
              tooltip: 'Refresh Data',
              isFreeAction: true,
              disabled: loading,
              onClick: async () => {
                setLoading(true)
                await getAwsStatus()
              },
            },
          ]}
          title={
            
              
              
                AWS Health Dashboard
              
            
          }
        />

使い方もシンプルかつ比較的高機能でいい感じです。

いい感じですが後述するRecoilとの相性問題とDatetimeの扱いが微妙なのがツラミでした。

本当はDate型を渡してあげるとSearchableの際、カレンダーでの絞り込みができるのかなと思ったのですが、こちらがうまくいきませんでした。

あと、微妙に型もおかしく例えば、actionsはactionを複数指定することができるはずですが、型チェックで怒られるので、仕方なくts-ignoreしてます。

あなたが直せばいいじゃんアゼルバイジャンって言われそうですが、めんどくさくなってしまいIssueだけあげてしまいました。申し訳ねぇ...。

https://github.com/mbrn/material-table/issues/2762

Recoil

RecoilとはReactの新しい状態管理ライブラリで、いわゆるReact HooksでGlobal Storeを作ろうというものです。

基本的な使い方はまず、storeとしてatomという共有ステートを作成します。

atomのkeyはプロジェクトで一意にする必要がありますが、今回はそこまで大規模なプロジェクトではないのでawsとかいうクソ名をつけてます。

storeなので、store/aws.ts として格納します。

import { atom } from 'recoil'

const awsState = atom({
  key: 'aws',
  default: [
    {
      // eslint-disable-next-line @typescript-eslint/camelcase
      service_name: 'Auto Scaling (N. Virginia)',
      summary: '[RESOLVED] Example Error',
      date: '1542849575',
      status: '1',
      details: '',
      description:
        'The issue has been resolved and the service is operating normally.',
      service: 'autoscaling',
      region: 'us-east-1',
    },
  ],
  dangerouslyAllowMutability: true,
})

export default awsState

次にステートを共有したいコンポーネントのルートにRecoilRootを設置します。

Next.jsの場合、_app.tsxが全ページのルートにあたるのでここに置けばいいですね。

import { AppProps } from 'next/app'
import Head from 'next/head'
import { RecoilRoot } from 'recoil'
import React from 'react'

const App = ({ Component, pageProps }: AppProps) => (
  <>
    
      
        
        AWS Health Dashboard
      
      
    
  
)

export default App

そして、利用するときはuseRecoilStateをReact Hooksのように利用するだけです。簡単ですね。

import React, { useState, useEffect } from 'react'
import { useRecoilState } from 'recoil'
import awsState from '../store/aws'
import showGraph from '../store/showGraph'
import axios from 'axios'
import dayjs from 'dayjs'

dayjs.extend(utc)
dayjs.extend(timezone)

const Alert = (props: AlertProps) => {
  return 
}

export const Table = (): JSX.Element => {
  // 20200112: dangerouslyAllowMutabilityでできた
  const [aws, setAws] = useRecoilState(awsState)
  const [showG, setShowGraph] = useRecoilState(showGraph)
  const [loading, setLoading] = useState(true)
  const [slackBarOpen, setSlackBarOpen] = React.useState(false)
  const [apiErrorMsg, setApiErrorMsg] = React.useState('')
  useEffect(() => {
    getAwsStatus()
    setLoading(false)
  }, [])
  const getAwsStatus = () => {
    axios
      .get('/api/aws')
      .then((resp) => {
        setAws(resp.data)
        setLoading(false)
      })
      .catch((error) => {
        console.error(error.response)
        setSlackBarOpen(true)
        setApiErrorMsg(error.response.statusText || 'Error')
        setAws([])
        setLoading(false)
      })
  }

stateの読み込みはgetterから、書き込みはsetterから行います。

React Hooksに慣れていれば簡単ですね。

思わぬ落とし穴 Material TablesでRecoilが使えない

Recoilのatomは基本値の書き換えはset stateを使うことが求められます。ですが、material tablesはテーブルを作るときにdataにIDの書き込みが発生するようでそのままだと怒られてしまいます。

Cannot add property tableData, object is not extensible

これの解決策はRecoilにstateへの直接的な書き換えを許可することです。こちらはatomのoptionでdangerouslyAllowMutabilityを有効にすることで解決できます。

import { atom } from 'recoil'

const awsState = atom({
  key: 'aws',
  default: [
    {

    },
  ],
  dangerouslyAllowMutability: true,
})

これがわかるのに半日くらい使っちまいました。

Chart.js

さて、無事にRecoilでstateの共有ができたのでせっかくなので別コンポーネントも作ります。

意味があるかどうか不明ですが、AWSの障害発生状況を可視化してみようと思います。

ということで、採用したのがChart.js。

次のようにデータを渡すだけできれいめなグラフを書いてくれます。

import { useRecoilValue } from 'recoil'
import awsState from '../store/aws'
import React from 'react'
import {
  regionNameMapping,
} from './const'
import BarGraph from './barGraph'

export const AlertPerRegion = (): JSX.Element => {

  const aws = useRecoilValue(awsState)
  const labels = Array.from(
    new Set(aws.map((data) => regionNameMapping[data.region]))
  )
  const data = []
  for (const r of labels) {
    data.push(
      aws
        .map((data) => regionNameMapping[data.region])
        .reduce((total, x) => {
          return x === r ? total + 1 : total
        }, 0)
    )
  }
  return (
    
      
    
  )
}

どうでもいい実装ですが、各グラフを一覧で見れる画面を用意し、実際のグラフは遷移先で表示するようにしてます。

Vercelにデプロイ

さて、実装ができたので後はVercelにあげるだけです。

もうここはほとんど書くことがないのですが、Next.jsで作ったアプリケーションはVercelでレポジトリと使っているフレームワークを設定するだけで簡単にデプロイ出来てしまいます。

これはすごい。

完成

ということで、AWS Health Dashboardが完成しました。

アクセスすると、Next.jsのapiをコールし、AWSのstatusを取得加工したものを返却します。

フロントでは受け取ったデータをRecoilのatomに格納しつつ、material tableで表として描画します。

また右上のグラフボタンを押すことで色々な切り口の可視化を行うことができます。

https://aws-health-dashboard.vercel.app/

できれば使う場面にならないことを祈りつつ、ご活用いただければとおもいます。

まとめ

食わず嫌いでやらなかったNext.js+Recoilをやってみましたが、楽しく実装ができました。

2021/02/20追記

2021/02/19～20にかけて起きたAWS EC2障害ですが、本ダッシュボードでは更新がされませんでした。

どうやら、data.jsonはRSSとは違い、同期的に更新されないようです。

大変ご迷惑をおかけしました。改めて、改修しRSS更新にも対応できるように頑張ります。

VercelにてNext.jsのAPI RoutesでOGPを作成する 2020年版

2020-10-10T23:46:11+09:00

VercelにてNext.jsのAPI Routesでファイルが読み込めるようになっていました！　元々、API Routesでは別のファイルの読み込みができませんでした。そのため下記の記事のように別途node builderを利用していましたが、もうそれも必要なくなり、開発もデプロイもシンプルなAPI Routesとして実行できるようになっているようで、非常に簡単になりました。

Vercel（元ZeitのNow）にてNext.jsでnode-canvasを使ってOGP

どういうことか

このissueで話が進んでおり、このコメントが解決方法になっています。

Next.js API routes (and pages) should support reading files · Issue #8251 · vercel/next.js

つまり、

path.resolve('./public/ts-data.csv')

というパス指定でファイルが読み込めるようになっています！　めでたい。

具体例

具体的にはこういうコードでVercelでも正常に動作しました。フォントを読み込んでのテキスト描画も、画像の描画も、正常にできています。

import { NextApiRequest, NextApiResponse } from 'next'
import * as path from 'path'
const { createCanvas, registerFont, loadImage } = require('canvas')

export default async (req: NextApiRequest, res: NextApiResponse) => {
  registerFont(path.resolve('./fonts/ipagp.ttf'), {
    family: 'ipagp',
  })

  const width = 600
  const height = 315
  const canvas = createCanvas(width, height)
  const context = canvas.getContext('2d')

  context.fillStyle = '#fafafa'
  context.fillRect(0, 0, width, height)

  context.font = '15px ipagp'
  context.fillStyle = '#424242'
  context.textAlign = 'center'
  context.textBaseline = 'middle'
  context.fillText('あいうえお', 100, 50)

  const test = await loadImage(path.resolve('./images/test.png'))
  context.drawImage(test, 300, 0, 70, 70)

  const buffer = canvas.toBuffer()

  res.writeHead(200, {
    'Cache-Control': 'public, max-age=315360000, s_maxage=315360000',
    Expires: new Date(Date.now() + 315360000000).toUTCString(),
    'Content-Type': 'image/png',
    'Content-Length': buffer.length,
  })
  res.end(buffer, 'binary')
}

下記がVercel上で描画した画像です。

ちなみにnode-canvasでのOGPの作成はハマるのでそれは別途下記参照です。

Vercel（元ZeitのNow）にてNext.jsのAPI Routesでnode-canvasを使う

ハッカー専用パズルゲームを作ったので全てネタバレする

2020-09-24T10:25:23+09:00

当記事はハッカー専用パズルゲームを作ったので全てネタバレするのクロス投稿です

💰作ったもの💰

UNLOCK BANK

@銀行口座をHackしたくてウズウズしている皆さん「違法行為はしたくないけどハッキングはしたい…」そんな貴方の悩みを解決するゲームをご用意しました。このゲームでは何をやっても合法です。是非、不正ログインしてみてください💰https://t.co/LyIpYLCRrP #UNLOCK_BANK
— きんみ | ツイッター大喜利サイト🎍ついぎり🎍作りました🙄 (@_kinmi) September 21, 2020

仕様

Account Number(数字8桁) と Password(数字4桁) によるログイン認証
Account Number は全て存在する(8桁なので全口座数は1億口)
Password を3回間違えるとロック(再試行不可)される
[裏設定] 銀行口座を模している為、もちろんパスワードが流出したら他者もログイン可能

ユーザーはどんな攻撃手法を用いても良い。
最近話題の1段階認証を突破してみようというパズルゲーム。

システム構成

JSフレームワーク: Nuxt.js 2.14.5(Vue.js 2.x)
トランスパイル: TypeScript 4.0
CSSフレームワーク: TailwindCSS
ホスティング: Vercel

お馴染みの構成を選択したが、Vue.jsの使用については少し後悔している（後述）

以下ネタバレ

基本的には以下の2つと考えている。
- ☠️リバースブルートフォース攻撃☠️
件の金融事件で脚光を浴びた攻撃手法。
暗証番号の総当たり(ブルートフォース攻撃)は一般的なシステムだと試行回数に制限を設けているが、ユーザーIDの様な公開情報については秘匿性が低いため無制限に試行できるシステムが多い。そこを突いてパスワードは固定のままIDの方を総当たりするという攻撃。
特に当ゲームのような、認証情報に数値しか許容していないシステムだと少ない試行回数で突破できるため致命的な脆弱性となる。

😈リバースエンジニアリング😈
JavaScriptのみで構成している為、コードを解析してパスワードの取得が可能。
当初はNode.jsサーバー等を用意して認証処理を隠蔽するつもりだったがガチ攻撃された場合、サーバーか私の財布が死ぬと思い断念。
しかし「ハッカー専用」と銘打っている以上、コードを覗くだけで突破されては面白くないので悪足掻きとして難読化を施している。

仕組みについて

🔐パスワード生成

仕様として、口座番号とパスワードの紐付きを作らないといけない（パスワードが流出したら誰でもログインできるように）
最初は愚直に1億口座分のパスワードマッピングを定数で用意しようと考えた。
しかし上述のコードを隠蔽できない事情によりリテラル値で持つのは避けたかった為、下記のライブラリを採用した。
seedrandom.js
これを用いてシード値から再現性のある乱数を生成(※1)する。

下記のように口座番号をシード値とした乱数を生成した後、整形してパスワードとしている。

const seedrandom = require('seedrandom')

function authenticated(account: string, password: string): boolean {
  const rng = seedrandom(account)
  const _pass = String(Math.round(rng() * 10000)).padStart(4, '0')
  return _pass === password
}

これで口座番号とパスワードの紐付きを再現している。

seedrandom.jsの使用感

🙆‍♂️ 良かった所
- 直感的に使える
- 複数の乱数アルゴリズムに対応している
- Math.random()をラップできる為、テストにも使えそう
🙅‍♂️ 頑張って〜
- 型定義がない(2020/09現在、issueにて対応中)

個人的には「再現性のある乱数を生成する処理」というのはバーコードバトラーライクのゲームを作る際に重宝するので、有難いライブラリ。

状態管理, 認証処理

本筋と外れるが、クライアントで認証処理を行う為に口座番号と暗証番号をグローバル管理する必要があった。
Vuexはオーバースペックなので状態をInjectするプラグインを自作してstoreとして使用した。

~/plugins/auth.ts

import Vue from 'vue'
import { Plugin } from '@nuxt/types'
import { Seedrandom } from '../types/seedrandom'
const seedrandom = require('seedrandom') as Seedrandom

type InjectTypeAuth = {
  /**
   * 口座番号
   */
  accountNumber: string
  /**
   * 暗証番号
   */
  password: string
  /**
   * 認証処理
   * seedから4桁の乱数(先頭0埋め)を生成し、passwordとの比較結果を返却する
   * @param {string} seed シード値となる値
   * @param {string} password パスワード
   */
  authenticated(seed: string, password: string): boolean
}

declare module '@nuxt/types' {
  interface Context {
    $auth: InjectTypeAuth
  }
  interface NuxtAppOptions {
    $auth: InjectTypeAuth
  }
}
declare module 'vue/types/vue' {
  interface Vue {
    $auth: InjectTypeAuth
  }
}

type State = {
  accountNumber: string
  password: string
}

/**********************************************
 * 認証情報プラグイン
 * @param {Context} ctx
 * @param {(key: string, value: any) => void} inject
 */
const AuthPlugin: Plugin = (_ctx, inject) => {
  /**
   * Observable properties
   */
  const state = Vue.observable({
    accountNumber: '',
    password: '',
  } as State)

  function authenticated(seed: string, password: string): boolean {
    const rng = seedrandom(seed)
    const _pass = String(Math.round(rng() * 10000)).padStart(4, '0')
    if (_pass === password) state.password = _pass
    return _pass === password
  }

  /**
   * Injection
   */
  inject('auth', {
    get accountNumber() {
      return state.accountNumber
    },
    set accountNumber(accountNumber: string) {
      state.accountNumber = accountNumber
    },
    get password() {
      return state.password
    },
    authenticated,
  })
}
export default AuthPlugin

※ 実際の乱数生成処理はもう少しノイズを入れてるので、このまま動かしても同じパスワードは生成されません

このauthenticatedをEnterボタン押下時と、直アクセスを防ぐ目的でログイン後ページ内のvalidate()hookでも呼び出して認証処理としている。

⚠️注意
当然ですが、フロントエンドでパスワードの一致チェック等の認証処理を行ってはいけません。

Vue3のRCが外れて正式リリースとなったが、Reactivity API等を活用したVuex(ver 5)のリリースはまだ先の様なので暫く状態管理はこの手法に落ち着きそう。

攻撃方法の紹介

以上を踏まえ、解法の一つであるリバースブルートフォース攻撃の実施方法を紹介していく。
尚、当ゲームでは外部からブラウザ操作しやすいように主要な要素に対してid属性を付与している。

前提知識: JavaScript の場合

「システム構成」の節でも触れたが、Vue.jsの採用を後悔したのはここ。

システムがHTML＋PureJSの構成であれば、ブラウザの開発者コンソールから下記の様に実行して入力値を動的に与える事が可能。

const digit1 = document.getElementById('digit1')
digit1.value = "1"

これは一般的な方法だし、私も当初このやり方を想定していた。
しかしVue.jsの場合、inputイベントを検知してVueインスタンス内に保有するデータを更新する。
直接input要素のvalue値を書き換えてもイベントは発火せず、データは更新されない。
この挙動を想定しておらず、ユーザーに無駄なハードルを与えることとなってしまった。

ではどうするのか。
当ゲームには数値をカウントアップ/カウントダウンするボタンを実装している。

金融システムって誰得UI多いよな という遊び心で実装したボタンだが、Vue内のデータを書き換えるイベントに直結している。
このボタンをプログラムからクリックすることが出来れば口座番号入力の自動化が可能となる。

ここから先の解説は、既にUNLOCK成功された@yoneappさんが記事を書かれている為、そちらに任せることとする。
リバースブルートフォース攻撃を使ってUNLOCK BANKの口座に不正ログインして優勝する(Zenn)
（改めて解説記事の執筆ありがとうございます🙇‍♂️）

前提知識: Vue.js の場合

Vue.jsには vue-devtools というデバッグ用のブラウザ拡張が存在する。
これを使えばコンポーネント構成を覗きつつ、各種データの書き換えやイベント発火が可能となるが通常はProduction環境で開けない。
しかし、開発者ツールを使いこれをこじ開ける方法がある。

本番公開されているサイトで Vue devtools を使う裏技(Qiita)

厳密にはソースの難読化を施してるのため上記記事と全く同じではないが、ソースを検索すればdevtoolというキーワードは見つかるはず。
あとはその後ろにブレークポイントを張り、_0x1bd719.devtools = true を実行すれば開発者ツールを開けることが可能。

図の状態(Devtoolsでコンポーネントを選択した状態)だと、開発者コンソール上で$vm0というオブジェクトが使用出来る。これは選択したコンポーネントのVueインスタンスであり、コンポーネント内に存在するデータやメソッドが全て内包されている。
あとはそこからアタリを付けて、自動化プログラムを組めば良い。
実際には下記をイジれば入力操作の自動化が可能となる。

$vm0.accountNumbers // 口座番号(1桁ずつ格納した配列)
$vm0.password // パスワード
$vm0.enter() // Enterボタン押下時の処理を実行

⚠️注意
初めてこれ(Productionでdevtoolsが使えること)を知った方はセキュリティ面に不安を覚えるかもしれませんが、それはお門違いです。
フロントエンドで保持するデータはユーザーから自由に改ざんされる前提であるべきです。

前提知識: Nuxt.js の場合

Nuxt.jsで作られたアプリケーションはwindow直下に$nuxtというオブジェクトが作られる。
そこには全ての情報が含まれており、上記のようにDevtoolsを開かずとも開発者コンソールからデータの書き換えやメソッドの実行が可能。
しかし内包する情報量が膨大な為、開発者ではない第三者が操作したい対象を探すのは一苦労かもしれない。
ちなみに当ゲームでは下記が自動化に必要な対象となる。

window.$nuxt.$children[1].$children[0].$children[0].accountNumbers
window.$nuxt.$children[1].$children[0].$children[0].password
window.$nuxt.$children[1].$children[0].$children[0].enter()

その他の手法

Selenium や Puppeteer 等を用いたブラウザ操作の自動化があげられる。
今のところ、これらを使ってUNLOCKしたという報告は観測していない。ブラウザの開発者ツールが万能すぎる。

⚠️注意
悪意が無くともサーバーに高負荷をかける行為は法律により罰せられる可能性があります。
しかし、当ゲームで行う分には問題ありません。存分に攻撃してください。

更にネタバレ

もしproduction環境でログイン後のページを確認する必要が出た場合を考慮して、
- Account Number: 1145-1419
- Password: 1919

と入力したら開発コンソールに上記口座のパスワードが出力されるようになっている。
攻撃するのは面倒くさいけどログインしてみたい、という方はどうぞ。

確率について

数値4桁のパスワードというのは 0000 ~ 9999 の1万パターンしかない。
パスワードを固定にして、口座番号を総当たりした場合の確率は下記で求められる。

1 - ( 9999 / 10000 )^x
x=試行回数

(間違ってたらご指摘ください)
確率を表にするとこうなる。

試行回数	HITする確率
3回	0.03%未満
10回	約0.1%
100回	約1%
1,000回	約10%
10,000回	約63%
100,000回	約99%

つまり、口座番号8桁(1億パターン)全て試行せずとも、10万回程度で1口座はUNLOCKできてしまう。
下5桁総当たりすればいい計算で、実際にTwitterでUNLOCKされた方の反応も「思ったより早かった」という声が多かった。
当ゲームはパスワードを乱数によって生成しているが、これが本当の銀行口座の場合、パスワードの偏りが生じるはずなので更にUNLOCKは容易となるだろう。

おわり

ネタのつもりで作ったんですが思いのほか反響があって、解説記事を書いて頂いたり、難読化をデコードしてリバースエンジニアリングまでやって下さってる方もいて、個人開発冥利に尽きるなと思いました。
他にも「こんなやり方あるよ」という方がいましたらご連絡ください。

注釈

※1: JavaScriptにはシード値から乱数を生成する機能が備わっていない

【アップデート】Crieitバッジを作りました

2020-08-18T23:18:26+09:00

Crieitバッジ

GitHubなどに貼るCrieitバッジを作りました。

これが私(ckoshien)のバッジです。

ちなみにCrieit開発者だらさんはといえば....

....やっぱり強い強すぎる。

使い方

このコードの*****の部分を自分のユーザID(例:ckoshienとかdala00)に書き換えて貼るだけです。

[![Crieit経験値](https://ogp-vercel.vercel.app/crieit/*****)](http://crieit.net/users/*****)

どうやって作ったか

着想

mikkameさんのQiita のスコアをGithub風バッジに変換するサービスを見てCrieit版作ろう！と思いました。

技術的なこと

shield.io版からアップデートしました。
現在はvercel + NextJS + puppeteerでスクレイピングした情報で一旦画面を作ってスクリーンショットを撮っています。

結果的にvercelを2台分(スクレイピング/スクリーンショット)使っています。

バックエンド

vercel/NodeJS(lambda)
puppeteer

puppeteerでcrieitのユーザページをスクレイピングして経験値を取得しています。

async function getCrieitBadge(user_id) {
  const browser = await puppeteer.launch({
    args: chrome.args,
    executablePath: await chrome.executablePath,
    headless: chrome.headless,
  });
  const page = await browser.newPage();
  await page.goto("https://crieit.net/users/"+user_id);
  await page.setCacheEnabled(true);

  const itemSelector = "#app > #container > div.row > div > p.mb-2 > span:nth-child(1)";
  const itemSelector2 = "#app > #container > div.row > div > p.mb-2 > span:nth-child(2)";
  var item = await page.$(itemSelector);
  var item2 = await page.$(itemSelector2);
  var data = await (await item.getProperty('textContent')).jsonValue();
  var data2 = await (await item2.getProperty('textContent')).jsonValue();
  await page.close();
  await browser.close();
  return data;

}

現在は画像を1日キャッシュするようにして返しています。
ではよいCrieitライフを!!

Vercel（元ZeitのNow）でNuxt.jsアプリをデプロイ 2020年最新版

2020-04-27T23:20:13+09:00

now というコマンドを使わないVercel（元ZeitのNow）へのデプロイ方法を解説します。今回の手順ではNuxt.jsを使います。

背景

now というコマンドで簡単にデプロイできるということで一世を風靡したZeitのNowですが、先日Vercelというサービス名に変更されました。その前からちょこちょこ新たな機能をリリースしており、nowというコマンドを使わなくてもGitHub連携によってpushするだけでデプロイできるようになったり、環境変数も独自のsecretsという設定を使わず、管理画面で設定できるようになったりと、かなり手軽になってきているので実際にそれらを使ったデプロイ方法を説明します。

Nuxt.jsアプリを作成

まずはNuxt.jsのアプリケーションを作成します。

npx create-nuxt-app nuxt-vercel-sample
# or
yarn create nuxt-app nuxt-vercel-sample

いくつか設定項目が現れるため下記のように設定しました。適当です。

✨  Generating Nuxt.js project in nuxt-vercel-sample
? Project name nuxt-vercel-sample
? Project description My astonishing Nuxt.js project
? Author name dala00
? Choose programming language TypeScript
? Choose the package manager Yarn
? Choose UI framework Buefy
? Choose custom server framework None (Recommended)
? Choose the runtime for TypeScript Default
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support, DotEnv
? Choose linting tools (Press  to select,  to toggle all,  to invert selection)
? Choose test framework Jest
? Choose rendering mode Universal (SSR)
? Choose development tools (Press  to select,  to toggle all,  to invert selection)

あとは出力されるメッセージの通り、下記のようにして実行できます。

cd nuxt-vercel-sample yarn dev

見た目は利用しているUIフレームワークによって変わります。

GitHubへ登録

今回はnowコマンドは一切使わずGitHub連携でデプロイを行います。ですのでまずはいま作成したアプリケーションをGitHubに登録します。その前にとりあえずcommitしておきます。git initだけは勝手にやってくれています。

git add . git commit -m "Initial commit"

VSCode等でやってもよいでしょう。

まずは適当にGitHubでリポジトリを作成します。

表示されているとおりに設定してpushします（SSHキーの登録などは事前に行っておいてください）。

Vercelにデプロイする

続いてVercel側に今pushしたものをデプロイします。……がその前に、Nuxt.jsをVercelで使うための @nuxtjs/now-builder というものがNuxt.js公式から用意されていますので、それをnow.jsonに設定します。

{ "version": 2, "builds": [ { "src": "nuxt.config.js", "use": "@nuxtjs/now-builder", "config": {} } ] }

これをcommit & pushしておきましょう。

続いてVercelのダッシュボードにImport Projectボタンがあるためそちらをクリックします。

From Git Repositoryを選択します。

Importボタンをクリックします。

プロジェクトの選択画面が開きますので適宜選択します。僕の場合は個別に権限を与えたものだけ選択できるようにしているため、同様の場合は下記のようにEdit your repository access settings on GitHub.を実行してGitHub側で権限を与えてから選択します。

選択できたらSelectしてImportを実行です。プロジェクト名の入力画面が開くので入力してContinueします。

引き続きROOT DIRECTORYやBUILD COMMANDの設定画面なども開きますが、Nuxt.jsアプリケーションの場合は一切何も設定しなくてもデプロイが可能のためひたすらContinueして最後のDeployボタンを押せば完了です（さきほどのnow.jsonの設定が抜けているとビルドに失敗します）。

Buildingステータスになっているのでしばし待ちます。

Readyとなったらデプロイ完了です。

URLがいくつかありますが、どれでも閲覧できます。DEPLOYMENTというURLは一意なデプロイURLです。DOMAINSはそのプロジェクトのURLで、いつも使えるURLです。どれでも良いので開くとローカルで実行したアプリケーションと同じ画面が表示されます。これでデプロイは完了です！

ちなみに下記は今回作ったサンプルです。

https://nuxt-vercel-sample.now.sh/
https://github.com/dala00/nuxt-vercel-sample

更新したい時

プログラムを調整して更新したいときは、GitHubにpushするだけで勝手にデプロイされます。

ちなみに先ほどの画面はProduction Deploymentで、masterブランチのものがProductionとしてデプロイされます。別のブランチを作ってそちらでpushしておくと、その製品版のURLは利用されず、別ブランチ用のURLが作成されるため安全にステージング環境として利用することが可能です。下記のようにDeploymentsメニューで全てのブランチのデプロイを確認できます。

それをクリックすると下記のようにテスト用のURLを利用することが出来ます。

プルリクエストを作るとブランチのマージもGitHub上だけで行えます。

ちなみにGitHub連携しているとこんな感じでnowちゃんが甲斐甲斐しくコメントをしてくれます（そういやこちらはまだ名前が変わってないですね）。これで一人ぼっちで友達がいなくても寂しくありません。

環境変数を設定する

Nowではずっとsecretsという機能を利用してプライベートな値を利用できるようにしていましたが、最近Vercelになったのと同じくらいの時期に管理画面で直接環境変数を設定できるようになりました。下記のように設定ができます。

ちなみにProductionは本番、つまり独自ドメインを設定していればそちらのURLや、プロジェクト名.now.sh というシンプルなエイリアスのものなどです。Previewは別のブランチでpushした時に作成されるURLです。DevelopmentはローカルPCにて、now devを実行した時のものです。

設定後は見えなくなります。

Nuxt.js上では、nuxt.config.jsにて例えば下記のように設定します。ローカルでの環境変数は直接指定するか、dotenv等を利用しましょう。

// require('dotenv').config() export default { mode: "universal", env: { TEST_TEXT: process.env.TEST_TEXT },

index.vueにてscript側に値を取得処理を作成し、

methods: { getText() { return process.env.TEST_TEXT } }

表示側でそれを使います。

{{ getText() }}

問題なければ下記のように表示されます。

nowコマンドは？

こちらも使えます。今回のパターンだと不要でしたが、複数のbuildersを使う場合などはローカルで now dev コマンドで開発ができます。この場合は事前に now コマンドを実行してVercel側のプロジェクトと紐付けておく必要があります。

まとめ

ということで2020年に入り、Vercelは進化を遂げ続けており非常に使いやすくなりました。GitHubや自動デプロイに慣れている方はGitHub連携で、GitHubを使ったことがなくてちょっと怖い、という方は今まで通りnowコマンドを使って、柔軟に利用できます。非常に便利ですので使い倒していきましょう。

Vercel（元ZeitのNow）でNext.jsアプリをデプロイ 2020年最新版

2020-04-27T08:55:36+09:00

now というコマンドを使わないVercel（元ZeitのNow）へのデプロイ方法を解説します。今回の手順ではNext.jsを使います。

背景

now というコマンドで簡単にデプロイできるということで一世を風靡したZeitのNowですが、先日Vercelというサービス名に変更されました。その前からちょこちょこ新たな機能をリリースしており、nowというコマンドを使わなくてもGitHub連携によってpushするだけでデプロイできるようになったり、環境変数も独自のsecretsという設定を使わず、管理画面で設定できるようになったりと、かなり手軽になってきているので実際にそれらを使ったデプロイ方法を説明します。

Next.jsアプリを作成

まずはNext.jsのアプリケーションを作成します。

npm init next-app # or yarn create next-app

いくつか設定項目が現れるため下記のように設定しました。

√ What is your project named? ... next-vercel-sample √ Pick a template » Default starter app

あとは出力されるメッセージの通り、下記のようにして実行できます。

cd next-vercel-sample yarn dev

GitHubへ登録

今回はnowコマンドは一切使わずGitHub連携でデプロイを行います。ですのでまずはいま作成したアプリケーションをGitHubに登録します。その前にとりあえずcommitしておきます。

git init git add . git commit -m "Initial commit"

addとcommitはVSCode等でやってもよいでしょう。

まずは適当にGitHubでリポジトリを作成します。

表示されているとおりに設定してpushします（SSHキーの登録などは事前に行っておいてください）。

Vercelにデプロイする

続いてVercel側に今pushしたものをデプロイします。VercelのダッシュボードにImport Projectボタンがあるためそちらをクリックします。

From Git Repositoryを選択します。

Importボタンをクリックします。

プロジェクトの選択画面が開きますので適宜選択します。僕の場合は個別に権限を与えたものだけ選択できるようにしているため、同様の場合は下記のようにEdit your repository access settings on GitHub.を実行してGitHub側で権限を与えてから選択します。

選択できたらSelectしてImportを実行です。プロジェクト名の入力画面が開くので入力してContinueします。

引き続きROOT DIRECTORYやBUILD COMMANDの設定画面なども開きますが、Next.jsアプリケーションの場合は一切何も設定しなくてもデプロイが可能のためひたすらContinueして最後のDeployボタンを押せば完了です。

Buildingステータスになっているのでしばし待ちます。

Readyとなったらデプロイ完了です。

URLがいくつかありますが、どれでも閲覧できます。DEPLOYMENTというURLは一意なデプロイURLです。DOMAINSはそのプロジェクトのURLで、いつも使えるURLです。どれでも良いので開くとローカルで実行したアプリケーションと同じ画面が表示されます。これでデプロイは完了です！

ちなみに下記は今回作ったサンプルです。

https://next-vercel-sample.now.sh/
https://github.com/dala00/next-vercel-sample

更新したい時

プログラムを調整して更新したいときは、GitHubにpushするだけで勝手にデプロイされます。

ちなみに先ほどの画面はProduction Deploymentで、masterブランチのものがProductionとしてデプロイされます。別のブランチを作ってそちらでpushしておくと、その製品版のURLは利用されず、別ブランチ用のURLが作成されるため安全にステージング環境として利用することが可能です。下記のようにDeploymentsメニューで全てのブランチのデプロイを確認できます。

それをクリックすると下記のようにテスト用のURLを利用することが出来ます。

プルリクエストを作るとブランチのマージもGitHub上だけで行えます。

ちなみにGitHub連携しているとこんな感じでnowちゃんが甲斐甲斐しくコメントをしてくれます（そういやこちらはまだ名前が変わってないですね）。これで一人ぼっちで友達がいなくても寂しくありません。

環境変数を設定する

Nowではずっとsecretsという機能を利用してプライベートな値を利用できるようにしていましたが、最近Vercelになったのと同じくらいの時期に管理画面で直接環境変数を設定できるようになりました。下記のように設定ができます。

ちなみにProductionは本番、つまり独自ドメインを設定していればそちらのURLや、プロジェクト名.now.sh というシンプルなエイリアスのものなどです。Previewは別のブランチでpushした時に作成されるURLです。DevelopmentはローカルPCにて、now devを実行した時のものです。

設定後は見えなくなります。

Next.js上では、next.config.jsにて例えば下記のように設定します。ローカルでの環境変数は直接指定するか、dotenv等を利用しましょう。envはサーバー側（というかビルド時）、publicRuntimeConfigでクライアント側に環境変数を渡せます（漏洩してはいけない値を渡さないようにしましょう）。

// require('dotenv').config() module.exports = { env: { TEST_TEXT: process.env.TEST_TEXT, }, publicRuntimeConfig: { TEST_TEXT: process.env.TEST_TEXT, }, }

index.jsを下記のように調整することで利用できます。

import getConfig from 'next/config' const { publicRuntimeConfig } = getConfig() export default function Home() { return (
Create Next App
Welcome to{' '} Next.js! {publicRuntimeConfig.TEST_TEXT}

問題なければ下記のように表示されます。

nowコマンドは？

こちらも使えます。今回のパターンだと不要でしたが、 @now/next というbuilders以外を使う場合はローカルで now dev コマンドで開発ができます。この場合は事前に now コマンドを実行してVercel側のプロジェクトと紐付けておく必要があります。

まとめ

ということで2020年に入り、Vercelは進化を遂げ続けており非常に使いやすくなりました。GitHubや自動デプロイに慣れている方はGitHub連携で、GitHubを使ったことがなくてちょっと怖い、という方は今まで通りnowコマンドを使って、柔軟に利用できます。非常に便利ですので使い倒していきましょう。

Vercel（元ZeitのNow）にてNext.jsでnode-canvasを使ってOGP

2020-04-24T12:00:32+09:00

追記 2020/10）
2020年7月頃から？、Vercelが改善されて簡単にOGPが作れるようになりました。
VercelのAPI RoutesでOGPを作成する 2020年版
追記終わり

Next.jsアプリケーションをVercel（元ZeitのNow）で利用してOGPを生成しようと思ったが無理で、それでもなんとか成功させたある男の記録（2020/4、Next.js9.3現在）。

VercelでNext.js

そもそもNext.jsはVercelの人が作っている。そのため多分かなり親和性が高い。GitHub連携して適当にpushすればすぐなんの設定もなくすぐデプロイできる。ということでまずは何も考えずガリガリアプリケーションを作成していた。

何がうまくいかなかったのか

まず作っていたもの。それは普通のNext.jsアプリケーション。それにOGPもつけようと思っていた。調べてみるとNext.jsには API Routes という機能があり、別途サーバー用の機能を準備しなくてもちょっとしたAPIならpages/apiの下に通常のページと同じ配置でメソッドを追加すればサーバーサイドの処理も書けてしまう。

これでOPGも可能そうだと思い、事前にnode-canvasを使って試していたところうまくいっていた。前も別のところで同じことをやっていたのだが、基本的にこういうデプロイ先はフォントが無いことがあるため、node-canvasにあるregisterFontという機能を使って直接ttfのようなフォントファイルを読み込むことで文字も描画できるようにしている。

しかし、これがうまくいかなかった。なんかregisterFontあたりエラーが出る。調べてみたところこんなissueをみつけた。

Next.js API routes (and pages) should support reading files · Issue #8251 · zeit/next.js

そう、なんか __dirname もちゃんと機能していないし、fs.readFileSync もまともに動かない……。

ということで、フォントの読み込みができなかった。

なぜファイルを読み込めないのか

なぜかはよくわからないが、とにかくVercelは内部的にはAWSのLambdaを使っており、その関係でデプロイする時に関係ないファイルを無視していたり、フォルダ構成も全く違う感じになってたり、色んな要因でうまくいかないのではないかと思われる。詳しくはわからない。が、上記issueやこのPR Fix for __dirname by huv1k · Pull Request #8334 · zeit/next.js を見る限り、なかなか改善できていないようなので多分構成的にそんな簡単ではないのではないかと思われる。

ということで、そのうち改善されるのかもしれないが、とにかく今や今後すぐに改善されるとは思わないほうが良いっぽく、無理なら無理でどうするかを考える必要がありそうだった。

解決の手がかり

実はこのissueの中に、下記のようなコメントがあった。結果としてはこれが解決方法。

https://github.com/zeit/next.js/issues/8251#issuecomment-614220305

具体的には @now/next と @now/node のbuildersを併用するというもの。

buildersとは

Vercelにはbuildersという概念があり、これによりどの様にアプリケーションをデプロイするかを決めることができる。 @now/next はNext.jsをデプロイする時に自動的に選択される、Next.js用のbuilders。 @now/nodeはそれ以外のNode.jsアプリケーション。

なぜ併用するのか

ではなぜ併用する必要があるのかと言うと、先程のissueにも書かれているのだが、実はincludeFilesという設定があり、これを利用すると指定したファイルをデプロイ時に無視しないようにし、正常にデプロイ先で読み込むことができるようになる。

ところが、これが現在 @now/next では利用できない。そのため、 @now/node を併用して利用することでOPGの生成のようにファイルを読み込む日強グアある処理だけはそちらで稼働させようという考え。

実際に解決した方法

まず、pages/apiにあった処理を functions/index.ts に移した。Next.js側では使えないため、API Routesも使えない。そのため Next.jsの外に出して別で稼働させる。apiというフォルダに入れれば @now/node で /api/～～ というURLで実行できるのだが、これはNext.jsのAPI Routesと被ってしまうので今回はとりあえず /functions/～～ というURLでアクセスできるようにした。具体的なnow.jsonの設定は下記の通り（最近はGitHub経由でデプロイできるし、独自ドメインや環境変数も管理画面で設定できるのでそもそもnow.json自体なく、今回追加したこれで全部）。

{ "builds": [ { "src": "next.config.js", "use": "@now/next" }, { "src": "functions/index.ts", "use": "@now/node", "config": { "includeFiles": ["fonts/*"] } } ], "routes": [ { "src": "/functions/(.+)", "dest": "/functions/index.ts" } ] }

これでfontsというフォントを入れたフォルダを維持したまま、functionsで始まるURLで @now/node ビルドのサーバーサイド処理にアクセスすることができる。

で、色々端折るけどfunctions/index.tsはこんな感じ。

import * as path from 'path' const { createCanvas, registerFont } = require('canvas') import { NowRequest, NowResponse } from '@now/node' export default function (req: NowRequest, res: NowResponse) { registerFont(path.join('fonts', 'myfont.ttf'), { family: 'myfont', }) const canvas = createCanvas(600, 315) const context = canvas.getContext('2d') context.font = '15px myfont' context.fillStyle = '#424242' context.fillText('hello', 100, 100) const image = canvas.toBuffer() res.writeHead(200, { 'Content-Type': 'image/png', 'Content-Length': image.length, }) res.end(image, 'binary') }

ちなみに、あくまでも @now/next と @now/node は別環境のため、フォントをアップできたからといってNext.js側でそれを利用することは出来ない。今回はOGPだったためURLだけで連携できるのでOKだった。

まとめ

このように、一時期は別サーバーで対応が必要かとも考えたが、なんとかVercelだけで全てを完結させることができたので本当に良かった。Vercel最高。だけどはやくファイルの読み込み関連はいい感じに使えるように改善して欲しいものだ。

ちなみに実際に作ったのはこれ（石を進めたときだけOGPが出る）

リバーシ棋譜ツール

Vercel（元ZeitのNow）にてNext.jsのAPI Routesでnode-canvasを使う

2020-04-22T09:09:44+09:00

Next.jsにはAPI Routesという機能があり、pages/api 配下に通常のページと同じように配置してサーバーサイドの処理を書くことができる。アクセスは /api/パス のような感じ。

export default (req, res) => { res.statusCode = 200 res.setHeader('Content-Type', 'application/json') res.end(JSON.stringify({ name: 'John Doe' })) }

https://nextjs.org/docs/api-routes/introduction

この機能を使ってOGPを実装し、いざVercelにデプロイしてみるとなぜか動かない。ローカルではうまくいったのに。下記のようなエラーが出る。

Error: libuuid.so.1: cannot open shared object file: No such file or directory

GitHubにも同じ現象についてのissueがあり、解決法を書いている人もいた。

https://github.com/zeit/now/issues/3460#issuecomment-574712112

ちょっと分かりづらいのでもうちょっと詳しく解説。

wget https://github.com/jwerre/node-canvas-lambda/raw/master/node12_canvas_lib64_layer.zip unzip -j -d canvas_lib64 node12_canvas_lib64_layer.zip

上記はローカルで実行する。そして出来上がったcanvas_lib64フォルダをコミットしてしまう（now-buildコマンドに混ぜてみたがwgetが無いとどやされた）。

ちなみに上記のzipファイルの配置が時々変わるようなので、その場合は該当のリポジトリを確認。

{ "scripts": { "now-build": "cp canvas_lib64/*so.1 node_modules/canvas/build/Release/" } }

上記は自分のpackage.jsonのscriptsの中にこのnow-buildコマンドを追加するという意味。ただ、これだとうまくいかなかったため下記にした。多分コピーだけになってしまってビルドされなくなってしまったのではないかと思う。

cp canvas_lib64/*so.1 node_modules/canvas/build/Release/ && yarn build

これで動いた。

ただし、VercelにてNext.jsのAPI Routesでは、なんと他のファイルを読み込むことが出来ない。フォントも画像も。そのためこのままだとひたすら描画して作るしかない。

対処法は @now/next と @now/node のbuildersを併用するのだが詳しくは後日別の記事にて。

↓後日の別の記事
Vercel（元ZeitのNow）にてNext.jsでnode-canvasを使ってOGP