问题描述
我正在尝试将一个由Html、css和Javascript文件组成的简单静电应用程序部署到Heroku。我还添加了&dumy"；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配置：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，所以这对我来说是全新的。
推荐答案
Heroku配置变量是操作系统(linux、mac、windows)的经典环境变量，设计为可以从后端语言访问，例如：java、php、nodejs、ruby、python等。
根据您的代码片段，您需要在您的普通javascript中读取此环境变量，该javascript是在某些Web浏览器中从您的html调用的，这是不可能的
不允许Vanilla javascript或纯javascript访问某些操作系统资源，例如本例中的环境变量。
查看此链接了解变量在vanilla javascript中的工作方式：
How to use variable substitution in Frontend js applications like backend applications?
快速解决方案
在您的php代码中，在操作系统层的web渲染之前读取此变量，因为php能够做到这一点：
php不是我的拿手好戏，但我确信它有几个选项可以将此var注入静电html或javascript
如果没有，可以在静电文件中使用普通字符串替换：
im_your_file.js
zoomOffset: -1,
id: "mapbox/light-v10",
accessToken: @@MAPBOX_KEY@@
另一个_php_file.php
replaceStringInFile("@@MAPBOX_KEY@@")
肮脏的解决方案
使用此替换另一个php文件中的文件中的内容，并在应用程序启动之前从某个Heroku步骤调用它
您可以使用纯bash执行此文件替换，并在某个Heroku步骤中调用它
优雅的解决方案
Webapck变量注入
最佳解决方案
不是直接读取javascript中的var，而是必须在php应用程序中发布一种睡觉端点，比如/settings.php。此终结点必须将此变量和其他变量作为json返回。
在javascript文件中，要直接使用变量，请使用/settings.php，您将在javascript代码中拥有所需的变量。
这篇关于无法从Java应用程序访问Heroku配置变量中的API密钥的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！