Sample Next.js Liff App deployed on AWS AppRunner

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:

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.