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フォルダの基本構成
- src
- schema
- schema.js
- api.js
- package.jsonGraphQLのスキーマの定義
実際はオリジナルのGraphQLより、graphql-yogaのほうがわかりやすいですが、今日はHelloWorldなので、オリジナルのもので定義してみましょう。
import { GraphQLSchema, GraphQLObjectType, GraphQLString } from "graphql";
export default new GraphQLSchema({
query: new GraphQLObjectType({
name: "HelloWorld",
fields: () => ({
message: {
type: GraphQLString,
resolve: () => "Hello World!!!",
}
})
})
});query: new GraphQLObjectType({
name: "HelloWorld",これで、name=HelloWorldというqueryを定義しました。（GraphQLに初めての方はqueryがSqlのSelectと考えればいい）
message: {
type: GraphQLString,このqueryを実行すると、{ message: 'xxxxxx' }をgetできます。messageの型はstringとなります。
resolve: () => "Hello World!!!",実際にgetできるのは、ここに固定文字列HelloWorld!!!となります。
サーバーレスのexpressサーバ
※注意：この実装方法ならリクエストが来る度、expressサーバの再起動が発生するので、productionモードに向いていないかもしれません。
import 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サーバ起動してみましょう。まずはパッケージのインストールをしておきましょう。
# netlify-lambdaをパッケージリストへ追加
yarn add -D netlify-lambdaそしてスクリプトをpackage.jsonへ追加してみましょう。
{
"scripts": {
"dev": "netlify-lambda serve src",
"build": "netlify-lambda build src"
}
}次へnetlify.tomlファイルを追加しましょう。
[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に下記の内容を追加しましょう。
[[redirects]]
from = "/api/v1/*"
to = "/.netlify/functions/api/:splat"
status = 200
force = trueapiのURLはhttps://xxxxxxxxx.netlify.app/api/v1のわかりやすい形でアクセスできるようになりました。便利ですよね。
完了
これでサーバーレスのGraphQLをNetlify functionsへのデプロイが完了しました。
フルソースコードはGithubへアップロード済みなので、ご参照ください。
https://github.com/thundermiracle/express-graphql-serverless
