SupaBase를 사용하여 NextJS 웹 앱을 강화하는 방법

간단한 의제 웹 사이트를 구축해 달라는 친구/고객의 요청이 하나 있습니다. 요건 이렇습니다, (여기서 어려운건 없습니다😎)

모바일 퍼스트

사용자가 안건을 보고 스크롤하여 볼 수 있으며, 링크를 클릭하면 상세 부분으로 리디렉션됩니다

.

몇 가지 UI 요구 사항(글꼴, 글꼴 크기, 색상 등)

다시한번 말씀드리지만 어려운건 없습니다. 😎 여기서 유일한 관심사는:

빨리 배송하는 방법,

동시에 좋은 유연성을 가지고 변화를 가질 수 있도록,

성능이 매우 우수합니다.

JAMStack은 매우 유명하며 더 나은 유연성을 얻기 위해 Headless CMS를 사용할 수 있습니다. 더 나은 유연성을 위해 여기에서 BaaS를 사용하기로 결정했습니다. ( Read more about Comparison between BaaS and JAMStack ) SupaBase는 안정적이고 널리 사용되는 옵션 중 하나입니다. 실시간 기능과 AWS S3 호환 스토리지 서비스를 갖춘 PostgresDB로 구동되는 BaaS입니다.

React/NextJS는 내가 수년 동안 사용해 온 프런트 엔드 스택으로, 특히 NextJS Server Side Rendering + Vercel Edge Computing과 함께 인기 있고 매우 우수한 성능을 제공합니다.

Vercel(일명 Zeit)은 NextJS의 배후에 있는 회사로 개발자 친화적인 프런트 엔드 애플리케이션 호스트 플랫폼입니다. CDN, 에지 컴퓨팅, 파이프라인, Github 통합 등과 같은 추가 기능이 내장되어 있습니다.

백엔드 => SupaBase

수파베이스는 새 프로젝트를 설정할 때 선택할 수 있는 지역이 많습니다. 2GB 대역폭과 500Mb DB 저장소를 가진 사용자를 위한 프리 티어가 있습니다. 많은 양은 아니지만 단일 의제 웹 애플리케이션에는 충분합니다.



각 요청이 Supsbase를 통해 진행되는 경우 무료 계층 리소스가 사라지기 쉽습니다. 여기서는 Next.js를 사용하여 문제를 해결합니다. More about SupaBase Pricing

프런트 엔드 => 다음 + Vercel

NextJS의 유명한 SSR(Server Side Rendering) 기능을 기반으로 Static Content Generator Framework로 SSG(Static Site Generation)를 지원합니다. SSG 사이트가 구축될 때 한 번만 요청하므로 Supabase의 대역폭을 많이 절약할 수 있습니다.

기타 팁

수파베이스를 무료로 사용하는 팁

수파베이스는 무료 요금제 사용자에게 한 가지 제한이 있습니다.

Free projects are paused after 1 week of inactivity.

Supebase의 주간 비활성 일시 중지를 우회하는 방법은 무엇입니까?

이에 대한 해결책은 Github Schedule Action을 사용하여 일주일에 3일 supabase 프로젝트를 사용하는 것입니다.

# .github/workflows/Health.yml
name: Health Check
on:
  schedule:
    # every Mon, Wed, Fri
    - cron: "30 5 * * 1,3,5"
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: Ping the Ping
      run: wget https://xxxxxx.vercel.app/api/ping 

github 작업 구성에 대한 위의 yaml 코드에서 Supabase에 연결하는 엔드포인트API/Ping가 필요합니다.

// ping.ts
export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  MyPingFunction().then((data)=> {
    res.status(200).json({ result: 'Echo' })
  }).catch((e)=>{
    res.status(500).json({ result: 'error, not healthy' })
  })
}

공개 이미지의 외부 참조를 피하는 방법

항상 일부 이미지가 있으며 공개 URL이 없는 것이 좋습니다.
이는 AWS S3가 이를 관리하는 방식과 같이 서명된 URL(만료 날짜 포함)로 해결할 수 있습니다.

사실, there is another way 그것을 해결합니다.

use Base64에 이미지를 문자열로 저장합니다.

Please note, users are still able to view and download images.

base64 문자열을 파일로 생성하려면:

openssl base64 -in <infile> -out <outfile>

요약

참조:

Supabase

AWS S3 Compatible Storage API

NextJS

Vercel

기술팀(@TechTim42) 팔로우

❤️Learn, Share and Grow => ☘Passionate about Dev Experience Improvement, Software Engineering and Cloud Architecture.