如何在 Vue.js 中使用 BigQuery API

Question

我是 Vue.js 的新手，但我已经使用 axios 构建了一些基本的 CRUD 应用程序。

我想做的是使用 Google Cloud BigQuery 提取原始数据，然后在 Vue 中显示或操作它。我的目标是制作一种简单的数据仪表板，您可以在其中过滤事物或显示来自少数 BigQuery 查询的一些不同见解。

我可以安装 BigQuery API 作为 Vue GUI 的依赖项。但在那之后我有点迷路了。如何将 BigQuery 导入我的代码？如何运行示例代码来获取一些公共数据？

我也不确定如何包含 Google 凭据。我目前在 vue.config.js 中有这一行，但不确定这是否正确：

process.env.VUE_APP_GOOGLE_APPLICATION_CREDENTIALS = '/Google_Cloud_Key/Sandbox-f6ae6239297e.json'

鉴于缺乏任何资源来执行此操作，我还想知道，我不应该尝试以这种方式检索数据吗？我是否应该创建一个中间 API 来运行 BigQuery 查询，然后将 JSON 返回到我的 Vue 应用程序？

Answer 1

为了向 BigQuery API 发出请求，您需要使用属于您的项目的服务帐户，Google BigQuery Node.js 客户端库使用它来发出 BigQuery API 请求。

首先，使用您将使用的PROJECT_ID 设置一个环境变量：

export GOOGLE_CLOUD_PROJECT=$(gcloud config get-value core/project)

接下来，使用以下方法创建一个新的服务帐号以访问 BigQuery API：

gcloud iam service-accounts create my-bigquery-sa --display-name "my bigquery service account"

接下来，创建您的代码将用来作为新服务帐户登录的凭据。使用以下命令创建这些凭据并将其保存为 JSON 文件 ~/key.json：

gcloud iam service-accounts keys create ~/key.json --iam-account  my-bigquery-sa@${GOOGLE_CLOUD_PROJECT}.iam.gserviceaccount.com

设置 GOOGLE_APPLICATION_CREDENTIALS 环境变量，BigQuery API 库将使用该变量来查找您的凭据，下一步将介绍该变量。环境变量应设置为您创建的凭证 JSON 文件的完整路径。使用以下命令设置环境变量：

export GOOGLE_APPLICATION_CREDENTIALS="/home/${USER}/key.json"

您可以阅读有关验证BigQuery API 的更多信息。

以下示例展示了如何initialize a client 并在 BigQuery 公共数据集上执行查询。而且在samples/directory你可以找到很多例子，比如Extract Table JSON，Get Dataset等等。

希望以上信息对您有用。