Distribuire API GraphQL/MongoDB utilizzando le funzioni Netlify

Pawel Rybczynski

Software Engineer

Obiettivi Impostazione iniziale Installazione delle dipendenze Iniziamo Per prima cosa, aggiungiamo il file tsconfig.json alla cartella principale: Ora, creiamo src/server.ts per le implementazioni dei server. Poi aggiungiamo due funzioni: una per il server locale e l'altra per lambda. Ok, non abbiamo risolutori o definizioni di tipi, quindi dobbiamo crearne alcuni. Supponiamo che, all'inizio, vogliamo [...]

Obiettivi

Configurare i server locali e lambda.
Collegare entrambi a MongoDB.
Implementare l'autenticazione di base.
Distribuire Apollo senza server GraphQL API con Netlify.
Usare il dattiloscritto.

Impostazione iniziale

npm init -y

Installare le dipendenze

npm install --save typescript graphql aws-lambda @types/aws-lambda

Iniziamo

Per prima cosa, aggiungere il file tsconfig.json alla directory principale:

 {
 "compilerOptions": {
 "target": "es5",
 "module": "commonjs",
 "allowJs": true,
 "strict": true,
 "esModuleInterop": true,
 "skipLibCheck": true,
 "forceConsistentCasingInFileNames": true
 },
 "include": ["src/*.ts", "src/**/*.ts", "src/**/*.js"],
 "exclude": ["node_modules"]
 }

Ora, creiamo src/server.ts per le implementazioni dei server. Quindi aggiungere due funzioni: una per il server locale e la seconda per lambda.

// src/server.ts
importare { ApolloServer as ApolloServerLambda } da "apollo-server-lambda";
importare { ApolloServer } da "apollo-server";


const createLambdaServer = () =>
  nuovo ApolloServerLambda({
    typeDefs,
    resolver,
    introspezione: true,
    playground: true,
    },
  });

const createLocalServer = () =>
  nuovo ApolloServer({
    typeDefs,
    resolver,
    introspezione: true,
    playground: true,
    },
  });

esportare { createLambdaServer, createLocalServer };

Ok, non abbiamo nessun resolver o definizione di tipo, quindi dobbiamo crearne qualcuno. Supponiamo che, all'inizio, vogliamo creare utenti e ricevere informazioni su di loro.

// src/schemi.ts
const { gql } = require("apollo-server-lambda");

const userSchema = gql`
  tipo Utente {
    id: ID!
    email: String!
    name: String!
  }

  tipo Query {
    user(id: ID!): User!
  }

  tipo Mutazione {
    createUser(nome: String!, email: String!, password: String!): User!
  }
`;

Se non ne siete a conoscenza, Apollo ha preparato un tutorial molto bello

Ora creiamo un risolutore di utenti con una query e una mutazione.

// src/resolvers.ts
const userResolver = {
  Query: {
    user: async (parent, args, context, info) => {
      {...}
    },
  },
  Mutazione: {
    createUser: async (parent, args, context, info) => {
      {...}
    },
  },
};

Ma non abbiamo alcun dato... Risolviamo il problema 😉

Non dimenticare di importare la definizione del tipo e il resolver sul server.

// src/server.ts
importare { ApolloServer as ApolloServerLambda } da "apollo-server-lambda";
importare { ApolloServer } da "apollo-server";

importare { typeDefs } da "./schemas";
importare { resolvers } da "./resolvers";

{...}

Connettersi con MongoDB tramite mongoose

Ora è il momento di creare una connessione con il nostro database. In questo caso particolare, si tratta di MongoDB. È gratuito e facile da mantenere. Ma prima di questo, installiamo altre due dipendenze:

npm install --save mongoose dotenv

Il primo passo consiste nel creare un Modello utente.

// src/model.ts
import mongoose, { Document, Error, Schema } da "mongoose";

export type User = Document & {
  _id: string,
  email: stringa,
  nome: stringa,
  password: stringa,
};

eliminare mongoose.connection.models["User"];

const UserSchema: Schema = new Schema({
  email: {
    tipo: String,
    required: true,
    unique: true,
  },
  nome: {
    tipo: String,
    required: true,
    minLunghezza: 3,
    maxLunghezza: 32,
  },
  password: {
    tipo: String,
    required: true,
  },
});

export const userModel = mongoose.model  ("User", UserSchema);

Rendere le password più sicure

La sicurezza prima di tutto! Ora proteggiamo le nostre password con l'hashing.

npm install --save bcrypt @types/bcrypt

