【问题标题】:How to load html dependencies in node.js azure web app如何在 node.js azure web 应用程序中加载 html 依赖项
【发布时间】:2018-01-23 23:28:23
【问题描述】:

作为免责声明,我对 javascript 和 Azure 都很陌生。我的目标是构建一个 Tableau Web 数据连接器。我有以下脚本。

<html>
<head>
    <title>Facebook Likes</title>
    <meta http-equiv="Cache-Control" content="no-store" />

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js" type="text/javascript"></script>
    <script src="FacebookLikes.js" type="text/javascript"></script>
</head>

<body>
    <div class="container container-table">
        <div class="row vertical-center-row">
            <div class="text-center col-md-4 col-md-offset-4">
                <button type = "button" id = "submitButton" class = "btn btn-success" style = "margin: 10px;">Get Facebook Likes!</button>
            </div>
        </div>
    </div>
</body>
</html>

var http = require('http');
http.createServer((function() {
    // Create the connector object
    var myConnector = tableau.makeConnector();

    // Define the schema
    myConnector.getSchema = function(schemaCallback) {
        var cols = [{
            id: "id",
            dataType: tableau.dataTypeEnum.int
        }, {
            id: "link",
            dataType: tableau.dataTypeEnum.string
        }, {
            id: "likes",
            dataType: tableau.dataTypeEnum.int
        }];

        var tableSchema = {
            id: "Facebook",
            alias: "real-time likes",
            columns: cols
        };

        schemaCallback([tableSchema]);
    };

    // Download the data
    myConnector.getData = function(table, doneCallback) {
        var username = 'xxx'; 
        var password = 'xxx'; 
        var url = 'xxxx';
        var xhttp = new XMLHttpRequest();
        xhttp.open('POST', url, true);

        xhttp.onreadystatechange = function() {//Call a function when the state changes.
            if(xhttp.readyState == 4 && xhttp.status == 200) {
                var response = JSON.parse(xhttp.responseText)
                tableData = [];

                tableData.push({
                    "id": response.id,
                    "link": response.link,
                    "likes": response.likes,
                    });

                table.appendRows(tableData);
                doneCallback();
                }
            }

        params = username + ';' + password
        xhttp.send(params)
        };

    tableau.registerConnector(myConnector);

    // Create event listeners for when the user submits the form
    $(document).ready(function() {
        $("#submitButton").click(function() {
            tableau.connectionName = "Facebook Likes"; // This will be the data source name in Tableau
            tableau.submit(); // This sends the connector object to Tableau
        });
    });
})).listen(process.env.PORT || 1337);

我在本地构建并测试了 html 和 javascript,一切正常。我从开发版本中添加的唯一内容是 createServer 调用。如果我根据 Azure 文档执行 git push,则推送会成功执行,并且我可以在“部署选项”下看到我的应用程序中列出的部署;但是,当我打开网页时,我收到消息“您无权查看此目录或页面”。我的研究使我将 package.json 和 web.config 文件包括在内,如下所示。

{
  "name": "azure-facebook-likes",
  "author": "Xander",
  "version": "1.0",
  "description": "application for use with Tableau web data connector to return facebook likes",
  "tags": [
    "facebook",
    "tableau"
  ],
  "license": "MIT",
  "scripts": {
    "start": "node FacebookLikes.js"
  }
}

--

<configuration>
    <system.webServer>

        <handlers>
            <!-- indicates that the app.js file is a node.js application to be handled by the iisnode module -->
            <add name="iisnode" path="FacebookLikes.js" verb="*" modules="iisnode" />
        </handlers>

        <rewrite>
            <rules>
                <!-- Don't interfere with requests for logs -->
                <rule name="LogFile" patternSyntax="ECMAScript" stopProcessing="true">
                    <match url="^[a-zA-Z0-9_\-]+\.js\.logs\/\d+\.txt$" />
                </rule>

                <!-- Don't interfere with requests for node-inspector debugging -->
                <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">                    
                    <match url="^FacebookLikes.js\/debug[\/]?" />
                </rule>

                <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
                <rule name="StaticContent">
                    <action type="Rewrite" url="public{REQUEST_URI}" />
                </rule>

                <!-- All other URLs are mapped to the Node.js application entry point -->
                <rule name="DynamicContent">
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True" />
                    </conditions>
                    <action type="Rewrite" url="FacebookLikes.js" />
                </rule>
            </rules>
        </rewrite>

    </system.webServer>

    <security>
        <ipSecurity allowUnlisted="true"> 
    </security>

