[ 目次 ]

• はじめに
• プロジェクト作成
• netlify-lambdaのインストール
• Apollo Serverをインストール
• Lambdaのソースを用意する
• package.jsonを用意
• netlify.tomlを用意
• ローカル起動
• Netlifyにデプロイ&確認
• 【補足】.gitignoreを設定
• 最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回はNetlifyのLambda Functionsを利用して、Apollo Serverを立ち上げGraphQLを試していきます。
NetlifyのLambda Functionsについては、過去の記事で説明しました。ご確認ください。

NetlifyでLambda Functionsを試す

※ npm, yarnなどnode環境が構築されていることを前提とします

プロジェクト作成

今回はReactベースのプロジェクトにLambda Functionsを用意していきます。
今後、ReactでApolloを利用してGraphQLアクセスと試す為です。本記事ではReactについては触れません。ご了承ください。

$ npx create-react-app netlify-lambda-apollo-server
$ cd /app/netlify-lambda-apollo-server
$ 
$ # git initでgitリポジトリ化しておきます
$ git init

netlify-lambdaのインストール

netlify-lambda はローカルで確認するためのサーバーを提供しています。
また、NetlifyにLambdaをデプロイする時のビルドにも利用するコマンドです。

■ npmを利用する場合

$ npm install --save netlify-lambda

■ yarnを利用する場合

$ yarn add netlify-lambda

Apollo Serverをインストール

apollo-server-lambdaを利用してApollo Serverを用意します。

■ npmを利用する場合

$ npm install --save apollo-server-lambda graphql

■ yarnを利用する場合

$ yarn add apollo-server-lambda graphql

Apollo Serverについては以下もご確認ください。

Apollo Docs

Lambdaのソースを用意する

src/lambdaにlambda functionのソースを配置します。

$ mkdir -p src/lambda
$ touch src/lambda/graphql.js

サンプルとしてsrc/lambda/graphql.jsの中身を以下のように定義します。

// src/lambda/graphql.js
import { ApolloServer, gql } from 'apollo-server-lambda'

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: (root, args, context) => {
      return "Hello, world!";
    }
  }
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
  introspection: true,
  playground: true
});

exports.handler = server.createHandler();

package.jsonを用意

起動スクリプトの設定などpackage.jsonを以下のように修正します。

{
  "name": "netlify-lambda-apollo-server",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@netlify/zip-it-and-ship-it": "^0.3.1",
    "apollo-server-lambda": "^2.5.1",
    "bufferutil": "^4.0.1",
    "encoding": "^0.1.12",
    "graphql": "^14.3.1",
    "netlify-lambda": "^1.4.13",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "utf-8-validate": "^5.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "start:lambda": "netlify-lambda serve src/lambda",
    "build": "react-scripts build",
    "build:lambda": "netlify-lambda build src/lambda",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

netlify.tomlを用意

netlify.toml ファイルにNetlifyの設定とLambda functionsの設定を記載します。
以下のファイルを作成してください。

[build]
  command = "npm run build:lambda && npm run build"
  functions = "functions"
  publish = "build"

functionsで設定したディレクトリに、buildしたjsが配置されます。

ローカル起動

以下のコマンドから起動します

$ npm run start:lambda
or
$ yarn start:lambda

http://localhost:9000/graphql
↑
こちらのURLからGraphQL Playgroundが表示されれば成功です。

Netlifyにデプロイ&確認

githubにpushしてNetlifyにデプロイします。

https://netlify-lambda-apollo-server.netlify.com/.netlify/functions/graphql

ローカル同様 GraphQL Playground が表示できれば成功です

【補足】.gitignoreを設定

今回は以下のようなファイルにしました。

# See https://help.github.com/ignore-files/ for more about ignoring files.

# dependencies
/node_modules


/functions

/.netlify

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

最後に

今回のApollo ServerをきっかけにGraphQLの知識を高めていきたいと思います。
今回のソースは以下になります。

nakanakamu0828/netlify-lambda-apollo-server