Ora, implementare la sicurezza della password nel callback del pre-middleware. Le funzioni pre-middleware vengono eseguite una dopo l'altra, quando ogni middleware chiama il successivo. Per rendere sicure le password, utilizziamo una tecnica che genera un sale e un hash in chiamate di funzione separate.

// src/model.ts
importare bcrypt da "bcrypt";
{...}
const SALT_WORK_FACTOR: number = 10;

UserSchema.pre("save", function (next) {
  const user = this as User;
  if (!this.isModified("password")) return next();

  bcrypt.genSalt(SALT_WORK_FACTOR, function (err, salt) {
    if (err) return next(err);

    bcrypt.hash(password.utente, sale, function (err, hash) {
      if (err) return next(err);
      user.password = hash;
      next();
    });
  });
});
{...}

Aggiungere quindi il metodo comparePasswords a UserSchema:

// src/model.ts
{...}
UserSchema.methods.comparePasswords = function (
  candidatePassword: string,
  cb: (err: Error | null, same: boolean | null) => void
) {
  const user = this as User;
  bcrypt.compare(candidatePassword, user.password, (err, isMatch) => {
    if (err) {
      return cb(err, null);
    }
    cb(null, isMatch);
  });
};
{...}

E, naturalmente, modificare il tipo di utente.

tipo comparePasswordFunction = (
  candidatePassword: string,
  cb: (err: errore, isMatch: booleano) => void
) => void;

export type User = Document & {
  _id: stringa,
  email: stringa,
  nome: stringa,
  password: stringa,
  comparePasswords: comparePasswordFunction,
};

Ora possiamo organizzare una connessione tra i server e i database. MONGODB_URI è una variabile d'ambiente che contiene una stringa di connessione necessaria per creare la connessione. È possibile ottenerla dal pannello del cluster dopo aver effettuato l'accesso al proprio account MongoDB atlas. Inserirla all'interno di .env

// .env
MONGODB_URI = ...;

Ricordate sempre di aggiungere il file a .gitignore. Ottimo! Ora aggiungiamo una funzione che permetta di connettersi al db.

// src/server.ts
import mongoose, { Connection } da "mongoose";
{...}
let cachedDb: Connection;

const connectToDatabase = async () => {
  if (cachedDb) return;

  await mangusta.connect(process.env.MONGODB_URI || "", {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useFindAndModify: false,
    useCreateIndex: true,
  });
  cachedDb = mongoose.connection;
};
{...}

Il contesto è un oggetto condiviso da tutti i risolutori. Per fornirlo, basta aggiungere una funzione di inizializzazione del contesto al costruttore di ApolloServer. Facciamolo.

// src/server.ts
import { userModel } da "./models/user.model";
{...}
const createLambdaServer = async () =>
  nuovo ApolloServerLambda({
    typeDefs,
    resolver,
    introspezione: true,
    playground: true,
    contesto: async () => {
      await connectToDatabase();

      return {
        models: {
          userModel,
        },
      };
    },
  });

const createLocalServer = () =>
  nuovo ApolloServer({
    typeDefs,
    resolver,
    introspezione: true,
    playground: true,
    contesto: async () => {
      await connectToDatabase();

      return {
        models: {
          userModel,
        },
      };
    }
  });

Come si può vedere, passiamo anche modello utente attraverso contesto. Ora possiamo aggiornare il resolver:

// resolvers.ts
const userResolver = {
  Query: {
    user: async (_, { email, name, password }, { models: { userModel } }) => {
      const user = await userModel.findById({ _id: id }).exec();
      restituire l'utente;
    },
  },
  Mutazione: {
    createUser: async (_, { id }, { models: { userModel } }) => {
      const user = await userModel.create({ email, name, password });
      return user;
    },
  },
};

Sembra bello! Ora create un'istanza del server di base:

// src/index.ts
importare { createLocalServer } da "./server";
require("dotenv").config();

const port = process.env.PORT || 4000;

const server = createLocalServer();

server.listen(port).then(({ url }) => {
  console.log(`Server ir in esecuzione a ${url}`);
});

Avviare il server locale con Nodemon

Come ultima cosa prima dell'esecuzione, aggiungere nodemon.json

{
  "watch": ["src"],
  "ext": ".ts,.js",
  "ignore": [],
  "exec": "ts-node --transpile-only ./src/index.ts"
}

Aggiungere lo script a pacchetto.json

"script": {
    "start": "nodemon"
  },

E corri!

npm start

Dovreste ottenere queste informazioni all'interno del terminale:

