【发布时间】：2020-12-12 01:43:37
【问题描述】：
我正在尝试将一个由 HTML、CSS 和 Javascript 文件组成的简单静态应用程序部署到 Heroku。我还添加了“虚拟”composer.json 和 index.php 文件，以允许静态文件驻留在 Heroku 中。当我转到托管页面时，我看到一个空白屏幕。控制台窗口如下所示。这些文件链接到我的 GitHub 存储库，因此我使用 .gitignore 文件排除我的 API 密钥，并将 API 密钥保存在 Heroku 的 Config Vars 中。应用未找到 API 密钥并引发错误。
Uncaught ReferenceError: MAPBOX_KEY is not defined logic.js:68
at createMap (logic.js:68)
at createFeatures (logic.js:56)
at logic.js:9
at d3.min.js:3
at Object.<anonymous> (d3.min.js:7)
at d.call (d3.min.js:4)
at XMLHttpRequest.e (d3.min.js:7)
到目前为止，我已经尝试了以下方法：
-
在设置/配置变量下直接在 Heroku 中添加 API 密钥
-
使用控制台窗口添加密钥 heroku config:add MAPBOX_KEY=pk.eyJ1I.....
-
禁用网页缓存
-
在网页上运行空缓存并硬重新加载
-
在控制台中运行 heroku 配置并收到以下错误：
heroku config » Error: Missing required flag: » -a, --app APP app to run command against » See more help with --help
我已经搜索了文档和堆栈溢出，但在 Heroku 中找不到任何有关使用 Javascript 的 API 密钥的信息。我是否需要在我的 .js 或 .html 文件中添加额外的代码，以便应用程序在 Heroku 服务器上找到密钥？下面是 .js 代码的一部分，一直到错误所在的行。
// +++++ Leaflet Challenge +++++
// store API endpoint inside queryUrl
var queryUrl = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";
// make API call to USGS and perform a GET request to the query URL
d3.json(queryUrl, function(data) {
// after a response, send the data.features object to the createFeatures function
createFeatures(data.features);
});
// Circle radius function
function circleSize(magnitude) {
return magnitude **2 * 2000
};
// Circle color function by depth
function circleColor(depth) {
switch (true) {
case (depth > 90):
return "#d73027"; //red
case (depth > 70):
return "#fc8d59"; //darkorange
case (depth > 50):
return "#fee08b"; //lightorange
case (depth > 30):
return "#d9ef8b"; //yellow
case (depth > 10):
return "#91cf60"; //yellowgreen
default:
return "#1a9850"; //green
}
};
function createFeatures(earthquakeData) {
// define a function and run once for each feature in the features array
// give each feature a popup describing the place and time of the earthquake
var earthquakes = L.geoJSON(earthquakeData, {
onEachFeature: function(feature, layer) {
layer.bindPopup("<h3>Magnitude: " + feature.properties.mag +"</h3><h3>Depth: " + feature.geometry.coordinates[2] + " km</h3><hr><h4>Location: " + feature.properties.place + "</h4><hr><p>" + new Date(feature.properties.time) + "</p>");
},
pointToLayer: function(feature, latlng) {
return new L.circle(latlng, {
radius: circleSize(feature.properties.mag),
fillColor: circleColor(feature.geometry.coordinates[2]),
color: "black",
weight: .5,
fillOpacity: 0.8
})
}
});
// send earthquakes layer to the createMap function
createMap(earthquakes);
}
function createMap(earthquakes) {
// define lightmap layer
var lightmap = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
tileSize: 512,
maxZoom: 18,
zoomOffset: -1,
id: "mapbox/light-v10",
accessToken: MAPBOX_KEY
});
提前感谢您提供的任何帮助。这是我第一次部署到 Heroku，所以对我来说是全新的。
【问题讨论】：
标签： javascript api heroku config