Redwoodjs, Fauna 및 Vercel을 사용하여 Serverless Jamstack 사이트 배포

이 튜토리얼은 Redwoodjs, Faunadb 및 Vercel을 사용하여 Jamstack 서버리스 애플리케이션을 구축하도록 안내합니다. 우리는 FAUNA의 GraphQL API를 RedwoodJS 프론트 엔드의 백엔드로 활용하여 Vercel의 한 클릭 배포로 쉽게 배포 할 것입니다.

이 강력한 기술 스택을 사용한 실질적인 경험과 함께 Jamstack 및 Serverless 개념에 대한 깊은 다이빙을 기대하십시오.

레드 우드 앱 구축

Redwoodjs는 React (Frontend), GraphQL (데이터) 및 Prisma (데이터베이스 쿼리)를 결합한 서버리스 응용 프로그램의 프레임 워크입니다. 다른 프론트 엔드 프레임 워크 (들소와 같은)가 존재하지만 Redwoodjs는 성숙하고 잘 확립 된 생태계를 제공합니다.

우리는 스타터 템플릿을 우회하고 기본 레드 우드 프로젝트에서 구축하여 각 구성 요소를 검사합니다. 먼저 원사를 설치하고이 명령을 실행하십시오.

 원사 Redwood-App ./csstricks를 만듭니다
CD CSSTRICK
원사 RW 개발자

프론트 엔드는 localhost:8910 에서, localhost:8911 (Graphiql Playground)의 백엔드에서 실행됩니다. 레드 우드 랜딩 페이지는 localhost:8910 에 나타납니다. (참고 :이 예에서는 RedwoodJS 버전 0.21.0이 사용됩니다. 최신 버전 및 생산 준비에 대한 문서를 참조하십시오.)

프로젝트 구조

Redwoodjs는 구성보다 컨벤션을 우선시하여 구조화 된 프로젝트 레이아웃을 제공합니다.

 <code>├── api │ ├── prisma │ │ ├── schema.prisma │ │ └── seeds.js │ └── src │ ├── functions │ │ └── graphql.js │ ├── graphql │ ├── lib │ │ └── db.js │ └── services └── web ├── public │ ├── favicon.png │ ├── README.md │ └── robots.txt └── src ├── components ├── layouts ├── pages │ ├── FatalErrorPage │ │ └── FatalErrorPage.js │ └── NotFoundPage │ └── NotFoundPage.js ├── index.css ├── index.html ├── index.js └── Routes.js</code>

이 프로젝트는 원사 작업 공간에서 관리하는 web (Frontend) 및 api (백엔드) 디렉토리로 나뉩니다. Prisma를 FAUNADB로 교체하여 prisma 디렉토리와 db.js 의 내용을 제거합니다 (그러나 db.js 파일 유지).

index.html

index.html 파일에는 루트 dom 노드가 포함됩니다 (<div id="redwood-app"></div> ) RECT 응용 프로그램이 렌더링되는 경우. Redwoodjs는 Jamstack 중심이지만 현재 Next.js 또는 Gatsby와 같은 사전 렌더링을 수행하지 않습니다.

index.js

index.js ReactDOM.render() 사용하여 기본 응용 프로그램 구성 요소를 redwood-app DOM 요소로 렌더링합니다. 컨텍스트 관리에 RedwoodProvider 사용하고 오류 처리를 위해 FatalErrorBoundary 사용합니다.

Routes.js

Routes.js Redwood의 라우터를 사용하여 응용 프로그램의 라우팅을 정의합니다.

페이지 만들기

Redwood Cli를 사용하여 페이지를 만들어 봅시다 :

 원사 RW G 페이지 홈 /
원사 RW G 페이지

이는 HomePage 및 AboutPage 에 필요한 파일을 생성합니다. 불필요한 내비게이션 링크를 제거 하여이 페이지를 단순화하십시오.

레이아웃

내비게이션을위한 재사용 가능한 레이아웃 생성 :

 원사 RW G 레이아웃 블로그

HomePage 에 대한 탐색 링크 및 AboutPage 사용을 포함하도록 BlogLayout.js 수정하십시오.<link> 구성 요소. 내비게이션을 통합하기 위해 BlogLayout HomePage 로 가져 와서 AboutPage 로 가져옵니다.

동물 스키마 정의 언어 (SDL)

다음 스키마로 sdl.gql 만듭니다.

 유형 포스트 {
  제목 : 문자열!
  바디 : 끈!
}

유형 쿼리 {
  게시물 : [게시물]
}

이 스키마를 FAUNADB 인스턴스에 업로드하십시오. Faunadb는 중개자 유형을 생성합니다. 우리는 Redwoodjs 스키마에서이를 설명합니다.

Redwoodjs SDL 및 서비스

api/src/graphql/posts.sdl.js 중개 유형 PostPage 를 포함하여 동물 군 스키마를 미러링합니다. api/src/services/posts/posts.js 작성하여 graphql-request 사용하여 동물성 그래프 QL API를 쿼리하십시오. api 디렉토리에 graphql-request 및 graphql 설치해야합니다.

동물 군 승인

api/src/lib/db.js 를 구성하여 환경 변수를 사용하여 인증 헤더에 FAUNADB 시크릿을 포함하도록 구성하십시오.

파종 파종

동물 군을 사용하여 데이터베이스에 샘플 게시물을 추가하십시오.

세포

게시물을 가져오고 표시 할 BlogPostsCell 을 생성하십시오.

 원사 RW 셀 블로그 포스트 생성

BlogPostsCell.js 수정하여 posts 쿼리하고 각 게시물의 제목과 본문을 렌더링하십시오. BlogPostsCell HomePage 로 가져옵니다.

Vercel 배포

프로젝트를 Vercel에 연결하십시오. apiProxyPath "/api"로 설정하려면 netlify.toml (존재하는 경우)을 수정하십시오. Vercel의 환경 변수에 Faunadb 비밀을 추가하십시오. Vercel의 빌드 명령은 Redwoodjs와 완벽하게 작동합니다.

이제 응용 프로그램이 완료되었습니다! 라이브 데모 및 Github 저장소를 사용할 수 있습니다 (여기에는 링크가 삽입됩니다).

위 내용은 Redwoodjs, Fauna 및 Vercel을 사용하여 Serverless Jamstack 사이트 배포의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!