Sử dụng kết xuất với Serverless Redis

Render là một nền tảng cơ sở hạ tầng mạnh mẽ cung cấp khả năng triển khai tức thì và tự động thay đổi tỷ lệ, trong số những thứ khác. Hôm nay chúng ta sẽ tạo một ứng dụng Next.js đơn giản với Upstash và sau đó triển khai nó trên Render.

LƯU Ý:hướng dẫn này giả định rằng bạn đã thiết lập phiên bản Redis trên Upstash. Nếu bạn chưa làm như vậy, bạn có thể làm điều đó bằng cách sử dụng Upstash Console.

Bắt đầu

Đầu tiên, hãy tạo một ứng dụng Next.js mới và cd vào nó.

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

Tôi đã gọi thư mục upstash-render , bạn có thể đổi tên thành bất kỳ tên nào bạn muốn.

Hãy cài đặt Upstash Redis SDK tiếp theo, điều này sẽ giúp giao tiếp với phiên bản Redis của chúng tôi dễ dàng hơn. Cài đặt bằng npm hoặc Yarn.

Sợi:

yarn add @upstash/redis

npm:

npm i @upstash/redis

Sao chép các biến môi trường

Bây giờ chúng ta đã cài đặt Redis SDK của Upstash, hãy sao chép các biến thích hợp vào một tệp có tên .env.local . Bạn sẽ cần sao chép UPSTASH_REDIS_REST_URL và UPSTASH_REDIS_REST_TOKEN từ Bảng điều khiển Upstash.

UPSTASH_REDIS_REST_URL=YOUR_REST_URL_HERE
UPSTASH_REDIS_REST_TOKEN=YOUR_REST_TOKEN_HERE

H:Tại sao chúng tôi sử dụng .env.local thay vì .env ? A:Chúng tôi đang sử dụng tệp env cục bộ vì bây giờ bạn sẽ có thể lưu trữ các biến môi trường cục bộ và trước khi triển khai trên Render, bạn có thể định cấu hình các biến môi trường.

Xem bộ đếm

Tiếp theo, hãy triển khai một bộ đếm lượt xem đơn giản trên ứng dụng của chúng ta. Mở pages/index.js đầu tiên và nhập SDK mà chúng tôi đã cài đặt trước đó. Phần trên cùng của tệp của bạn sẽ giống như sau:

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();

Ở cuối tệp, hãy sử dụng getServerSideProps để chúng tôi có thể đưa ra yêu cầu đối với cơ sở dữ liệu Upstash của mình ở phía máy chủ.

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

Tuyệt quá! Mỗi khi ai đó yêu cầu một trang, số lượt xem trang cho trang đó sẽ tăng lên một! Bạn cũng có thể sử dụng lại cách triển khai này trên một trang động (tức là [slug].js ). Làm thế nào để chúng tôi phản ánh điều này trong trang web?

Ở đầu trang, ngay dưới mục nhập của bạn, bạn có thể thấy dòng mã sau:

export  default  function  Home() {

Thay đổi dòng này thành:

export  default  function  Home({ views }) {

Chúng tôi trả lại views thông qua đạo cụ thông qua getServerSideProps và chúng tôi có thể sử dụng điều này trong trang web của mình bằng cách chỉ cần tham khảo views Biến đổi. Trong ví dụ này, tôi đã xóa mô tả dưới tiêu đề và thay đổi nó thành như sau:

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

Tuyệt vời, vì vậy bây giờ mỗi khi bạn tải lại trang, lượt xem sẽ tăng lên một!

Đẩy tới GitHub

Hãy đẩy mã của chúng tôi lên GitHub để chúng tôi có thể triển khai Render dễ dàng trong bước tiếp theo. Tạo một kho lưu trữ mới trên GitHub và chạy các lệnh này để tiếp tục.

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

Các lệnh trên sẽ đẩy mã của bạn đến kho lưu trữ GitHub mà bạn vừa tạo! Đây là của tôi.

Triển khai để kết xuất

Được rồi, vậy là bạn đã tạo ứng dụng này bằng Upstash, bây giờ bạn nên triển khai nó như thế nào?

Render có câu trả lời cho câu hỏi này. Hãy tạo một tài khoản miễn phí trên Render để bắt đầu.

Đi tới Trang tổng quan kết xuất để bắt đầu.

Bạn có thể đăng nhập bằng bất kỳ nhà cung cấp dịch vụ xác thực nào của họ hoặc chỉ cần sử dụng email và mật khẩu của bạn.

Bạn sẽ được yêu cầu xác minh email của mình sau khi đăng ký, vì vậy hãy nhấp vào liên kết bạn nhận được trong email sau khi đăng ký để xác minh.

Sau đó, bạn sẽ được chuyển hướng đến trang này. Đảm bảo nhấp vào "Dịch vụ web mới"

Sau khi nhấn "Dịch vụ web mới", bạn có thể dán URL của kho lưu trữ mà bạn đã đẩy mã của mình vào ở bước cuối cùng.

Tiếp theo, chúng tôi sẽ định cấu hình cách chúng tôi muốn ứng dụng của mình được triển khai. Đảm bảo rằng lệnh bắt đầu của bạn được đặt thành yarn start , lệnh xây dựng là yarn; yarn build và rằng môi trường là Node. mọi thứ khác như khu vực là tùy thuộc vào bạn.

Bạn có thể chọn gói miễn phí của Render cho ứng dụng này, nó sẽ không cần quá nhiều tài nguyên để chạy.

Đối với bước cuối cùng, hãy thêm các biến môi trường của chúng ta. Bạn có thể tìm thấy những điều này trong .env.local bạn đã tạo trước đó hoặc Bảng điều khiển Upstash.

Bây giờ, bạn có thể nhấp vào "Tạo Dịch vụ Web"! Chà, chúng ta hãy hy vọng nó hoạt động.

Chờ vài phút để ứng dụng hoàn tất quá trình triển khai, sau đó truy cập URL ở trên cùng bên trái.

Đây là ví dụ tôi đã triển khai:https://upstash-example.onrender.com

Xin chúc mừng!

Bạn đã triển khai thành công ứng dụng Next.js và Upstash của mình trên Render!

Đảm bảo theo dõi @upstash trên Twitter và tham gia máy chủ Discord!

Nguồn dự án: https://github.com/upstash/redis-examples/tree/master/using-render

Bản trình diễn làm việc: https://upstash-example.onrender.com/