Server ir in esecuzione a http://localhost:4000/

In caso affermativo, aprire il file http://localhost:4000/ all'interno del browser.

Dovrebbe apparire l'area di gioco GraphQL. Creiamo un nuovo utente!

Date un'occhiata a come appare nel database.

Fantastico! Tutto funziona bene!

Cerchiamo di ottenere alcune informazioni sull'utente.

E aggiungere il campo della password...

Bello! Riceviamo un errore Impossibile interrogare il campo "password" sul tipo "Utente"".. Come si può verificare, non abbiamo aggiunto questo campo nella definizione del tipo di utente. È lì di proposito. Non dobbiamo rendere possibile l'interrogazione di password o altri dati sensibili.

Un'altra cosa... Possiamo ottenere i dati degli utenti senza alcuna autenticazione... non è una buona soluzione. Dobbiamo risolvere il problema.

Ma prima...

Configurare Codegen

Utilizziamo il GraphQL codice per ottenere un tipo di base compatibile, basato sul nostro schema.

npm install --save @graphql-codegen/cli @graphql-codegen/introspection
@graphql-codegen/typescript @graphql-codegen/typescript-resolvers

Creare codegen.yml

sovrascrivere: true
schema: "http://localhost:4000"
genera:
  ./src/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-resolvers"
  ./graphql.schema.json:
    plugins:
      - "introspection"

Aggiungi codegen script per pacchetto.json

"script": {
    "start": "nodemon",
    "codegen": "graphql-codegen --config ./codegen.yml",
  },

Quindi, quando il server locale è in esecuzione, eseguire lo script:

npm run codegen

In caso di successo, verrà visualizzato il messaggio:

  √ Analizza la configurazione
  √ Generare uscite

Se si riceve questa informazione, dovrebbero apparire due file:

graphql.schema.json nella directory principale
graphql.ts nel percorso appena creato src/generato

Siamo più interessati al secondo. Se lo aprite, noterete una bella struttura di tipi.

Ora possiamo migliorare i nostri risolutori:

// src/resolvers.ts
import { Resolvers, Token, User } from "./generated/graphql";

const userResolver: Resolvers = {
  Query: {
    user: async (_, { id }, { models: { userModel }, auth }): Promise => {
      const user = await userModel.findById({ _id: id }).exec();
      restituisce l'utente;
    },
  },
  Mutazione: {
    createUser: async (
      _,
      { email, nome, password },
      { models: { userModel } }
    ): Promessa => {
      const user = await userModel.create({
        email,
        nome,
        password,
      });
      restituisce l'utente;
    },
  },
};

Autenticazione

Quindi, impostiamo una semplice autenticazione basata su token.

npm install --save jsonwebtoken @types/jsonwebtoken

Creare checkAuth per verificare se il token è valido. Aggiungeremo il risultato al contesto, in modo da potervi accedere all'interno dei resolver.

// src/server.ts
import { IncomingHttpHeaders } from "http";
import {
  APIGatewayProxyEvent,
  APIGatewayProxyEventHeaders,
  Context,
} from "aws-lambda";
import jwt from "jsonwebtoken";
{...}
const checkAuth = async ({ token } : APIGatewayProxyEventHeaders | IncomingHttpHeaders ) => {
  if (typeof token === "string") {
    try {
      return await jwt.verify(token, "riddlemethis");
    } catch (e) {
      throw new AuthenticationError(`Your session expired. Sign in again.`);
    }
  }
};
{...}
const createLambdaServer = async (
  { headers }: APIGatewayProxyEvent,
  context: Context
) => {
  return new ApolloServerLambda({
    typeDefs,
    resolvers,
    context: async () => {
      await connectToDatabase();

      const auth = await checkAuth(headers);

      return {
        auth,
        models: {
          userModel,
        },
      };
    },
  });
};

function createLocalServer() {
  return new ApolloServer({
    typeDefs,
    resolvers,
    introspection: true,
    playground: true,
    context: async ({ req: { headers } = {} }) => {
      const auth = await checkAuth(headers);
      await connectToDatabase();

      return {
         auth,
         models: {
          userModel,
        },
      };
    },
  });
}

Inoltre, abbiamo bisogno di un modo per creare tale token. Il modo migliore è implementare una query di login all'interno del nostro resolver.

// resolvers.ts
import { Resolvers, Token, User } da "./generated/graphql";

