デプロイするとAPIが読み込まれない

Question

初めまして。
いつもありがとうございます。

railsを勉強し初めて約２ヶ月が経ち、本日初めてデプロイまですることができました。

ただ、デプロイしてみたアプリの動作確認を行っていたのですがAPIを使って実装した部分がうまく動作できなくて解決できないのでみなさんのお力を貸していただけたらと思い、質問させていただきます。
よろしくお願いします
私は、ビデオ通話機能をSky WayのAPIを使って実装したのですが、その部分が動作しません。

ローカルの環境ではきちんと動作していました。

APIキーを叩くと

API key "null" is invalid.

とアラートが出てきます。

おそらくAPIキーの格納場所が違うと思うのですがどこにどのように格納すれば良いのかわかりません。

よろしくお願いします。

追記

用語が分からず的外れな追記であればおっしゃってください、申し訳ございません。

作成したアプリです
↑適当に新規登録をしていただき、こちらに入っていただきますとサイトの下部にビデオ通話が開始するボタンがあります。
コンソールでエラーが出ていますので確認をしていただきたいです。申し訳ありません。

  document.getElementById("call-media-contents").style.display ="none";
  document.getElementById("before-call").addEventListener("click", function() {
    alert("カメラがオンになります");
    alert("IDが発行されます。相手に教えることでビデオ通話ができます");
    const contents = document.getElementById("call-media-contents");
    const button = document.getElementById("before-call-contents");
    if(contents.style.display=="block"){
      contents.style.display ="none";
      button.style.display ="block";
    }else{
      contents.style.display ="block";
      button.style.display ="none";
    }

    let localStream;

    navigator.mediaDevices.getUserMedia({video: true, audio: true})
      .then( stream => {
      const videoElm = document.getElementById('my-video')
      videoElm.srcObject = stream;
      videoElm.play();
      localStream = stream;
    }).catch( error => {
      console.error('mediaDevice.getUserMedia() error:', error);
      return;
    });

    const peer = new Peer({
      key: gon.api_key,
      debug: 3
    });
    peer.on('open', () => {
      document.getElementById('my-id').textContent = peer.id;
    });
    peer.on('error', err => {
      alert(err.message);
    });
    peer.on('close', () => {
    alert('通信が切断しました。');
    });

    document.getElementById('make-call').onclick = () => {
      const theirID = document.getElementById('their-id').value;
      const mediaConnection = peer.call(theirID, localStream);
      setEventListener(mediaConnection);
    };

    document.getElementById('stop-button').addEventListener("click", function() {
      location.reload();
    });

    const setEventListener = mediaConnection => {
      mediaConnection.on('stream', stream => {
        const videoElm = document.getElementById('their-video')
        videoElm.srcObject = stream;
        videoElm.play();
      });
    }
    peer.on('call', mediaConnection => {
      mediaConnection.answer(localStream);
      setEventListener(mediaConnection);
    });
  });

上記のコードの真ん中あたりの

  const peer = new Peer({
    key: gon.api_key,
    debug: 3
  });

これがビデオ通話するときに必要なAPIキーを記述しているところです。
ローカル環境では.envファイルにAPIキーを記述しており、ローカル環境ではきちんと動作しました。

デプロイはherokuで行っております。

APIキーの格納方法

gem 'dotenv-rails'
gem 'gon'

def show
  gon.api_key = ENV['API_KEY']

API_KEY =xxxxxxxxxxxxxxxxxx

Comments

[miyabi_pudding]

> APIキーを叩くと

何をどう叩いているんでしょうか？
該当箇所のソースコードを提示いただかないと、回答は得られないと思います。

また、デプロイ前にローカルで動作確認する環境にて、動作確認は行ってなかったのですか？

Answer 1

heroku なら、Configuration and Config Vars にあるように heroku cli で環境変数を設定してみてください。

heroku config:set API_KEY=value

Comments

[mamiduka]

ありがとうございます！
設定できました！