質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Contentful

Contentfulは、グラフィカルなUIを提供しないAPIベースのヘッドレスCMSです。従来のCMSと異なり、ディスクトップやモバイルを始めとするさまざまなプラットフォームへのコンテンツ配信が可能なAPIが用意されています。

Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

Q&A

解決済

1回答

2266閲覧

Gatsby + Contentful 環境変数の設定方法がわからない

DaisukeMori

総合スコア226

Contentful

Contentfulは、グラフィカルなUIを提供しないAPIベースのヘッドレスCMSです。従来のCMSと異なり、ディスクトップやモバイルを始めとするさまざまなプラットフォームへのコンテンツ配信が可能なAPIが用意されています。

Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

0グッド

0クリップ

投稿2020/08/25 02:52

現在Gatsby + Contentfulでブログを制作しています。
ある程度できたのでビルドしようとしたところ、
今まで開発時は下記コマンドでしていました。

bash

1CONTENTFUL_SPACE_ID=xxx CONTENTFUL_ACCESS_TOKEN=xxx CONTENTFUL_HOST=cdn.contentful.com gatsby develop -H 0.0.0.0

xxxに自分のシークレットキーを入れて開発サーバー立ち上げていました。

開発がある程度終わり
gatsby buildすると

cosole

1Problems with gatsby-source-contentful plugin options: 2spaceId: undefined - "spaceId" is required 3accessToken: undefined - "accessToken" is required 4host (default value): "cdn.contentful.com" 5environment (default value): "master" 6downloadLocal (default value): false 7localeFilter (default value): [Function] 8forceFullSync (default value): false 9pageLimit (default value): 100 10useNameForId (default value): true

と出てspaceId accessTokenが設定されてないとエラーになります。

それならと思い、開発サーバーたちあげる時の要領で以下のようにターミナル上でキーを指定すると

bash

1CONTENTFUL_SPACE_ID=8gphi1uavhnq CONTENTFUL_ACCESS_TOKEN=IcahbFdC2K-m-L1ndUWaIc66Bj7PjQxiys32EC_Nkxg CONTENTFUL_HOST=cdn.contentful.com gatsby build -H 0.0.0.0

下記のようなエラーになります。

console

1 ERROR 2 3gatsby build 4 5Build a Gatsby project. 6 7オプション: 8 --verbose Turn on verbose output [真偽] [デフォルト: false] 9 --no-color, --no-colors Turn off the color in output [真偽] [デフォルト: false] 10 --json Turn on the JSON logger [真偽] [デフォルト: false] 11 --prefix-paths Build site with link paths prefixed with the pathPrefix value in gatsby-config.js. Default is env.PREFIX_PATHS or 12 false. [真偽] [デフォルト: false] 13 --no-uglify Build site without uglifying JS bundles (for debugging). [真偽] [デフォルト: false] 14 --profile Build site with react profiling (this can add some additional overhead). See https://reactjs.org/docs/profiler 15 [真偽] [デフォルト: false] 16 --graphql-tracing Trace every graphql resolver, may have performance implications [真偽] [デフォルト: false] 17 --open-tracing-config-file Tracer configuration file (OpenTracing compatible). See https://gatsby.dev/tracing [文字列] 18 -h, --help ヘルプを表示 [真偽] 19 -v, --version Show the version of the Gatsby CLI and the Gatsby package in the current project [真偽] 20 21 22 ERROR 23 24There was an error 25 26 27 ERROR 28 29未知の引数です: H

試しに直接gatsby.config.jsでキーを指定するとビルドはできるのですが
それではキーを公開してしまうことになるので情報がダダ漏れになってしまいます。

js

1 { 2 resolve: `gatsby-source-contentful`, 3 options: { 4 // spaceId: process.env.CONTENTFUL_SPACE_ID, 5 // accessToken: process.env.CONTENTFUL_ACCESS_TOKEN, 6 spaceId: `key`, // 直接入力すると情報ダダ漏れ 7 accessToken: `key`, // 直接入力すると情報ダダ漏れ 8 host: process.env.CONTENTFUL_HOST, 9 }, 10 },

この場合どのように環境変数を設定するのが良いのでしょうか?
可能なら概念だけではなく、具体的な方法(コードで)をお教えいただくことは可能でしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

試しに直接gatsby.config.jsでキーを指定するとビルドはできるのですが

それではキーを公開してしまうことになるので情報がダダ漏れになってしまいます。

Gatsbyは静的サイトジェネレータなので、ビルドされたサイトにgatsby.config.jsの中身は含まれないのでは?

投稿2020/08/25 03:03

nekoniki

総合スコア2411

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

DaisukeMori

2020/08/25 03:15

ていうことは直接`gatsby.config.js`でキーを書いてもダダ漏れになることはないということでしょうか? たとえばこの状態でビルドして、firebaseなどにホスティングしても問題ないでしょうか?
nekoniki

2020/08/25 03:23

問題ないと思います。 自分もGatsbyブログをNetlifyでホスティングしていますがgatsby.config.jsの内容は外部からは見れませんでした。
DaisukeMori

2020/08/25 05:13

ありがとうございます。 ではキー直書きで進めます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問