Deploy Next.js พร้อม Upstash Serverless Redis บน Render

Render เป็น Infrastructure Platform อันทรงพลัง ให้ Instant Deploys และ Autoscaling รวมถึงฟีเจอร์อื่นๆ วันนี้เราจะสร้าง Next.js Application ง่ายๆ กับ Upstash และ Deploy บน Render

NOTE: Tutorial นี้สมมติว่าคุณตั้งค่า Redis Instance บน Upstash แล้ว หากยัง ไปที่ Upstash Console

Getting Started

สร้าง Next.js App ใหม่และ cd เข้าไป:

npx create-next-app upstash-render && cd upstash-render

ผมตั้งชื่อโฟลเดอร์ upstash-render เปลี่ยนชื่อได้ตามต้องการ

ติดตั้ง Upstash Redis SDK เพื่อสื่อสารกับ Redis Instance ง่ายขึ้น ใช้ npm หรือ Yarn

Yarn:

yarn add @upstash/redis

npm:

npm i @upstash/redis

Copy Environment Variables

คัดลอก Variables ใส่ไฟล์ .env.local ต้องการ UPSTASH_REDIS_REST_URL และ UPSTASH_REDIS_REST_TOKEN จาก Upstash Console

UPSTASH_REDIS_REST_URL=YOUR_REST_URL_HERE
UPSTASH_REDIS_REST_TOKEN=YOUR_REST_TOKEN_HERE

Q: ทำไมใช้ .env.local ไม่ใช่ .env? A: ใช้ Local Env File เพราะเก็บ Environment Variables Local ได้ และก่อน Deploy บน Render สามารถ Config Environment Variables ได้

View Counter

Implement Simple View Counter เปิด pages/index.js Import SDK ที่ติดตั้งไว้ บนสุดของไฟล์ควรเป็น:

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import { Redis } from "@upstash/redis";
const redis = Redis.fromEnv();

ท้ายไฟล์ ใช้ getServerSideProps เพื่อ Request Upstash Database Server-side:

export async function getServerSideProps(ctx) {
    // get current path
    const key = ctx.req.url;
    // get current views
    const views = await redis.get(key);
    // increment views by one
    await redis.incr(key);
    return {
        props: {
            views: views ? parseInt(views) : 0,
        },
    };
}

ทุกครั้งที่ Request Page Page Views เพิ่ม 1! ใช้ได้กับ Dynamic Page เช่น [slug].js แล้วแสดงใน Webpage ยังไง?

บนสุดของ Page ใต้ Imports มีบรรทัด:

export default function Home() {

เปลี่ยนเป็น:

export default function Home({ views }) {

เรา Return views ผ่าน Props จาก getServerSideProps ใช้ใน Website โดยอ้างอิง Variable views ตัวอย่างนี้ ลบ Description ใต้ Heading เปลี่ยนเป็น:

<p className={styles.description}>This page has {views} views</p>

ทุกครั้งที่ Reload Page Views เพิ่ม 1!

Push ไป GitHub

Push Code ไป GitHub เพื่อ Deploy Render ง่ายขึ้น สร้าง Repo ใหม่บน GitHub รัน Commands:

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/your_username/repo_you_just_made.git
git push origin main

Commands ข้างต้น Push Code ไป Repo ที่สร้าง!

Deploy ไป Render

สร้าง App กับ Upstash แล้ว Deploy ยังไง? Render มีคำตอบ

สมัคร Render ฟรี ไป Render Dashboard

Sign In ได้ด้วย Providers ต่างๆ หรือ Email/Password

Verify Email ผ่าน Link ใน Email แล้ว Redirect มาหน้านี้ กด "New Web Service"

หลังกด "New Web Service" วาง URL Repo ที่ Push Code ไปตอนก่อน

Config Deploy: Start Command = yarn start, Build Command = yarn; yarn build, Environment = Node อื่นๆ เช่น Region ตามต้องการ

เลือก Free Plan ของ Render สำหรับ App นี้ ไม่ต้อง Resources มาก

ขั้นสุดท้าย ใส่ Environment Variables หาได้จาก .env.local หรือ Upstash Console

กด "Create Web Service"! รอไม่กี่นาที Deploy เสร็จ เปิด URL มุมซ้ายบน

ตัวอย่างที่ Deploy: https://upstash-example.onrender.com

ยินดีด้วย!

Deploy Next.js และ Upstash Application บน Render สำเร็จ!

Follow @upstash on Twitter และ Join Discord Server!

Project Source: https://github.com/upstash/redis-examples/tree/master/using-render

Working Demo: https://upstash-example.onrender.com/