如何将数据从BigQuery移植到已在Google App Engine上部署的ReactJS Webpack应用程序中

问题描述:

我已经成功地在Google App Engine上部署了基于kepler.gl的应用程序,并带有一些示例数据(基于学院的教程).我想要的是能够从Big Query获取数据并将其作为源数据传递.

I have successfully managed to deploy an app based on kepler.gl on Google App Engine with some sample data (based on the vis academy tutorial). What I would like is to be able to get data from Big Query and pass that as the source data.

我尝试在 nodejs- bigquery示例,但无法弄清楚如何将结果传递到主app.js文件中.我绝对是应用程序开发和javascript的初学者,因此任何帮助将不胜感激.

I've tried to implement the example in nodejs-bigquery sample, but cannot figure out how to pass the results into the main app.js file. I'm an absolute beginner in app development and javascript so any help would be highly appreciated.

这是我的主要app.js文件的外观

Here's how my main app.js file looks like

import React, {Component} from 'react';
import {connect} from 'react-redux';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import KeplerGl from 'kepler.gl';

// Kepler.gl actions
import {addDataToMap} from 'kepler.gl/actions';
// Kepler.gl Data processing APIs
import Processors from 'kepler.gl/processors';

// Sample data
//import data from './data/bq.js'

.... 

以下是错误输出:

ERROR in ./~/https-proxy-agent/index.js
Module not found: Error: Can't resolve 'net' in '/Users/saroosh/code/GAE/node_modules/https-proxy-agent'
 @ ./~/https-proxy-agent/index.js 5:10-24
 @ ./~/teeny-request/build/src/index.js
 @ ./~/@google-cloud/common/build/src/util.js
 @ ./~/@google-cloud/common/build/src/index.js
 @ ./~/@google-cloud/bigquery/build/src/index.js
 @ ./src/data/bq.js
 @ ./src/app.js
 @ ./src/main.js

ERROR in ./~/https-proxy-agent/index.js
Module not found: Error: Can't resolve 'tls' in '/Users/saroosh/code/GAE/node_modules/https-proxy-agent'
 @ ./~/https-proxy-agent/index.js 6:10-24
 @ ./~/teeny-request/build/src/index.js
 @ ./~/@google-cloud/common/build/src/util.js
 @ ./~/@google-cloud/common/build/src/index.js
 @ ./~/@google-cloud/bigquery/build/src/index.js
 @ ./src/data/bq.js
 @ ./src/app.js
 @ ./src/main.js

这似乎是webpack的问题.我发现了一些与Webpack集成有关的问题.我从此处获得了一些解决方法,您可以在

This seems to be an issue with webpack. I found some issues related with webpack integrations. I got some workarounds from here and you can find more information here.

关于解决方法,如果您使用的是 vis中提供的webpack.config.js学院教程,请尝试以下操作:

As for the workarounds, if you are using the webpack.config.js provided in the vis academy tutorial, try this:

将此部分替换为webpack.config.js:

Replace this part in webpack.config.js:

node: {
    fs: 'empty'
  },

与此:

node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
  },

@tanohzana提供的解决方案

Solution provided by @tanohzana