Sample Next.js Liff App deployed on AWS AppRunner

Sample Next.js Liff App deployed on AWS AppRunner

Clock Icon2022.03.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

In this blog, I’m walking you through the steps to deploy a sample Next.js project with the LIFF integration on AWS AppRunner.

AWS AppRunner

AWS AppRunner is a fully managed service that makes it simple and easy to deploy containerised web applications or APIs.

Here are some features:

  • Automatic Builds and deploys.
  • Logging, health checks and monitoring.
  • Simple Auto-scaling and Load Balancing.
  • SSL enabled by default.
  • Step 1: Sample Next.js project set-up

    npx create-next-app@latest
    or
    yarn create next-app
    

    Refer official documentation for more information here.

    Step 2: Line Login integration

    For enabling LINE login, we shall call the LIFF API.

    To install the LIFF SDK via npm and import it into your app, follow these steps:

    npm install --save @line/liff
    or
    yarn add @line/liff
    

    Implementation:

    Import the SDK into your app and Include the following code in your JavaScript or TypeScript file: pages/_app.js

    import '../styles/globals.css';
    import { useEffect } from 'react';
    const liffId = process.env.NEXT_PUBLIC_LIFF_ID;  //add your own LiffID
    function MyApp({ Component, pageProps }) {
    useEffect(() => {
      async function liffLogin() {
        const liff = (await import('@line/liff')).default;
        try {
          await liff.init({ liffId });
        } catch (err) {
          console.error('liff init error', err.message);
        }
        if (!liff.isLoggedIn()) {
          liff.login();
        }
      }
      liffLogin();
    }, []);
    return <Component {...pageProps} />;
    }
    export default MyApp;
    

    Also, check the official documentation of Line developers for more information here.

    For the LiffID:

    This blogs aims at sample Nest.js project with Line intergration which is also called LIFF applications that run on LIFF browser and LINE mini-app. In the above piece of code, we have called liff.init () API with the LiffID to enable the LINE Login authentication.

    To get the LiffId, we should create a provider and channel in the LINE Developers Console. For detailed step-by-step explanation please see here.

    About environment variables:

    Since LiffID is a secret key, I stored the key-value in an .env file. Next 9.4 has built-in support for environment variables i.e. .env files. For Next.js's environment variables specification make sure to proceed your keys with NEXT_PUBLIC_.

    As an example for local development, create a .env.local file. Add the key-value pair.

    NEXT_PUBLIC_LIFF_ID=16*********k
    

    While referring the key-value in the code, do as the following:

    const liffId = process.env.NEXT_PUBLIC_LIFF_ID;
    

    For more information about environment variables here .

    Step 3: Deploy on AppRunner

    Login to your AWS account

    Search for AppRunner. Create a new App Runner service.

    Source and Deployment

    Add the repository type and accordingly add the source code provider. If the repository type is Container registry, add the Type of ECR provider and add the container image URI. In our case the repository type is a source code repository, hence I linked my Github. Make sure you specify the correct repository and branch.

    To link your Github account

    Click on add new and it'll now create a connection with GitHub using AWS CodeStar.

    Deployment Settings

    Set it to automatic or manual. I set it to automatic, so on every push to the branch specified a new version is launched automatically.

    Build Configure Settings

    Here, you can either configure all settings in the console manually or attach a file.

    • If configuring in the console, simply fill in the right commands.

    • If attaching a file. Add apprunner.yaml file to the root of your repository as shown below.

    version: 1.0
    runtime: nodejs12
    build:
     commands:
       build:
         - yarn
         - yarn build
    run:
     command: yarn dev
     network:
       port: 3000
    

    Configure Service

    We can configure things like computing CPU, memory, environmental variables, auto-scaling, health checks, and tags. For the current example, I have kept all the settings as default. Except for naming the service and setting environment variables.

    Review and Create

    This step takes a few minutes as App Runner dockerizes our app and runs it on the server. If you are using a docker image already then this step will be instant.

    Congratulations, its Deployed!

    Our application has been deployed and running successfully. We can access our service via the default domain URL given by the App Runner.

    Thanks for reading, I hope it was helpful.

    Share this article

    facebook logohatena logotwitter logo

    © Classmethod, Inc. All rights reserved.