artful dodger

교묘 한 다저

Google 스프레드 시트와 Google Drive를 사용하여 백엔드로 아트 갤러리를 호스팅하는 Next.js 사이트.

설정

데이터 백엔드

공개적으로 볼 수있는 Google 스프레드 시트를 사용하여 프로젝트를 구동 할 수 있습니다. 이 프로젝트의 데모 사이트는 Google 시트에서 구동됩니다. 유사한 문서를 설정하고 링크를 가진 모든 사람이 "읽을 수있게"할 수 있습니다.

이 예제 문서는 웹의 이미지를 사용합니다 (pexels.com에서 무료로 사용할 수 있음). 그러나 Google 드라이브를 사용하여 이미지를 업로드 할 수 있습니다. 그런 다음 Cloudinary와 같은 CDN을 사용하여 Google 드라이브의 이미지를 자동으로 제공 할 수 있습니다. 또는 웹 서버에 이미지를 "구축 된"사이트를 제공하는 곳에서 디렉토리로 다운로드하십시오.

구성

사이트를 구성하려면 env.local.default 파일을 .env.local 에 복사하여 편집하여 Google 스프레드 시트와 CDN을 사용하는 경우 편집하십시오.

OpenSheet.Vercel.app과 같은 무료 서비스를 사용하여 스프레드 시트를 JSON 엔드 포인트로 변환하거나 scripts/download-images 스크립트를 사용하여 메타 데이터를 public/metadata.json 으로 JSON 파일로 다운로드 할 수 있습니다. public/ 디렉토리에서 metadata.json 파일을 사용하려면 .env.local 파일에서 METADATA_URL 구성을 제거해야합니다.

SET IMAGE_CDN_PREFIX="" 서버에서 로컬로 다운로드 한 이미지를 사용하는 경우 위치에서 이미지를 찾을 수 있도록 메타 데이터 문서의 축소판을 구성하십시오 - ${IMAGE_CDN_PREFIX}/image/${thumbnail} . 썸네일이 image 디렉토리에 사용되지 않으면 썸네일에서 A ../ 접두사를 사용할 수 있습니다.

또한 로컬에서 개발할 때 CDN을 사용하지 않으려면 FORCE_CDN 구성을 제거하십시오.

문제 해결

Nodejs (18+?)의 최신 버전을 사용하면 다음 오류가 발생하면 다음과 같습니다.

  opensslErrorStack: [ ' error:03000086:digital envelope routines::initialization error ' ],
  library: ' digital envelope routines ' ,
  reason: ' unsupported ' ,
  code: ' ERR_OSSL_EVP_UNSUPPORTED '

레거시 OpenSSL 제공 업체를 허용하도록 NODE_OPTIONS env var를 설정할 수 있습니다.

 export NODE_OPTIONS=--openssl-legacy-provider

빌드 및 배포

yarn build 사이트를 빌드합니다. yarn export 사이트를 정적 사이트로 내보낼 것입니다.

이 사이트를 배포하는 방법을 확인하려면 scripts/ 디렉토리의 샘플 배포 스크립트를 참조하십시오. 여기에서 데모 사이트를 볼 수 있습니다.