Node-RED と Vue 3 が連携したプロジェクトで開発時だけ API の向き先を調整するメモです。
やりたいこと
Node-RED と Vue 3 が連携したプロジェクトで Vue 側に vue-axios を使わずよりシンプルに axios を導入するメモ
こちらの記事のつづき。もちろん、ローカルで作業している分には localhost:18801
に固定で向けるのはいいけれど、どこかのサーバーに公開することを考えると
- 公開時
- 同じ Node-RED サーバーで動く前提でルートパスで API 指定する
- 開発時
- Vue の開発サーバー
localhost:8080
から Node-RED のlocalhost:18801
に向けて API 指定する
- Vue の開発サーバー
としたいのでやってみます。
window.location 関連で起動している URL を見て分岐する方式
window.location
関連を使うやり方で、ブラウザ挙動も変わりにくく、分岐がしやすそうなのでこれでやってみました。
をみるに、 window.location.host で、Vueの開発サーバー localhost:8080
だけ見れば良さそう。
NodeRED.vue
を以下のように書き換えました。
<template> <div class="row"> <div class="row"> <div class="col-sm"> <h1>{{infoTitle}}</h1> <!-- 追記 --> <h3>{{timeStamp}}</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) }