Render는 무엇보다도 즉각적인 배포 및 자동 확장을 제공하는 강력한 인프라 플랫폼입니다. 오늘 우리는 Upstash로 간단한 Next.js 애플리케이션을 만든 다음 Render에 배포할 것입니다.
참고:이 튜토리얼에서는 이미 Upstash에 Redis 인스턴스를 설정했다고 가정합니다. 아직 수행하지 않은 경우 Upstash 콘솔을 사용하여 수행할 수 있습니다.
시작하기
먼저 새로운 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:
npm i @upstash/redis
환경 변수 복사
이제 Upstash의 Redis SDK를 설치했으므로 적절한 변수를 .env.local이라는 파일에 복사해 보겠습니다. . UPSTASH_REDIS_REST_URL을 복사해야 합니다. 및 UPSTASH_REDIS_REST_TOKEN Upstash 콘솔에서.
UPSTASH_REDIS_REST_URL=YOUR_REST_URL_HERE
UPSTASH_REDIS_REST_TOKEN=YOUR_REST_TOKEN_HERE
Q:.env.local을 사용하는 이유 .env 대신 ?A:지금은 환경 변수를 로컬에 저장할 수 있고 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,
},
};
}
엄청난! 누군가가 페이지를 요청할 때마다 해당 페이지의 페이지 조회수가 1씩 증가합니다! 동적 페이지에서도 이 구현을 재사용할 수 있습니다(예:[slug].js ). 그런데 이것을 웹페이지에 어떻게 반영합니까?
페이지 상단의 가져오기 바로 아래에서 다음 코드 행을 볼 수 있습니다.
export default function Home() {
이 줄을 다음으로 변경:
export default function Home({ views }) {
views를 반환합니다. getServerSideProps를 통해 소품을 통해 , 그리고 단순히 views를 참조하여 웹사이트에서 이것을 사용할 수 있습니다. 변하기 쉬운. 이 예에서는 제목 아래에 있는 설명을 제거하고 다음과 같이 변경했습니다.
<p className={styles.description}>This page has {views} views</p>
좋습니다. 이제 페이지를 새로고침할 때마다 조회수가 1씩 올라갑니다!
GitHub로 푸시
다음 단계에서 Render에 쉽게 배포할 수 있도록 코드를 GitHub에 푸시해 보겠습니다. 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에서 무료 계정을 만들어 보겠습니다.
시작하려면 렌더 대시보드로 이동하세요.
인증 제공업체 중 하나를 사용하여 로그인하거나 이메일과 비밀번호를 사용하면 됩니다.
가입 후 이메일 인증을 요청하게 되므로 가입 후 이메일에 포함된 링크를 클릭하여 인증하세요.
그러면 이 페이지로 리디렉션됩니다. "새 웹 서비스"를 클릭해야 합니다.
"새 웹 서비스"를 누른 후 마지막 단계에서 코드를 푸시한 저장소의 URL을 붙여넣을 수 있습니다.
다음으로 앱 배포 방법을 구성합니다. 시작 명령이 yarn start로 설정되어 있는지 확인하십시오. , 빌드 명령은 yarn; yarn build , 그리고 환경은 Node.js입니다. 지역과 같은 기타 사항은 귀하에게 달려 있습니다.
이 앱에 대해 Render의 무료 플랜을 선택할 수 있습니다. 실행하는 데 리소스가 너무 많이 필요하지 않습니다.
마지막 단계로 환경 변수를 추가해 보겠습니다. .env.local에서 찾을 수 있습니다. 이전에 만든 또는 Upstash 콘솔입니다.
이제 "웹 서비스 만들기"를 클릭할 수 있습니다! 와우, 효과가 있기를 바랍니다.
앱 배포가 완료될 때까지 몇 분 정도 기다린 다음 왼쪽 상단의 URL을 방문하세요.
내가 배포한 예는 다음과 같습니다. https://upstash-example.onrender.com
축하합니다!
Render에 Next.js 및 Upstash 애플리케이션을 성공적으로 배포했습니다!
Twitter에서 @upstash를 팔로우하고 Discord 서버에 가입하세요!
프로젝트 출처: https://github.com/upstash/redis-examples/tree/master/using-render
작업 데모: https://upstash-example.onrender.com/