जावास्क्रिप्ट/नोड.जेएस एज़ूर फंक्शन में डीओएम और विंडो की आवश्यकता वाली आयातित स्क्रिप्ट का उपयोग कैसे करें

Question

मैं एक Azure फ़ंक्शन (जावास्क्रिप्ट/नोड.जेएस स्वाद) में बाहरी जावास्क्रिप्ट का उपयोग करने की कोशिश कर रहा हूं। चूंकि बाहरी जावास्क्रिप्ट (मुझे केंडो का उपयोग करने की आवश्यकता है) एक डोम और एक खिड़की पर निर्भर करता है, मैंने जेएसडीओएम का उपयोग करने की कोशिश की (लेकिन अगर कुछ बेहतर/आसान विकल्प है तो मुझे जेएसडीओएम का उपयोग करने की आवश्यकता नहीं है)।

मेरे पास जो कुछ है उसका यह एक सरलीकृत उदाहरण है:

module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');

    var html = '<!DOCTYPE html>'
    + '<html>'
    +   '<head>'
    +       '<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>'
    +       '<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>'
    +   '</head>'
    +   '<body>'
    +       '<script>'
    +           'var myDiv = document.createElement("div");'        
    +           'myDiv.innerHTML = "Hello World";'
    +           'document.body.appendChild(myDiv);'
    +       '</script>'
    +   '</body>'
    + '</html>'
    ;

    var jsdom = require('jsdom');
    const { JSDOM } = jsdom;

    const dom = new JSDOM(html, {
        runScripts: "dangerously",
        resources: "usable"
    });

    var test = dom.serialize();
    context.log(test);

    context.res = {
        body: test
    };
};

इस एज़ूर फ़ंक्शन को चलाते समय इसमें jQuery और केंडो शामिल होना चाहिए और "हैलो वर्ल्ड" युक्त एक div बनाना चाहिए। हालांकि यह काम नहीं कर रहा है।

हैलो वर्ल्ड डिव बनाने वाली स्क्रिप्ट को केवल तभी निष्पादित किया जाता है जब मैं या तो टिप्पणी करता हूं

+       '<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>'
+       '<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>'

या

resources: "usable"

लेकिन फिर मैं jQuery और केंडो का उपयोग नहीं कर सकता।

इस jsdom के अनुसार दस्तावेज़ीकरण पैरामीटर संसाधन: "प्रयोग करने योग्य" को चाल चलनी चाहिए लेकिन इसके लिए किसी कारण से यह काम नहीं कर रहा है।

मैं "jsdom" का उपयोग कर रहा हूं: "^ 15.1.1"

अपडेट करें: मैंने इस तरह की स्क्रिप्ट को जोड़ने के लिए वर्कअराउंड की कोशिश की:

module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');

    var html = '<!DOCTYPE html>'
    + '<html>'
    +   '<head>'
    +   '</head>'
    +   '<body>'
    +       '<script>'
    +           'var myDiv = document.createElement("div");'        
    +           'myDiv.innerHTML = "Hello World";'
    +           'document.body.appendChild(myDiv);'
    +           'var scriptTag = document.createElement("script");'        
    +           'scriptTag.innerHTML = window.jqueryString;'
    +           'document.head.appendChild(scriptTag);'
    +       '</script>'
    +   '</body>'
    + '</html>'
    ;

    var jsdom = require('jsdom');
    const { JSDOM } = jsdom;

    var fs = require("fs");
    global.jqueryString = fs.readFileSync(__dirname + '//jquery.js').toString();
    //context.log(jqueryString);

    const dom = new JSDOM(html, {
        runScripts: "dangerously"
    });

    var test = dom.serialize();
    context.log(test);


    context.res = {
        body: test
    };
};

यह हेडर में एक स्क्रिप्ट टैग जोड़ रहा है लेकिन jQueryString के बजाय आंतरिक HTML "अपरिभाषित" है। JSDOM के बाहर (टिप्पणी की गई रेखा देखें) लॉगिंग jqueryString अपेक्षित के रूप में jquery.js की सामग्री प्रदर्शित करता है। लेकिन JSDOM के अंदर ऐसा लगता है कि वेरिएबल उपलब्ध नहीं है। मैं JSDOM को jqueryString कैसे पास कर सकता हूं?

javascript node.js azure-functions jsdom

0

René 25 जून 2019, 14:39

Answer 1

@PeterPan के इनपुट के साथ मैंने डॉकर आधारित Azure फ़ंक्शन के साथ कठपुतली.

