Next.js 및 TailwindCSS로 빌드된 Simple Redis 캐싱 앱을 Netlify에 5분 만에 배포하는 방법

Netlify는 서버리스 플랫폼을 호스팅하는 인기 있는 정적 사이트입니다. 훨씬 더 확장 가능하고 안전한 방식으로 최신 웹 애플리케이션을 구축, 배포 및 확장하는 널리 사용되는 방법입니다.

Netlify는 개발자가 번거로움 없이 몇 분 안에 웹사이트와 캠페인을 시작할 수 있도록 도와줍니다.Netlify는 자바스크립트와 API를 통합하여 개발자와 콘텐츠 편집자 모두에게 적합한 애플리케이션을 허용하는 JAMstack 사이트를 위해 주로 구축되었습니다.

Netlify의 특징

즉시 사용 가능한 지속적인 통합을 제공합니다.

플랫폼은 Git 리포지토리 배포 지원을 통해 지속적인 배포를 허용합니다.

개발자는 모든 유지 관리 작업을 개발자로부터 추상화하여 개발자가 앱 빌드 및 배포에 집중할 수 있습니다.

플랫폼은 무료 SSL, CDN 및 지속적인 통합을 제공합니다.

DNS 관리 및 SSL 인증서가 내장되어 있습니다.

Netlify는 어떻게 작동합니까?

개발자가 코드를 작성하고 버전 제어 저장소(예: GitHub)에 저장합니다.

새 변경 사항이 리포지토리의 기본 분기에 병합되면 웹훅이 Netlify에 새 사이트를 배포하도록 알립니다.

Netlify는 저장소에서 최신 버전의 앱을 가져오고 빌드 명령을 실행하여 정적 사이트 파일을 생성합니다

.

Netlify는 플러그인과 내부 코드를 사용하여 사이트를 조정하고 모든 페이지를 정적 HTML로 미리 렌더링하고 더 개선합니다.
/

빌드 프로세스가 완료되면 Netlify는 정적 자산을 가져와서 빠른 제공을 위해 글로벌 CDN으로 푸시합니다.

이 자습서에서는 Next.js 및 TailwindCSS로 빌드된 간단한 Redis 캐싱 앱을 Netlify에 5분 만에 배포하는 방법을 볼 수 있습니다.

목차

1단계. 무료 Redis 엔터프라이즈 클라우드 계정 설정

2단계.Netlify CLI 설치

3단계. GitHub 저장소 복제

4단계. CLI를 통해 Netlify에 로그인

5단계. 연속 배포 구성

6단계. GitHub에 변경 사항 푸시

7단계.Netlify 관리 URL 열기

8단계. 환경 변수 추가

9단계. 배포 트리거

Step 10. 앱에 접속하기

1단계. 무료 Redis Enterprise Cloud 계정 설정

https://developer.redis.com/create/rediscloud/을 방문하여 무료 Redis Enterprise Cloud 계정을 만드십시오. Redis Enterprise Cloud 데이터베이스를 생성하는 동안 "RediSearch"모듈을 활성화합니다. 자습서를 완료하면 데이터베이스 끝점 URL 및 암호가 제공됩니다. 나중에 참조할 수 있도록 저장합니다.

제한된 시간 동안 TIGER200을 사용하여 Redis Enterprise Cloud에서 $200 크레딧을 받고 모든 고급 기능을 사용해 보세요!

🎉 Click here to sign up

2단계. Netlify CLI 설치

Netlify의 CLI(명령줄 인터페이스)를 사용하면 명령줄에서 직접 연속 배포를 구성할 수 있습니다. 아래 명령을 실행하여 로컬 랩톱에 Netlify CLI를 설치합니다.

npm install netlify-cli -g

아래 명령을 실행하여 Netlify가 설치되어 있는지 확인하십시오.

 netlify version
 netlify-cli/8.15.3 darwin-x64 node-v14.17.3

3단계. 저장소 복제

 git clone https://github.com/redis-developer/nextjs-redis-netlify

4단계. CLI를 통해 Netlify에 로그인

명령줄을 사용하여 액세스 토큰을 인증하고 얻으려면 다음 명령을 실행하여 Netlify 계정에 로그인합니다.

  netlify login

그러면 Netlify로 로그인하고 Netlify CLI에 대한 액세스 권한을 부여하라는 브라우저 창이 열립니다.
인증이 완료되면 창을 닫고 아래 결과를 표시하라는 메시지가 표시됩니다.

결과:

  Already logged in via netlify config on your machine

  Run netlify status for account details

  To see all available commands run: netlify help

5단계. 지속적 배포 구성

그만큼

netlify init
명령을 사용하면 새 사이트나 기존 사이트에 대한 연속 배포를 구성할 수 있습니다.
또한 존재하지 않는 경우 netlify.toml 파일을 생성할 수 있습니다.

netlify init  

결과

netlify init  
? What would you like to do? +  Create & configure a new site
? Team: Redis
Choose a unique site name (e.g. super-cool-site-by-redisdeveloper.netlify.app) or leave it blank for a random name. You can update the site name later.
? Site name (optional): undefined

Site Created

Admin URL: https://app.netlify.com/sites/super-cool-site-by-redisdeveloper
URL:       https://super-cool-site-by-redisdeveloper.netlify.app
Site ID:   a70bcfb7-b7b1-4fdd-be8b-5eb3b5dbd404

Linked to super-cool-site-by-redis-developer in /Users/redisdeveloper/projects/netlify/basic-caching-demo-nodejs/.netlify/state.json
? Your build command (hugo build/yarn run build/etc): yarn start
? Directory to deploy (blank for current dir): dist
? Netlify functions folder: functions
Adding deploy key to repository...
Deploy key added!

Creating Netlify GitHub Notification Hooks...
Netlify Notification Hooks configured!

Success! Netlify CI/CD Configured!

This site is now configured to automatically deploy from github branches & pull requests

Next steps:

  git push       Push to your git repository to trigger new site builds
  netlify open   Open the Netlify admin URL of your site

위의 단계는 다음 내용으로 netlify.toml 파일을 생성합니다.

 javacript title="netlify.toml"
 [build]
  command = "npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

전체 블로그 자습서 읽기https://developer.redis.com/create/netlify/getting-started-with-netlify