การใช้ Render ด้วย Serverless Redis

Render เป็นแพลตฟอร์มโครงสร้างพื้นฐานที่มีประสิทธิภาพซึ่งนำเสนอการปรับใช้ทันทีและการปรับขนาดอัตโนมัติ เหนือสิ่งอื่นใด วันนี้เราจะสร้างแอปพลิเคชัน Next.js อย่างง่ายด้วย Upstash จากนั้นจึงปรับใช้บน Render

หมายเหตุ:บทแนะนำนี้ถือว่าคุณได้ตั้งค่าอินสแตนซ์ Redis บน Upstash แล้ว หากคุณยังไม่ได้ดำเนินการ คุณสามารถทำได้โดยใช้ Upstash Console

เริ่มต้นใช้งาน

ขั้นแรก มาสร้างแอป Next.js ใหม่และ cd เข้าไป

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

ฉันเรียกโฟลเดอร์ upstash-render คุณสามารถเปลี่ยนชื่อเป็นสิ่งที่คุณต้องการได้

เรามาติดตั้ง Upstash Redis SDK กัน ซึ่งจะทำให้ง่ายต่อการสื่อสารกับอินสแตนซ์ Redis ของเรา ติดตั้งด้วย npm หรือ Yarn.

เส้นด้าย:

yarn add @upstash/redis

น.:

npm i @upstash/redis

คัดลอกตัวแปรสภาพแวดล้อม

ตอนนี้เราได้ติดตั้ง Redis SDK ของ Upstash แล้ว เรามาคัดลอกตัวแปรที่เหมาะสมลงในไฟล์ชื่อ .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

ถาม:เหตุใดเราจึงใช้ .env.local แทน .env ?A:เรากำลังใช้ไฟล์ env ในเครื่องเพราะคุณจะสามารถเก็บตัวแปรสภาพแวดล้อมไว้ภายในเครื่องได้ในตอนนี้ และก่อนที่คุณจะปรับใช้บน Render คุณสามารถกำหนดค่าตัวแปรสภาพแวดล้อมได้

ดูเคาน์เตอร์

ลองใช้ตัวนับมุมมองแบบง่ายในแอปพลิเคชันของเราต่อไป เปิด pages/index.js ก่อนและนำเข้า 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 เพื่อให้เราสามารถส่งคำขอไปยังฐานข้อมูล Upstash ของเราทางฝั่งเซิร์ฟเวอร์ได้

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,
    },
  };
}

ยอดเยี่ยม! ทุกครั้งที่มีคนขอหน้า การดูหน้าของหน้านั้นจะเพิ่มขึ้นทีละหน้า! คุณสามารถใช้การใช้งานนี้ซ้ำบนไดนามิกเพจได้เช่นกัน (เช่น [slug].js ). เราจะสะท้อนสิ่งนี้ในหน้าเว็บได้อย่างไร

ที่ด้านบนของหน้า ใต้การนำเข้า คุณจะเห็นบรรทัดโค้ดต่อไปนี้:

export  default  function  Home() {

เปลี่ยนบรรทัดนี้เป็น:

export  default  function  Home({ views }) {

เราส่งคืน views ผ่านอุปกรณ์ประกอบฉากผ่าน getServerSideProps และเราสามารถใช้สิ่งนี้ในเว็บไซต์ของเราโดยเพียงแค่อ้างอิง views ตัวแปร. ในตัวอย่างนี้ ฉันได้ลบคำอธิบายใต้หัวเรื่อง และเปลี่ยนเป็นดังต่อไปนี้:

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

เยี่ยมมาก ตอนนี้ทุกครั้งที่คุณโหลดหน้าเว็บใหม่ จำนวนการดูจะเพิ่มขึ้นหนึ่งรายการ!

กำลังพุชไปที่ GitHub

มาพุชรหัสของเราไปที่ GitHub เพื่อให้เราสามารถปรับใช้กับ Render ได้อย่างง่ายดายในขั้นตอนต่อไป สร้างที่เก็บใหม่บน GitHub และเรียกใช้คำสั่งเหล่านี้เพื่อดำเนินการต่อ

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

คำสั่งข้างต้นจะผลักรหัสของคุณไปยังที่เก็บ GitHub ที่คุณเพิ่งสร้างขึ้น! นี่คือของฉัน

กำลังปรับใช้เพื่อแสดงผล

เอาล่ะ คุณได้สร้างแอปนี้ด้วย Upstash แล้ว คุณควรปรับใช้แอปนี้อย่างไร

Render มีคำตอบสำหรับคำถามนี้ มาสร้างบัญชีฟรีบน Render เพื่อเริ่มต้น

ไปที่ Render Dashboard เพื่อเริ่มต้น

คุณสามารถลงชื่อเข้าใช้ด้วยผู้ให้บริการตรวจสอบสิทธิ์ของตน หรือเพียงแค่ใช้อีเมลและรหัสผ่านของคุณ

ระบบจะขอให้คุณยืนยันอีเมลเมื่อลงชื่อสมัครใช้ ดังนั้นให้คลิกลิงก์ที่ได้รับในอีเมลเมื่อลงชื่อสมัครใช้เพื่อยืนยัน

จากนั้นคุณจะถูกเปลี่ยนเส้นทางไปยังหน้านี้ อย่าลืมคลิก "บริการเว็บใหม่"

หลังจากกดปุ่ม "New Web Service" แล้ว คุณสามารถวาง URL ของที่เก็บที่คุณส่งรหัสไปในขั้นตอนสุดท้ายได้

ต่อไป เราจะกำหนดค่าว่าเราต้องการให้แอปของเราใช้งานได้อย่างไร ตรวจสอบให้แน่ใจว่าคำสั่ง start ของคุณตั้งค่าเป็น yarn start คำสั่ง build คือ yarn; yarn build และสภาพแวดล้อมนั้นเป็นโหนด สิ่งอื่นๆ เช่น ภูมิภาคขึ้นอยู่กับคุณ

คุณสามารถเลือกแผนฟรีของ Render สำหรับแอปนี้ได้ โดยไม่จำเป็นต้องใช้ทรัพยากรมากเกินไปในการทำงาน

สำหรับขั้นตอนสุดท้าย ให้เพิ่มตัวแปรสภาพแวดล้อมของเรา คุณสามารถค้นหาสิ่งเหล่านี้ได้ใน .env.local คุณทำไว้ก่อนหน้านี้หรือ Upstash Console

ตอนนี้คุณสามารถคลิก "สร้างบริการเว็บ"! ว้าว หวังว่าจะได้ผล

รอสักครู่เพื่อให้แอปใช้งานได้เสร็จสิ้น จากนั้นไปที่ URL ที่ด้านบนซ้าย

นี่คือตัวอย่างที่ฉันปรับใช้:https://upstash-example.onrender.com

ยินดีด้วย!

คุณปรับใช้แอปพลิเคชัน Next.js และ Upstash บน Render สำเร็จแล้ว!

อย่าลืมติดตาม @upstash บน Twitter และเข้าร่วมเซิร์ฟเวอร์ Discord!

ที่มาของโครงการ: https://github.com/upstash/redis-examples/tree/master/using-render

การสาธิตการทำงาน: https://upstash-example.onrender.com/