const userResolver: Resolvers = {
  Query: {
    user: async (_, { id }, { models: { userModel }, auth }): Promise => {
      if (!auth) throw new AuthenticationError("L'utente non è autenticato");

      const user = await userModel.findById({ _id: id }).exec();
      restituire l'utente;
    },
    login: async (
      _,
      { email, password },
      { models: { userModel } }
    ): Promise => {
      const user = await userModel.findOne({ email }).exec();

      if (!user) throw new AuthenticationError("Credenziali non valide");

      const matchPasswords = bcrypt.compareSync(password, user.password);

      if (!matchPasswords) throw new AuthenticationError("Credenziali non valide");

      const token = jwt.sign({ id: user.id }, "riddlemethis", {
        expiresIn: 60,
      });

      restituisce { token };
    },
  },
  Mutazione: {
    createUser: async (
      _,
      { email, nome, password },
      { models: { userModel } }
    ): Promessa => {
      const user = await userModel.create({
        email,
        nome,
        password,
      });
      restituisce l'utente;
    },
  },
};

È inoltre necessario aggiornare le definizioni dei tipi di utente per tipo di token e query di accesso.

tipo Token {
    token: String!
  }

type Query {
    user(id: ID!): Utente!
    login(email: String!, password: String!): Token!
  }

Proviamo ora a ottenere un utente senza token

OK, funziona bene! Prova ad accedere

Proviamo di nuovo a ottenere l'utente, ma questa volta con il token aggiunto agli header

Forte! E se impostiamo le credenziali sbagliate?

Bello!

Prepararsi alla distribuzione

Ultimo passo: distribuire le API serverless con Netlify!

Creare una cartella lambda nella cartella principale e inserire due file al suo interno:

Il primo contiene un gestore AWS. Crea un'istanza di server ApolloServerLambda e
quindi esporre un gestore utilizzando createHandler di tale istanza.

// lambda/graphql.ts
import { APIGatewayProxyEvent, Context } da "aws-lambda";
import { createLambdaServer } da "???";

export const handler = async (
  evento: APIGatewayProxyEvent,
  contesto: Contesto
) => {
  const server = await createLambdaServer(event, context);

  return new Promise((res, rej) => {
    const cb = (err: Error, args: any) => (err ? rej(err) : res(args));
    server.createHandler()(event, context, cb);
  });
};

Per saperne di più.

Il secondo è tsconfig. La parte più importante è il file outDir campo.

// lambda/tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "nodo",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "outDir": "./dist"
  },
  "include": ["./*.ts", "./**/*.ts", "./**/*.js"].
}

Ma c'è un problema. Non possiamo usare /src perché Netlify non può accedere al di fuori della cartella lambda. Quindi è necessario creare un bundle.

npm install --save ncp

È un pacchetto che permette di copiare le directory.

Aggiungi fagotto script per pacchetto.json

"script": {
    "bundle": "ncp ./src ./lambda/bundle",
    "codegen": "graphql-codegen --config ./codegen.yml",
    "start": "nodemon",
  },

Ora se si esegue npm run bundlesi può vedere che nella nuova creazione lambda/bundle abbiamo tutti i file da src/.

Aggiornare il percorso di importazione all'interno di lambda/graphql.ts

// lambda/graphql.ts
import { APIGatewayProxyEvent, Context } da "aws-lambda";
import { createLambdaServer } da "./bundle/server";

{...}

Si può ora aggiungere lambda/bundle dir a .gitignore

Distribuzione con Netlify

Dobbiamo dire a Netlify qual è il comando di compilazione e dove risiedono le nostre funzioni. Per farlo, creiamo netlify.toml file:

// netlify.toml
[build]
  comando = "npm run build:lambda"
  funzioni = "lambda/dist"

Come si può vedere, si tratta della stessa cartella definita come una cartella outDir campo in lambda/tsconfig.json

Ecco come dovrebbe apparire la struttura dell'applicazione (beh... una parte di essa ;))

applicazione
└────lambda
│ └────bundle
│ │ graphql.ts
│ tsconfig.json.ts
└────src
│ └───generato
│ │ │ graphql.ts
│ │ index.ts
│ │ model.ts
│ │ resolvers.ts
│ │ schemi.ts
│ server.ts
│
│ codegen.yml
│ graphql.schema.json
│ netlify.toml
│ nodemon.json
│ tsconfig.json

Aggiungi bundle:lambda script per pacchetto.json

"script": {
    "build:lambda": "npm run bundle && tsc -p lambda/tsconfig.json",
    "bundle": "ncp ./src ./lambda/bundle",
    "codegen": "graphql-codegen --config ./codegen.yml",
    "start": "nodemon",
  },