web-dev-qa-db-ja.com

Netlifyでビルドするための環境変数を設定する

コードに不要なAPIキーの環境変数を設定しようとしています。私のソースJavaScriptは次のようになります。

.get(`http://api-url-and-parameters&api-key=${process.env.API_KEY}`)

私はwebpackとパッケージdotenv-webpack https://www.npmjs.com/package/dotenv-webpack を使用してgitignored .envファイルにAPI_KEYを設定し、ローカルですべて正常に実行しています。 Netlifyを介して展開するときにもこの変数を設定できるようにしたいので、「ビルド環境変数」にGUIを介して追加し、ビルドコマンドで直接設定しようとしましたが、成功しませんでした。

問題は何でしょうか？

webpacknetlify
10
Maëlig

警告：これが秘密鍵の場合 クライアントに返されるバンドルでこの環境変数の値を公開する必要はありません 。ビルド中にコンテンツを作成するために使用するビルドスクリプトでのみ使用する必要があります。

問題

dotenv-webpackは、バンドルのWebpackビルド中に変数にロードする.envファイルがあることを期待しています。リポジトリがNetlifyによってチェックアウトされるとき、.envは存在しません。これは、正当な理由により、.gitignoreにあるためです。

解決

API_KEYをNetlify build environment variablesに保存し、ビルドコマンドを実行する前にスクリプトを使用して.envをビルドします。

scripts/create-env.js

const fs = require('fs')
fs.writeFileSync('./.env', `API_KEY=${process.env.API_KEY}\n`)

ビルドの一部としてスクリプトを実行する

node ./scripts/create-env.js && <your_existing_webpack_build_command>

注意事項と推奨事項

  • パブリックリポジトリでこのメソッドを使用しないでください[open]任意のPRまたはブランチの展開が可能になるためAPI_KEYを公開するコードに簡単なスクリプトを作成します
  • 上記のサンプルスクリプトは簡単にするために、使用するすべてのスクリプトが0以外のコードでエラーになるようにしてください。スクリプトが失敗した場合、デプロイは失敗します。
12
talves

次のようにして、Dotenv-webpackを設定して、システム環境変数と.envファイルで宣言した変数をロードできます。

  plugins: [
    new Dotenv({
        systemvars: true
    })
  ]

つまり、webpack dotenvプラグインのsystemvars属性をtrueに設定します。

同じ名前のシステム環境変数は、.envファイルで定義されたものを上書きすることに注意してください。

ソース： https://www.npmjs.com/package/dotenv-webpack#properties

4
Riky_Tree

netlifyで対応するサイトの設定に移動すると、build&deployの下にenvironment variablesというセクションがあり、そこから環境変数を簡単に追加できます。 MY_API_KEY変数を環境変数に追加すると、process.env.MY_API_KEY経由でプロジェクト内の変数にアクセスできるようになります。

enter image description here

2
Lakshan S

Nuxt JSを使用している場合、より「まっすぐ進む」アプローチがあります。

nuxt.config.jsを次のように編集するだけです。

module.exports = {
  env: {
    GOOGLE_API_KEY: process.env.GOOGLE_API_KEY

  },
  // ...

次に、通常どおりbuild environment variablesを使用してGOOGLE_API_KEYをNetlifyに追加します。

クレジットは yann-linn および github に対する彼の回答です。

1
Peter Piper