Netlifyのfunctionsにexpress-graphQLをデプロイしてみた

Netlifyでサーバーレスのアーキテクチャを無料で構築できることご存知ですか。今日はNetlifyのfunctionsを使って、express + serverless + GraphQLのHelloWorldを作ってデプロイしてみましょう。

必要なパッケージのインストール

最低限のパッケージはexpress&body-parser&express-graphql&graphql&serverless-httpとなります。

yarn add express body-parser express-graphql graphql serverless-http

フォルダの基本構成

12345- src
  - schema
    - schema.js
  - api.js
- package.json

GraphQLのスキーマの定義

実際はオリジナルのGraphQLより、graphql-yogaのほうがわかりやすいですが、今日はHelloWorldなので、オリジナルのもので定義してみましょう。

schema.js

12345678910111213import { GraphQLSchema, GraphQLObjectType, GraphQLString } from "graphql";

export default new GraphQLSchema({
  query: new GraphQLObjectType({
    name: "HelloWorld",
    fields: () => ({
      message: {
        type: GraphQLString,
        resolve: () => "Hello World!!!",
      }
    })
  })
});

12query: new GraphQLObjectType({
    name: "HelloWorld",

これで、name=HelloWorldというqueryを定義しました。（GraphQLに初めての方はqueryがSqlのSelectと考えればいい）

12message: {
  type: GraphQLString,

このqueryを実行すると、{ message: 'xxxxxx' }をgetできます。messageの型はstringとなります。

resolve: () => "Hello World!!!",

実際にgetできるのは、ここに固定文字列HelloWorld!!!となります。

サーバーレスのexpressサーバ

※注意：この実装方法ならリクエストが来る度、expressサーバの再起動が発生するので、productionモードに向いていないかもしれません。

api.js

12345678910111213141516171819import express from "express";
import bodyParser from "body-parser";
import { graphqlHTTP } from "express-graphql";
import serverless from "serverless-http";

import schema from "./settings/schema";

// expressサーバ
const app = express();

app.use(bodyParser.json());
// 全てのリクエストをexpress-graphqlサーバーへ
app.use("/", graphqlHTTP({
  schema,
  graphiql: true,
}));

// サーバーレス用の関数へ変換
export const handler = serverless(app);

ローカルで起動

netlify-lambdaを利用してローカルでGraphQLサーバ起動してみましょう。まずはパッケージのインストールをしておきましょう。

12# netlify-lambdaをパッケージリストへ追加
yarn add -D netlify-lambda

そしてスクリプトをpackage.jsonへ追加してみましょう。

package.json

123456{
  "scripts": {
    "dev": "netlify-lambda serve src",
    "build": "netlify-lambda build src"
  }
}

次へnetlify.tomlファイルを追加しましょう。

netlify.toml

123[build]
  command = "yarn && yarn build"
  functions = "functions"

最後に、yarn devで起動してみましょう。http://localhost:9000/.netlify/functions/api へアクセスしてみれば、GraphQL-serverへアクセスできるようになりました。

query { message }を実行したら、ちゃんとHelloWorld!!!を取れるでしょう。schema.jsとapi.jsを変更したら、サーバが自動的に再起動され、しばらく経つとGraphQLのquery結果には反映します。とても便利ですね。

redirects

ソースコードをGithubなどにアップしたらNetlifyとすぐ連携できます。しかし、そのままデプロイすると、apiのURLはhttps://xxxxxxxxx.netlify.app/.netlify/functions/apiとなります。Netlifyのredirectsを利用して、apiのURLをもっとわかりやすくしましょう。

netlify.tomlに下記の内容を追加しましょう。

netlify.toml

12345[[redirects]]
  from = "/api/v1/*"
  to = "/.netlify/functions/api/:splat"
  status = 200
  force = true

apiのURLはhttps://xxxxxxxxx.netlify.app/api/v1のわかりやすい形でアクセスできるようになりました。便利ですよね。

完了

これでサーバーレスのGraphQLをNetlify functionsへのデプロイが完了しました。

フルソースコードはGithubへアップロード済みなので、ご参照ください。

https://github.com/thundermiracle/express-graphql-serverless