Triển khai Next.js với Upstash Serverless Redis trên Render

Render là một nền tảng hạ tầng mạnh mẽ cung cấp triển khai tức thì và tự động mở rộng, 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à triển khai nó trên Render.

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

Bắt đầu

Trước hết, hãy tạo app Next.js mới và cd vào nó.

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

Tôi đặt tên thư mục upstash-render, bạn có thể đổi tên tùy thích.

Hãy cài Upstash Redis SDK tiếp theo, điều này sẽ làm cho việc giao tiếp với instance Redis dễ dàng hơn. Cài với npm hoặc Yarn.

Yarn:

yarn add @upstash/redis

npm:

npm i @upstash/redis

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

Bây giờ chúng ta đã cài Upstash Redis SDK, hãy sao chép biến thích hợp vào file .env.local. Bạn sẽ cần sao chép UPSTASH_REDIS_REST_URL và UPSTASH_REDIS_REST_TOKEN từ Upstash Console.

UPSTASH_REDIS_REST_URL=YOUR_REST_URL_HERE
UPSTASH_REDIS_REST_TOKEN=YOUR_REST_TOKEN_HERE

Q: Tại sao dùng .env.local thay vì .env? A: Chúng ta dùng file env cục bộ vì bạn có thể lưu biến môi trường cục bộ cho bây giờ, và trước khi triển khai trên Render, bạn có thể cấu hình biến môi trường.

Bộ đếm lượt xem

Hãy triển khai một bộ đếm lượt xem đơn giản trên ứng dụng. Mở pages/index.js trước và import SDK chúng ta cài trước. Đầu file nên trông như thế này:

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 file, hãy dùng getServerSideProps để có thể tạo request đến cơ sở dữ liệu Upstash phía server.

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! Mỗi khi ai đó request một trang, lượt xem trang đó tăng lên một! Bạn có thể tái sử dụng triển khai này trên trang động (ví dụ [slug].js). Làm sao phản ánh điều này trên trang web?

Ở đầu trang, ngay dưới import, bạn thấy dòng mã sau:

export default function Home() {

Thay dòng này thành:

export default function Home({ views }) {

Chúng ta trả views qua props thông qua getServerSideProps, và có thể dùng trong website bằng cách tham chiếu biến views. Trong ví dụ này, tôi xóa mô tả dưới tiêu đề, và thay bằng:

This page has {views} views

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

Đẩy lên GitHub

Hãy đẩy mã lên GitHub để triển khai lên Render dễ dàng ở bước sau. Tạo repository mới trên GitHub và chạy các lệnh này để tiến hành.

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 repository GitHub bạn vừa tạo! Đây là của tôi.

Triển khai lên Render

Được, bạn đã làm app này với Upstash, bây giờ nên triển khai như thế nào?

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

Đi đến Render Dashboard để bắt đầu.

Bạn có thể đăng nhập với bất kỳ provider xác thực nào của họ hoặc đơn giản dùng email và mật khẩu.

Bạn sẽ được yêu cầu xác minh email sau khi đăng ký, nên nhấp vào link bạn nhận được trong email sau khi đăng ký để xác minh.

Bạn sẽ được chuyển hướng đến trang này. Đảm bảo nhấp "New Web Service"

Sau khi nhấp "New Web Service", bạn có thể dán URL của repository bạn đẩy mã ở bước trước.

Tiếp theo, chúng ta sẽ cấu hình cách triển khai app. Đảm bảo start command là yarn start, build command là yarn; yarn build, và environment là Node. các thứ khác như region tùy bạn.

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

Đối với bước cuối, hãy thêm biến môi trường. Bạn có thể tìm thấy chúng trong .env.local bạn tạo trước hoặc Upstash Console.

Bây giờ, bạn có thể nhấp "Create Web Service"! Cố lên, hy vọng nó chạy.

Đợi vài phút để app triển khai xong, rồi truy cập URL ở góc trên bên trái.

Ví dụ tôi triển khai: https://upstash-example.onrender.com

Chúc mừng!

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

Đảm bảo follow @upstash trên Twitter, và tham gia Discord server!

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

Demo hoạt động: https://upstash-example.onrender.com/