Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Go beyound static on Netlify

joe_re
September 26, 2018
170

Go beyound static on Netlify

https://netlify-meetup-tokyo.connpass.com/event/100705/

- How do you go beyound static on Netlify.
- Introduce Netlify stacks.
- What are good points on Netlify stacks.

joe_re

September 26, 2018
Tweet

Transcript

  1. Go beyound static
    on Netlify
    2018/09/26 Nelify Tokyo
    @joe_re

    View Slide

  2. Who am I?
    twitter: @joe_re
    github: @joe­re
    ClassDo Inc CTO
    community: Nishinippori.rb, GraphQL Tokyo Organizer

    View Slide

  3. Netlify

    View Slide

  4. What do you feel good
    points of Netlify?

    View Slide

  5. You don't need to call infra engineers for
    hosting your website.
    Easy to setup your project's deploy and CI (just takes few
    clicks!)
    Automatic https
    Easy to set custom domain

    View Slide

  6. Integrate your project's
    repository

    View Slide

  7. Netlify is not only for static sites

    View Slide

  8. Demo
    Admin page for our product

    View Slide

  9. Demo application's raugh image of
    architecture

    View Slide

  10. We use Netlify functions like a BFF
    https://docs.microsoft.com/en­
    us/azure/architecture/patterns/backends­for­frontends

    View Slide

  11. Lumbda functions on Netlify
    You can deploy Lambda functions without your AWS
    account
    You don't need to setup to publish endpoint
    (it'll be enable to handle request automatically via API
    gateway)

    View Slide

  12. Setup functions
    Web Interface
    or Netlify.toml
    [build]
    functions = "./functions"

    View Slide

  13. Functions example
    project_root/functions/hello.js
    exports.handler = function(event, context, callback) {
    callback(null, {
    statusCode: 200,
    body: "Hello, World"
    });
    }
    $ curl http://localhost:8080/.netlify/functions/hello
    Hello, World%

    View Slide

  14. Netlify Identify
    You can manage and authenticate users on Netlify Context
    You can use this just click enable button
    (you don't need to create a database, deploy other modules
    or others..)
    Based on JWT

    View Slide

  15. Authentication by Netlify Identify
    Netlify Identity widget
    https://github.com/netlify/netlify­identity­widget
    Lower level client libraly
    https://github.com/netlify/gotrue­js
    import GoTrue from "gotrue-js";
    auth = new GoTrue({
    APIUrl: "https:///.netlify/identity",
    audience: "",
    setCookie: false
    });
    auth.signup(email, password);

    View Slide

  16. Set roles to user metadata
    Web Interface

    View Slide

  17. Set roles to user metadata
    On Functions(by admin methods)
    exports.handler = async (event, context) => {
    const { identity, user } = context.clientContext;
    const userID = user.sub;
    const userUrl = `${identity.url}/admin/users/${userID}`;
    const adminAuthHeader = "Bearer " + identity.token;
    try {
    return fetch(userUrl, {
    method: "PUT",
    headers: { Authorization: adminAuthHeader },
    body: JSON.stringify({ app_metadata: { roles: ["superstar"] } })
    })
    .then(response => {
    return response.json();
    })
    .then(data => {
    console.log("Updated a user! 204!");
    console.log(JSON.stringify({ data }));
    return { statusCode: 204 };
    })
    .catch(e => return {...});
    } catch (e) { return e; }
    };

    View Slide

  18. Identity and Functions
    export function(event, context, callback) {
    const {identity, user} = context.clientContext;
    // Do stuff...
    }
    context.clientContext includes identify and user property.
    Identify has information to request admin methods.
    User has information of authenticated user.

    View Slide

  19. Example: Check user role in your
    functions
    const allowRoles = ['superstar']
    if (!allowRoles.some(role => context.clientContext.user.app_metadata.roles.includes(role))) {
    callback(null, {
    statusCode: 401,
    body: JSON.stringify({ message: 'Not authorized' })
    }
    }
    //...

    View Slide

  20. You can set different environments each
    stages
    netlify.toml
    # Production context
    [context.production]
    environment = { ACCESS_TOKEN = "super secret", NODE_ENV = "8.0.1" }
    # Deploy Preview context
    [context.deploy-preview.environment]
    environment = { ACCESS_TOKEN: "not so secret" }
    # Specific branch context
    [context.staging] # 'staging' is a branch name
    environment = { ACCESS_TOKEN: "stg secret" }

    View Slide

  21. Local Development
    netlify­lambda
    https://github.com/netlify/netlify­lambda
    read netlify.toml and build or launce server for functions
    $ npx netlify-lambda serve functions
    Starting server
    Function source and publish folder should be in different locations
    Lambda server is listening on 9000
    Request from 127.0.0.1: GET /test
    Response with status 200 in 4 ms.

    View Slide

  22. Conclusion

    View Slide

  23. Today I took about Netlify features for
    Go beyound static on Netlify.

    View Slide

  24. What do you think the best point
    of Netlify Go beyound static
    stacks are?

    View Slide

  25. I think the best point is
    you can create and maintain that
    by only frontend enginners
    contexts.

    View Slide

  26. We can provide our product quickly
    without any long way thanks to Netlify
    stacks

    View Slide

  27. Thank you for your
    attention!

    View Slide