ひっさびさにサイト制作の仕事をすることになったんですが、
・一部分はテンプレで情報流し込み系
・CMSを使えないかも
とのことで、GoogleスプレッドシートをDBにして、SSGできないかと探ったところ gatsby-starter-googlesheets を見つけて、dev環境をとりあえず立ち上げるまでを試してみたので、その備忘録です↓
gatsby-starter-googlesheetsをインストール
npx gatsby new gatsby-starter-googlesheets https://github.com/harshil1712/gatsby-starter-googlesheetsREADME.mdを読む
README.mdに下記の内容の .envファイル を作成してね。と書いてますが…
SPREADSHEET_ID=<YOUR_SPREADHEET_ID>
CLIENT_EMAIL=<SERVICE_ACCOUNT_EMAIL>
PRIVATE_KEY=<YOUR_PRIVATE_KEY>CLIENT_EMAIL=<SERVICE_ACCOUNT_EMAIL>PRIVATE_KEY=<YOUR_PRIVATE_KEY>
は、Google Cloud Platformで鍵の発行が必要なので進めていきます。
Google Cloud Platformで鍵を発行
Google Cloud Platformにアクセス
https://console.cloud.google.com/
※登録済み前提として進めます
新しいプロジェクトを作成（任意）
※既存のプロジェクトを使用する場合はこの作業は不要です。
1）上部のナビ「プロジェクトを選択▼」もしくは「＜現在選択されているプロジェクト名＞▼」をクリック
2）開いたモーダル内の「新しいプロジェクト」をクリック
3）プロジェクト名を入力して「作成」をクリック
作成をクリック後、数分待つとプロジェクトが作成されます。
Google Sheets APIを有効に
1）上部の検索窓から「Google Sheets API」を検索
2）Google Sheets APIのページで「有効にする」をクリック
秘密鍵を発行する
1）左のメニューから「IAMと管理」→「サービスアカウント」をクリック
2）上部の「＋サービスアカウントを作成」をクリック
3）「サービス アカウント名」を入力して「完了」をクリック
4）サービスアカウントのトップに戻ると先程作成したアカウントが表示されているので、縦に3つのドットが並んだメニューから「鍵を管理」をクリック
5）「鍵を追加▼」をクリックし、JSONを選択して「作成」をクリックすると、以下のようなJSONファイルがダウンロードされます。
{
...(省略)...
"private_key": "-----BEGIN PRIVATE KEY-----...(省略)",
"client_email": "xxx@xxx",
}.envファイルを作成
下記の内容で .envファイル を作成します。
SPREADSHEET_ID=<YOUR_SPREADHEET_ID>
CLIENT_EMAIL=<SERVICE_ACCOUNT_EMAIL>
PRIVATE_KEY=<YOUR_PRIVATE_KEY>SPREADSHEET_ID
README.mdにも書いてあるとおりhttps://docs.google.com/spreadsheets/d/<SPREADSHEET_ID>/edit#gid=12345
URLから取得できます。
CLIENT_EMAIL / PRIVATE_KEY
先程ダウンロードしたJSONファイルの値に置き換えます。
gatsby developを実行 〜エラー vol.1〜
では、準備ができたので gatsby develop を実行します。
そしたら下記のエラーが…
Error: "spreadsheetId" is a required argumentgatsby-config.js の
{
resolve: `gatsby-source-google-spreadsheet`,
options:{
spreadsheetId:process.env.SPREADSHEET_ID, ←ココ!!
credentials:{
client_email:process.env.CLIENT_EMAIL,
private_key:process.env.PRIVATE_KEY
}
}
},上記の spreadsheetid の値が必須です。というエラー。
.envファイルからうまいこと環境変数の値が読み込めてないっぽいので、こちらを参考に読み込めるようにしていきます。
1）dotenvをインストール
yarn add dotenv2）.env → .env.developmentのリネーム
これで読み込めるようにはなりましたが…
gatsby developを実行 〜エラー vol.2〜
再び gatsby develop を実行したら、次は…
Error: error:0909006C:PEM routines:get_name:no start line調べてるとこちらの記事参考に、gatsby-config.jsの private_key を
private_key:process.env.PRIVATE_KEY
private_key:process.env.PRIVATE_KEY.replace(/\\n/g, '\n')
に置き換えたら、問題は解決しましたが…
gatsby developを実行 〜エラー vol.3〜
はい、三度目実行したら次は下記のエラー…
Error: The caller does not have permission下記を実行したらエラーは解消！
1）使用するGoogleスプレッドシートを開く
2）右上の「共有」をクリック
3）[ユーザーやグループを追加]の入力欄にJSONファイルに記載されていた client_email の値を追加する。
gatsby developを実行 〜エラー vol.4〜
まだエラーが出る…
Missing onError handler for invocation 'building-schema', error was 'Syntax Error: Unexpected Name "GoogleSpreadsheet"
GraphQL request:1:1
1 | GoogleSpreadsheetシート1これにGoogleスプレッドシートのシート名に日本語が含まれてるのが駄目っぽいので、
シート1 → sheet1
に変更したら、エラーは解消されました！
gatsby developを実行 〜エラー vol.5〜
2つのエラーが発生…／(^o^)＼
Cannot query field "content" on type "GoogleSpreadsheetSheet1".Cannot query field "allGoogleSpreadsheetSheet2" on type "Query".GoogleSpreadsheetSheet1 = Googleスプレッドシートの1つめのシートGoogleSpreadsheetSheet２ = Googleスプレッドシートの2つめのシート
という意味っぽいですね。
GoogleSpreadsheetSheet1のエラーを解決
Cannot query field "content" on type "GoogleSpreadsheetSheet1".から解決していきます。
ー index.js
export const query = graphql`
query{
allGoogleSpreadsheetSheet1 {
edges {
node {
id
title
date
content
}
}
}
}
`content が必要やけど、用意したGoogleスプレッドシートには content のフィールドを用意してなかったのが原因っぽいです。
↓に変更！
GoogleSpreadsheetSheet2のエラーを解決
Cannot query field "allGoogleSpreadsheetSheet2" on type "Query".ー page-2.js
allGoogleSpreadsheetSheet2 {
edges {
node {
id
srNo
name
house
}
}
}そもそもGoogleスプレッドシートに2つ目のシートがなかったので、下記の内容で2つ目のシートを作成。
gatsby develop 〜成功〜
数々のエラーが発生しましたが、無事にdev環境が立ち上がりました！
コメント