Node-RED と Vue 3 が連携したプロジェクトで開発時だけ API の向き先を調整するメモです。

やりたいこと

https://www.1ft-seabass.jp/memo/2021/09/10/node-red-and-vue3-and-axios-simple/

こちらの記事のつづき。もちろん、ローカルで作業している分には localhost:18801 に固定で向けるのはいいけれど、どこかのサーバーに公開することを考えると

• 公開時
  • 同じ Node-RED サーバーで動く前提でルートパスで API 指定する
• 開発時
  • Vue の開発サーバー localhost:8080から Node-RED の localhost:18801 に向けて API 指定する

としたいのでやってみます。

window.location 関連で起動している URL を見て分岐する方式

window.location 関連を使うやり方で、ブラウザ挙動も変わりにくく、分岐がしやすそうなのでこれでやってみました。

Location - Web API | MDN

をみるに、 window.location.host で、Vueの開発サーバー localhost:8080 だけ見れば良さそう。

NodeRED.vue を以下のように書き換えました。

<template>
  <div class="row">
    <div class="row">
      <div class="col-sm">
        <h1></h1>
        <!-- 追記 -->
        <h3></h3>
      </div>
    </div>
    <div class="row">
      <div class="col-sm">
        <ul class="list-group">
          <li class="list-group-item">An item</li>
          <li class="list-group-item">A second item</li>
          <li class="list-group-item">A third item</li>
          <li class="list-group-item">A fourth item</li>
          <li class="list-group-item">And a fifth one</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

// 追記
import axios from 'axios'

export default {
  name: 'NodeRED',
  props: {
    msg: String
  },
  data () {
    return {
      infoTitle: "Node-RED INDEX",
      timeStamp: 0
    }
  },
  methods: {
    // 追記
    getTimestamp:async function(){
      // 開発サーバーと本番サーバーでの分岐処理 ここから
      let urlTimeStampAPI = '/api1';
      let localEndPoint = '//localhost:18801';
      if( window.location.host == 'localhost:8080'){
        // 開発サーバー(npm run serve)
        urlTimeStampAPI = localEndPoint + urlTimeStampAPI;
      } // ここまで
      console.log("urlTimeStampAPI ",urlTimeStampAPI);
      const response = await axios.get(urlTimeStampAPI);
      console.log(response);
      this.timeStamp = response.data.timestamp;
    }
  },
  mounted () {
    // 追記
    this.getTimestamp();

    console.log("window.location.host ",window.location.host);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

これを実行してみると、

Vue プロジェクト上で npm run serve で localhost:8080 で確認しているときは、 Vue の開発サーバー localhost:8080から Node-RED の localhost:18801 に向けて API 指定しています。

その後、npm run build して Node-RED 内で見てやると同じ Node-RED サーバーで動く前提でルートパスで API 指定できています。

もちろん、これで作りを大きくしていって色々なコンポーネントで axios での API 記述をバラバラに分散させてしまうと、あとあと直すのが大変なので、なにかしら API 群を集約するコンポーネントを用意して、その中で今回の分岐を入れてやると良さそうですね。

余談：Vue CLI 限定で process.env.NODE_ENV を見て分岐する方式

この方法も悪くはないのですが、いかんせん Vue CLI 頼りの分岐判定なるので、今後の展開がしにくそうなので、アイデアの一つに留めておきます。

Modes and Environment Variables | Vue CLI

methods: {
    // 追記
    getTimestamp:async function(){
      // 開発サーバーと本番サーバーでの分岐処理 ここから
      let urlTimeStampAPI = '/api1';
      let localEndPoint = '//localhost:18801';
      if( process.env.NODE_ENV == 'development'){
        // 開発サーバー(npm run serve)
        urlTimeStampAPI = localEndPoint + urlTimeStampAPI;
      } // ここまで
      const response = await axios.get(urlTimeStampAPI);
      console.log(response);
      this.timeStamp = response.data.timestamp;
    }
  },
  mounted () {
    // 追記
    this.getTimestamp();
    // process.env.NODE_ENV
    // npm run serve で開発サーバーを起動すると development
    // npm run build で Node-RED サーバーを起動すると production
    console.log("process.env.NODE_ENV = ",process.env.NODE_ENV)
  }