実現したいこと
Vue.js(webpackテンプレート)・Netlify・ButterCMSでSPAのブログを作っています。
(Vue.jsの公式に載っている構成をNetlifyに乗せる形です)
環境変数に設定したButterCMSのAPI tokenが上手く取得できなくて困っています。
前提および背景
- API tokenは元々
config/dev.env.js
およびconfig/prod.env.js
に記載していた - (この状態ならローカルでrunしたときは上記のファイルからAPI tokenを取得できている)
- ただし、これらの情報はcredentialであるため、Github上にアップロードする時は
YOUR API KEY
に置き換えている - 補足:NetlifyはGithubの
master
を直接ホスティングするため、API tokenを含むファイルをpushしないとNetlifyでホスティングしたときに読めない
発生している問題・エラーメッセージ
- Netlifyでホスティングするに当たって、Build Environment variablesに環境変数を設定出来るため、ここにAPI tokenを設定してデプロイしたが、アプリケーションがNetlifyで設定した環境変数を読めていない
- tokenのクエリストリングが
&auth_token=YOUR+API+KEY
になってしまっているため、APIを叩いてもunauthorized
で返ってくる
ソースコード
こちらのリポジトリにソースを置いています。以下必要と思われる分だけ抜粋します。
API呼び出しをしている部分:src/Index.vue
javascript
1<template> 2. 3. 4. 5</template> 6<script> 7import Butter from "buttercms"; 8var butter = Butter(process.env.VUE_APP_BUTTER_API_KEY); 9export default { 10 name: "index", 11 data: function() { 12 return { 13 posts: [] 14 }; 15 }, 16 created: function() { 17 this.fetchPosts(); 18 }, 19 methods: { 20 fetchPosts: function() { 21 var vm = this; 22 butter.post 23 .list({ page: 1, page_size: 10 }) 24 .then(function(res) { 25 vm.posts = res.data.data; 26 }) 27 .catch(function(err) { 28 console.log(err); 29 }); 30 } 31 } 32}; 33 34</script>
GitHubにあげているprod.env.js
(GitHubに上げた時点でtokenは伏せている)
javascript
1'use strict' 2require('dotenv').config(); 3 4module.exports = { 5 NODE_ENV: '"production"', 6 VUE_APP_BUTTER_API_KEY: '"464a98d163b954e9ac9ee91798f56547b0e48eb4"' 7}
考えていること
- どうすればNetlifyに設定した環境変数が読めるのか?
.
- 「Netlifyに環境変数を設定した」と言っているが、
Build Environment Variables
であるため、これはビルド時に使用するためだけのもので、アプリケーション内でAPIを叩くなどのときに使用するものではないのでは? - 仮にそうだとすると、NetlifyでホスティングするときにCredentialは隠せないのではないか?
.
- ローカルで
export VUE_APP_BUTTER_API_KEY=ababababababab
(仮の値です)を実行し、ローカルでnpm run dev
を実行しても読めない(読む方法がわからない)ので、そもそもマシン毎の環境変数にAPI tokenを設定することが間違っている? - こちらの場合でも上と同じで、ではどうやって安全にAPI tokenをGithub上に置いてホスティングすればよいのか?
補足情報(FW/ツールのバージョンなど)
まとめ
以上となります。VueもwebpackもNetlifyも触り始めた段階で前提から違っている可能性もありますが、ご存知の方がいらっしゃれば教えていただけると幸いです。よろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。