इनिट डॉकर आधारित फंक्शनएप:

func init MyFunctionProj --docker (चुनें -> नोड -> जावास्क्रिप्ट)

estruyf/azure-function-node-puppeteer का उपयोग करने के लिए MyFunctionProj\Dockerfile संपादित करें और एफएस:

FROM estruyf/azure-function-node-puppeteer
RUN npm i fs
COPY . /home/site/wwwroot

MyFunctionProj\package.json में निर्भरता में fs जोड़ें:

"dependencies": {
    "fs": "0.0.1-security"
  }

एचटीपीट्रिगर फ़ंक्शन बनाएं:

cd MyFunctionProj
func new --name MyHttpTrigger --template "HttpTrigger"

समारोह के लिए पहुँच प्रदान करें:

MyFunctionProj\MyHttpTrigger\function.json में "authLevel": "anonymous" सेट करें (कारण के लिए देखें यहां।)

MyFunctionProj\MyHttpTrigger\content.html फ़ाइल बनाएँ:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ContentHtml</title>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>
</head>
<body>

<script>
    $(document).ready(function() {
       var myComputationResult = .... // use included scripts to perform computation
       $("#resultData").html(JSON.stringify(myComputationResult));
    });
</script>
<div id="resultData"></div>
</body>
</html>

MyFunctionProj\MyHttpTrigger\index.js में फंक्शन लॉजिक संपादित करें (यह< पर आधारित /ए>):

const puppeteer = require('puppeteer');
const fs = require("fs");

module.exports = async (context, req) => {    
    const browser = await puppeteer.launch({
        args: [
            '--no-sandbox',
            '--disable-setuid-sandbox'
        ]
    });

    var contentHtml = fs.readFileSync(__dirname + '//content.html', 'utf8');

    const page = await browser.newPage();
    await page.goto(`data:text/html,${contentHtml}`, { waitUntil: 'networkidle2' });
    const resultData = await page.evaluate(() => document.querySelector('#resultData').innerHTML);
    await browser.close();

    context.res = {
        // status: 200, /* Defaults to 200 */
        body: `Result: ${resultData}`
    };
};

डॉकर छवि बनाएँ:

docker build --tag <docker-id>/mydockerimage:v1.0.0 .

डोकर छवि चलाएँ:

docker run -p 8080:80 -it <docker-ID>/mydockerimage:v1.0.0

ब्राउज़र में स्थानीय फ़ंक्शन छवि का परीक्षण करें:

http://localhost:8080/api/MyHttpTrigger

डॉकर हब में छवि पुश करें:

docker login --username <docker-id>
docker push <docker-id>/mydockerimage:v1.0.0

एक नया एज़्योर फंक्शन ऑनलाइन बनाएं और डॉकर हब से छवि का उपयोग करें जैसा कि वर्णित है यहां।

0

René 1 जुलाई 2019, 15:16

Answer 2

मैंने jsdom नोड पैकेज का ध्यानपूर्वक निरीक्षण किया, तब मैंने पाया कि सुविधा Loading subresourcesको karma के माध्यम से हेडलेस क्रोम जैसे हेडलेस ब्राउज़र की आवश्यकता है। हालांकि, Win32k.sys (User32/GDI32) Restrictions के कारण Azure Web App sandbox में से, यह विंडोज़ के लिए Azure ऐप सेवा पर आपकी इच्छानुसार कभी भी ठीक काम नहीं करेगा, क्योंकि हेडलेस ब्राउज़र को GDI समर्थन की आवश्यकता होती है।

enter image description here

इसलिए मैंने अनुशंसा की कि आपको अपने फ़ंक्शन को लिनक्स के लिए Azure फ़ंक्शंस में माइग्रेट करने की आवश्यकता है (यह डॉकर कंटेनर पर आधारित है) इसे Azure Functions Core Tools आधिकारिक दस्तावेज़ के रूप में Create your first function hosted on Linux using Core Tools and the Azure CLI (preview) ने कहा। या आपको Windows का उपयोग करना होगा, Azure Windows VM आपका सबसे अच्छा विकल्प होगा।

आशा है कि इससे सहायता मिलेगी।

1

Peter Pan 28 जून 2019, 07:34

जावास्क्रिप्ट/नोड.जेएस एज़ूर फंक्शन में डीओएम और विंडो की आवश्यकता वाली आयातित स्क्रिप्ट का उपयोग कैसे करें

2 जवाब

संबंधित सवाल

जुड़े हुए प्रश्न

नए सवाल