Expressの続きです。前回はheroku configでHerokuに環境変数し、Expressで読み込んでブラウザに表示しました。今回はブラウザ側のFetch APIからHerokuの環境変数を読み込んでブラウザに表示してみます。それではいきましょう！
【目次】
※参考：前回記事
【Express】heroku configでHerokuに環境変数を設定（.envファイルとHerokuの同期） - クモのようにコツコツと
※参考：Node.js / Expressを習得するためにやったことまとめ
qiita.com
前回のおさらい
heroku configでHerokuに環境変数を設定して、Expressでブラウザに返す。「heroku-config」を使って.envファイルとHerokuも同期して、ローカル、クラウド両方の環境で表示できた。
ローカル環境（.envファイルの環境変数を読み込んでいる）
クラウド環境（Herokuの環境変数を読み込んでいる）
詳細は前回記事を参照
※参考：【Express】heroku configでHerokuに環境変数を設定（.envファイルとHerokuの同期） - クモのようにコツコツと
前回のコードのポイント
前回のコードで環境変数を読み込んでいる部分（countHitsuji()関数）
countHitsuji = () => { let result = '' const times = process.env.TIMES || 5 for (i = 0; i < times; i++) { // result += i + ' ' result += '羊が' + i + '匹 ' } return result; }
変数timesのprocess.envによって環境変数TIMESの値を読み込んでいる。
ブラウザに値を返す部分
.get('/times', (req, res) => res.send(countHitsuji()))
GET送信で/timesにアクセスするとcountHitsuji()の結果を返す。
今回はブラウザ側からFetch APIでリクエストを返してExpressの返す環境変数を受け取り、ブラウザに表示したい。
環境変数の値だけをブラウザ返す
前回はfor文で環境変数をテキストにしたが、今回は環境変数の値だけをブラウザに返したい。
環境変数を直に読み込んでいたのはprocess.envの部分。
const times = process.env.TIMES || 5
これをExpressのres.send()で直に書いて返してみる。
index.jsのexpress()メソッドチェーンに下記の処理を追記する。
.get('/env', (req, res) => res.send(process.env.NAME))
/envのパスに対してprocess.envで環境変数NAMEの値を返す（今回はTIMESじゃなくてNAMEにしてみた）。
Herokuをローカル起動する
$ heroku locak web
パスで指定した/envを開くと
http://localhost:5000/env
NAMEの値だけが表示された！
このパスをFetch APIで叩いてブラウザに表示したい。
HTMLコード
「node-js-getting-started」の「/public」フォルダの中に「envTest.html」と「script.js」を作る。
envTest.htmlのコード
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>環境変数テスト</title> </head> <body> <section> <h1>環境変数テスト</h1> <p>ここに環境変数を表示する</p> <ul class="env"></ul> </section> <script src="js/script.js"></script> </body> </html>
ulタグ. envの中にliタグで表示する予定。
今はまだ内容が無いよう。
Fetch APIの設定
次にscript.jsにFetch APIの設定をする。
以前作ったFetch APIのCRUD処理の「Read」部分とliタグ追加部分を元にしている。
※参考：【JS】Fetch APIを使ってJSON ServerにCRUDする - クモのようにコツコツと
グローバル変数
冒頭でグローバルな変数を設定する。
const env = document.querySelector('.env'); const url = '/env';
- 変数
envで.envタグを取得 - 変数
urlには/envパスを設定
Read設定
// Read const readFetch = () => { fetch(url).then((response) => { if(!response.ok) { console.log('Read error!'); throw new Error('error'); } console.log('Read ok!'); return response.text(); }).then((data) => { console.log(data); appendList(data); }).catch((error) => { console.log(error); }); }; readFetch();
前回と変わったいる部分
最初のthen()のreturn
fetch(url).then((response) => { // 中略 return response.text(); })
response.json()ではなくresponse.text()を返す。
二番目のthen()
.then((data) => { console.log(data); appendList(data); })
テキスト形式でfor文は不要なので削除。appendList()の引数にdataをダイレクトに入れている。
liタグの追加
appendList()部分。前回はここでliタグだけでなく修正ボタン、削除ボタンなど複数の要素を設定した。
// Append List const appendList = (thisData) => { const li = document.createElement('li'); li.innerHTML = 'こんにちは、' + thisData + 'さん！'; env.appendChild(li); };
今回はliタグに「こんにちは、thisDataさん！」というテキストを入れてenvにappendChild()メソッドで追加する。thisDataの部分にFetch APIで受信したレスポンス（環境変数）を表示する。
ブラウザ挙動確認
先ほどの内容が無いよう状態がどうなるか。
ローカルのHerokuを「Control + C」で一旦閉じてから再起動
$ heroku locak web
やた！「こんにちは、イイダリョウさん！」と表示された！
クラウド上のHerokuにも表示する
今回作った内容をクラウド上のHerokuにもデプロイして表示したい。
gitコマンドでHerokuにデプロイ
git add .
git commit -m "環境変数テストを追加"
git push heroku HEAD:master
クラウドのHeroku、まずは「/env」を開いてみる。
おお、環境変数NAMEの値「イイダリョウ」が表示された！
※参考：https://aqueous-mountain-80366.herokuapp.com/env
次に「envTest.html」を開いてみる。
やた！「こんにちは、イイダリョウさん！」も表示された！
※参考：環境変数テスト
最後に
ということでHerokuの環境変数をFetch APIでリクエストし、それをExpressが返し、Fetch APIはそのレスポンスを受け取ってブラウザに表示する、という流れを体験できました！
次は、このソースをGitHubにデプロイして、さらにGitHubとHerokuを連携してみます。以前、こちらの記事でやった構造です。
※参考：ローカル→Sourcetree→GitHub→Herokuに同期する方法（黒い画面不要！） - クモのようにコツコツと
Herokuの環境変数はgitでデプロイするソースとは切り離されて別で管理できるはずなので、GitHubのソースに.envファイルを除外してもブラウザでは環境変数の値が表示されるはず。それを検証したく。
それではまた！
※参考：Node.js / Expressを習得するためにやったことまとめ
qiita.com
