artful dodger

芸術的なドジャー

GoogleスプレッドシートとGoogleドライブをバックエンドとして使用してアートギャラリーをホストする次のサイト。

設定

データバックエンド

このプロジェクトは、公開可能なGoogleスプレッドシートを使用して駆動できます。このプロジェクトのデモサイトは、ここのGoogleシートを搭載しています。同様のドキュメントをセットアップして、リンクを持つすべての人が「読みやすく」することができます。

この例ドキュメントでは、Webからの画像を使用しています（Pexels.comで無料で入手可能）。ただし、Googleドライブを使用して画像をアップロードできます。その後、CloudinaryのようなCDNを使用して、Googleドライブの画像を自動的に提供できます。または、「構築された」サイトにサービスを提供する場所からディレクトリに画像をWebサーバーにダウンロードします。

構成

サイトを構成するには、 env.local.defaultファイルを.env.localにコピーし、編集して、使用している場合はGoogleスプレッドシートとCDNを指すように編集します。

opensheet.vercel.appなどの無料サービスを使用してスプレッドシートをJSONエンドポイントに変換するか、 scripts/download-imagesスクリプトを使用して、JSONファイルとしてpublic/metadata.jsonにメタデータをダウンロードできます。 public/ directoryからmetadata.jsonファイルを使用する場合は、 .env.localファイルからMETADATA_URL構成を削除する必要があります。

IMAGE_CDN_PREFIX=""を設定します。サーバーでローカルダウンロードされた画像を使用している場合。メタデータドキュメントでサムネイルを構成して、画像を場所に見つけることができるように - ${IMAGE_CDN_PREFIX}/image/${thumbnail} 。サムネイルがimageディレクトリに住んでいない場合は、サムネイルで../プレフィックスを使用できます。

また、ローカルで開発するときにCDNを使用しない場合は、 FORCE_CDN構成を削除します。

トラブルシューティング

NodeJSの新しいバージョン（18+？）を使用して、次のエラーに遭遇した場合：

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

NODE_OPTIONS env varを設定して、レガシーOpenSSLプロバイダーを許可できます。

 export NODE_OPTIONS=--openssl-legacy-provider

ビルドと展開

yarn buildサイトをビルドします。 yarn exportサイトを静的サイトにエクスポートします。

このサイトを展開する方法を確認するには、 scripts/ディレクトリのサンプル展開スクリプトを参照してください。ここでデモサイトを見ることができます。