</configuration>

使用此配置,当我浏览网页时,我收到消息“无法显示该页面,因为发生了内部服务器错误。” Logging-errors.txt 显示以下内容,“应用程序已引发未捕获的异常并被终止:ReferenceError: tableau is not defined。” tableau 定义来自 html 文件中的 connector.tableau.com 依赖项,但据我所知,当我指定

"scripts": {
    "start": "node FacebookLikes.js"
}

在 package.json 文件中,没有加载 html 文件中的脚本。我已经为此工作了几天,并且没有想法。有人对如何加载依赖项有建议吗?还是有人可以将我推向正确的方向,以了解我应该看什么?任何见解将不胜感激。

谢谢!

【问题讨论】:

    标签: html node.js azure azure-web-app-service


    【解决方案1】:

    您使用的代码应该从浏览器而不是 Node.js 运行。您可以将代码从 FacebookLikes.js 移动到 HTML 文件,如下所示:

    <html>
    <head>
        <title>Facebook Likes</title>
        <meta http-equiv="Cache-Control" content="no-store" />
    
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    
        <script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js" type="text/javascript"></script>
        <script src="FacebookLikes.js" type="text/javascript"></script>
    
        <script>
            $(document).ready(function() {
                $("#submitButton").click(function() {
                    tableau.connectionName = "Facebook Likes"; // This will be the data source name in Tableau
                    tableau.submit(); // This sends the connector object to Tableau
                });
            });
        </script>
    </head>
    
    <body>
        <div class="container container-table">
            <div class="row vertical-center-row">
                <div class="text-center col-md-4 col-md-offset-4">
                    <button type = "button" id = "submitButton" class = "btn btn-success" style = "margin: 10px;">Get Facebook Likes!</button>
                </div>
            </div>
        </div>
    </body>
    
    <script>
    
        var myConnector = tableau.makeConnector();
    
        // Define the schema
        myConnector.getSchema = function(schemaCallback) {
            // ...
        };
    
        // Download the data
        myConnector.getData = function(table, doneCallback) {
            // ...
        };
    
        tableau.registerConnector(myConnector);
    
    </script>
    
    </html>
    

    然后删除FacebookLikes.jsweb.configpackage.json文件。

    【讨论】:

    • 感谢您的建议!我试过了,但我再次收到“...没有权限...”消息。 ErrorPage.htm 日志显示“HTTP 错误 403.14 - 禁止。Web 服务器配置为不列出此目录的内容。最可能的原因是:未为请求的 URL 配置默认文档,并且未启用目录浏览服务器。”我不确定如何在 Azure 环境中配置默认​​文档。这似乎是一个我没有想到的好主意。还有什么我可以尝试的吗?
    【解决方案2】:

    Azure 在应用程序设置下有一个默认文档列表。我将我的 html 文件命名为 FacebookLikes.html,这(不出所料)不是默认的文档名称。我重命名了我的文件 index.html,删除了 web.config 和 package.json 文件,并从 javascript 代码中删除了 create server 调用(并添加了尾随 ()),并且 Web 应用程序按预期运行。可以想象,我可以将 FacebookLikes.html 添加到默认文档中,它应该可以工作。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-05-17
      • 2018-06-08
      • 1970-01-01
      • 1970-01-01
      • 2019-05-27
      • 1970-01-01
      相关资源
      最近更新 更多