Deploying Express 4.x app to Windows Azure - node.js

The new version of Express separates the modules from the "server" file. It now lives in /bin/www and I'd prefer to keep this convention if possible.
In the package.json file, the "start" script clearly points to the right place, but this is seemingly ignored by Azure.
How do I deploy an Express 4.x app without having a server.js file in the root directory? All I need to do is make it automatically call node ./bin/www instead of node server.js. Is there another root configuration file I can add specific to the cloud host (Azure?) This is how I got this working in Heroku, etc.

updated answer
The Azure team has since fixed this internally. A newly deployed express 4 app should work just fine on Azure Websites without any additional changes.
original answer
I'll start with the tl;dr. Create a web.config file in the root of your application and use this xml.
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<!--
By default IIS will block requests going to the bin directory for security reasons.
We need to disable this since that's where Express has put the application entry point.
-->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin" />
</hiddenSegments>
</requestFiltering>
</security>
<handlers>
<!-- Indicates that the www file is a node.js entry point -->
<add name="iisnode" path="/bin/www" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^bin\/www\/debug[\/]?" />
</rule>
<!--
First we consider whether the incoming URL matches a physical file in the /public folder.
This means IIS will handle your static resources, and you don't have to use express.static
-->
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>
<!-- All other URLs are mapped to the node.js entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="/bin/www"/>
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
This is a bit of a mess and took a while to track down. I really wish it was smart enough to look at package.json, but this is what we have to deal with for now. Normally Azure determine if it is a Node application by checking for an app.js or server.js file. If it finds that file, it will automatically create a web.config file very similar to what is above. In this case, it will detect app.js, but unlike 99% of other node applications, that's not actually the entry point. What we have to do is change the entry point to /bin/www like shown above.
The other issue we run into is that by default IIS blocks requests to the bin folder for security reasons. We can either rename the express bin folder, or tell IIS to get over it. That's what the hiddenSegments part of the xml file is for.

Related

Azure Node App (on Windows app service) Failing to Run

As a starting point for an application, I'm trying to get a simple Hello World running on Node in Azure (on a Windows app service). While the goal will be to push from an Azure DevOps pipeline, for now I'm just deploying from VS Code following this guide.
The application runs locally as expected, and the deploy to Azure is successfully moving the expected files (to include node_modules, package.json, app.js, and the various other code files). But the application is somehow failing to run correctly on Azure.
Any request results in a 500 error, whether for the root URL or explicitly for /app.js. (I was testing the latter to see if it just returned the file, but it's a 500 error.) I've enabled as much logging as I can find in Azure, but no more helpful information has surfaced. Just records of HTTP requests with generic 500 responses.
Some research led me to suspect that I need a web.config to tell IIS to use the node application. Following some samples found online, I've ended up with this:
<?xml version="1.0" encoding="utf-8"?>
<!--
This configuration file is required if iisnode is used to run node processes behind
IIS or IIS Express. For more information, visit:
https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
<configuration>
<system.webServer>
<!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
<webSocket enabled="false" />
<handlers>
<!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
<add name="iisnode" path="app.js" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^app.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 site entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="app.js"/>
</rule>
</rules>
</rewrite>
<!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />
<!--
You can control how Node is hosted within IIS using the following options:
* watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
* node_env: will be propagated to node as NODE_ENV environment variable
* debuggingEnabled - controls whether the built-in debugger is enabled
See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
-->
<!--<iisnode watchedFiles="web.config;*.js"/>-->
</system.webServer>
</configuration>
Which makes sense to me. It tells IIS to use iisnode, the entry point file, URL mapping to use that entry point, etc. After re-deploy I'm still getting generic 500 responses.
I'm a bit out of ideas on where else to look or what else to try at this time. I suspect it should be straightforward to just build a Hello World app and deploy it and that I must just be missing something. But what?

NodeJS at Azure : systematic 404 error on resource files

we have a nodeJS webapp at Azure which works fine.
When streaming the server logs, any time I load a page, I get a bunch of 404 errors on all resources (images, css, etc..). Yet the page shows up properly.
Detailed errors show the following:
Requested URL https://[myappname]:80/settings.png
Physical Path D:\home\site\wwwroot\settings.png
Logon Method Anonymous
Logon User Anonymous
The requested URL is clearly wrong, it should be https://[myappname].azurewebsites.net/settings.png, which is the public URL for the given resources, and works fine.
This problem loads huge amounts of logs and makes it impossible to use Web Server logs for now.
thank you!
Edit: unlike this problem, my pages load properly and the resource files are well available.
Solved I have added the following handler to my web.config :
<add name="UrlRoutingModule-4.0" path="*" verb="*" type="System.Web.Routing.UrlRoutingModule" preCondition="" />
I believe you need to configure a ruleset in your web.config for static file content.
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>
Node.js applications running on Azure Web Apps are hosted on IIS via IISNode. So, a web.config file is required to config your application on IIS. If you deploy your app to Azure App Service via Continuous Deployment, the web.config file will be automatically generated by Azure. Or you can download the file from here.
I am posting default web.config just for your reference"
<?xml version="1.0" encoding="utf-8"?>
<!--
This configuration file is required if iisnode is used to run node processes behind
IIS or IIS Express. For more information, visit:
https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
<configuration>
<system.webServer>
<!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
<webSocket enabled="false" />
<handlers>
<!-- Indicates that the app.js file is a node.js site to be handled by the iisnode module -->
<add name="iisnode" path="app.js" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^app.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 site entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="app.js"/>
</rule>
</rules>
</rewrite>
<!-- bin directory has no special meaning in node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />
<!--
You can control how Node is hosted within IIS using the following options:
* watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
* node_env: will be propagated to node as NODE_ENV environment variable
* debuggingEnabled - controls whether the built-in debugger is enabled
To debug your node.js application:
* set the debuggingEnabled option to "true"
* enable web sockets from the portal at https://manage.windowsazure.com/#Workspaces/WebsiteExtension/Website/aarontestnode/configure
* browse to https://aarontestnode.azurewebsites.net/app.js/debug/
See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
-->
<iisnode watchedFiles="web.config;*.js" debuggingEnabled="false" />
</system.webServer>
</configuration>
Hope it helps.
thanks for your answer.
I have nearly the same web.config, automatically generated. There is just a slight difference in the rule you pointed :
<rule name="StaticContent">
<action type="Rewrite" url="public{PATH_INFO}"/>
</rule>
My server code includes this:
app.use(express.static(path.join(__dirname, 'public')));

How to configure web.config for multiple virtual applications in Azure App Service?

I am trying to have multiple Node.js applications working in parallel in the same Azure App Service instance. I tried making a virtual application per Node.js app but I constantly get a server error (code 500). I use ZipDeploy or Azure DevOps to deploy my applications.
I suspect the problem might be that the web.config files associated with my applications is incorrect.
Here are some details on my setup:
In the Application settings menu of my App Service instance, I went to the Virtual applications and directories settings and put the following:
/ site\wwwroot Application x
/mysite1 site\wwwroot\mysite1 Application x
/mysite2 site\wwwroot\mysite2 Application x
My wwwroot directory looks as follows. To make sure the problem doesn't come from the code itself, I used the same Node.js application for all three:
index.html
server.js
scripts
web.config (*)
----- mysite1
|----- index.html
|----- server.js
|----- scripts
|----- web.config (**)
----- mysite2
|----- index.html
|----- server.js
|----- scripts
|----- web.config (***)
I use the default web.config file (provided by Kudu) for the three of them:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<webSocket enabled="false" />
<handlers>
<add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^server.js\/debug[\/]?" />
</rule>
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="server.js"/>
</rule>
</rules>
</rewrite>
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<httpErrors existingResponse="PassThrough" />
</system.webServer>
</configuration>
Using this configuration, I can reach https://myappservice.azurewebsites.net/ without issue but https://myappservice.azurewebsites.net/mysite1 only returns a server error.
I tried taking off the handlers from the web.config files in subdirectories (** and ***) as instructed in similar questions but to no avail.
What is the correct configuration for these three files? I suppose the rewrite rules need to be adjusted but I am unsure what is the exact expected value for each.
I finally managed to pinpoint the exact problem through the IIS logs (/LogFiles/W3SVC.../ on Kudu) :
ModuleName="RewriteModule", Notification="SEND_RESPONSE", HttpStatus="500", HttpReason="URL Rewrite Module Error.", HttpSubStatus="52", ErrorCode="Cannot create a file when that file already exists.
(0x800700b7)", ConfigExceptionInfo="\\?\D:\home\site\wwwroot\mysite1\web.config ( 16) :Cannot add duplicate collection entry of type 'rule' with unique key attribute 'name' set to 'NodeInspector'
"
What needed to be changed were the handler and rule names in the child web.config file, so that they wouldn't clash with the names in the parent web.config file. Everything works correctly now.
You could change Virtual applications and directories settings as below:
/ site\wwwroot Application x
/mysite1 site\mysite1 Application x
/mysite2 site\mysite2 Application x
When you deploy with zipdeploy or DevOps, the site name and Destination URL is like below:
For more details you could refer to Deploying multiple virtual directories to a single Azure Website.

Angular app in Azure displays raw js text

I've got an angular app that runs fine locally. I can run http-server and access the page. Now I am trying to move it to run in Azure. When I access the sitename.azurewebsites.net URL all I see is the actual text of my app.js file. Its not rendering as if it were on a nodejs server.
Here is the local directory structure. From the command line I cd to the app folder (app.js is in app\scripts folder) and use http-server to start it up. I see the angular app rendered as expected.
In Azure, I have web.config files that points to app/scripts/app.js file. When I access the sitename.azurewebsites.net URL, instead of the angular app running, I just get the app.js file served up to me as text. Like so:
Not sure what Azure setting is missing to let it know to run this as an Angular app. In the app Service I have an entry under Application Settings for Node:
WEBSITE_NODE_DEFAULT_VERSION 6.9.1
Here is the directory structure in Azure:
Here is the web config:
<?xml version="1.0" encoding="utf-8"?>
<!--
This configuration file is required if iisnode is used to run node processes behind
IIS or IIS Express. For more information, visit:
https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
<configuration>
<system.webServer>
<!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
<webSocket enabled="false" />
<handlers>
<!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
<add name="iisnode" path="app\scripts\app.js" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="app\scripts\^app.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 site entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="app\scripts\app.js"/>
</rule>
</rules>
</rewrite>
<!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />
</system.webServer>
</configuration>
Well there were a few issues here but what I discovered :
the contents of the dist folder are all that was needed - I don't even have the web.config file anymore
the dist did not generate all files. The /scripts/vendor*.js file that was generated was empty. I fixed that by following suggestions here: Grunt build not populate scripts.js with bower_components
Updated the App Service-> Application Settings->Virtual applications and directories to point to site\wwwroot\dist - this probably isn't needed, I copied the dist folder instead of just it's contents. If I put the contents at the wwwroot level I probably would need this change.

Sails looking in wrong directory

I'm new to sails.js and node.js, so the question might be trivial, but I couldn't find the answer. I have deployed my node.js app to a web site in IIS, so the app can be reached at http://example.com/myapp/. When browsing to http://myhost.com/myapp/app.js, I get http status 404 (Not found), because sail.jss is looking for URLs like http://myhost.com/images/logo.png, but this file is in fact located at http://myhost.com/myapp/.tmp/public/images/logo.png. This .tmp folder seems to be created on the fly by the framework.
Can someone shed some light on this?
[edit]
I have added rewrite rules in the web.config and it works much better. But it only works if I put the application at the root of my web site (acessing http://myhost.com/). If I put the application in a lower level (accessing through http://myhost.com/myApp), then the added rules do not seem to produce any effect.
Here is the web.config:
<handlers>
<add name="iisnode" path="app.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<rule name="StaticContent">
<action type="Rewrite" url="assets{REQUEST_URI}"/>
</rule>
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="app.js"/>
</rule>
</rules>
</rewrite>
The key is to allow Express to handle all of the routing. The best way to do that is to route all traffic to app.js via iisnode (from: https://nodestream.wordpress.com/2015/11/24/sails-js-configuration-for-iis/):
<configuration>
<system.webServer>
<!-- Tell IIS to use the iisnode module to run your
application -->
<handlers>
<add name="iisnode" path="app.js" verb="*" modules="iisnode" />
</handlers>
<!-- Add iisnode with the #nodeProcessCommand line if
you see the error: Make sure the node.exe executable
is available at the location specified in the
system.webServer/iisnode/#nodeProcessCommandLine element
of web.config. -->
<iisnode
nodeProcessCommandLine="%ProgramFiles%\nodejs\node.exe"
/>
<!-- Since behind the covers, Sails.js is just an express app
rewrite all urls to processed by iisnode via app.js. This
will sort out things like the routing to your public
resources (images, js, styles) and all configured rest
endpoints. -->
<rewrite>
<rules>
<rule name="root">
<match url=".*" />
<action type="Rewrite" url="app.js" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Well the .tmp folder is created by Grunt. You can reference the gruntfile and the task folder. The pipeline.js allows you to select files/folders for grunt to inject and spit out. You can easily change this to point to /images and /js folders.
tasks/pipline.js
module.exports.cssFilesToInject = cssFilesToInject.map(function(path) {
return '.tmp/public/' + path; // Change this
});
module.exports.jsFilesToInject = jsFilesToInject.map(function(path) {
return '.tmp/public/' + path; // Change this
});
Another solution I could think of, however I am not sure if IIS has it, is to do a rewrite rule. When a user goes to site.com/images, point them to .tmp/public/images. It is common to see that in Apache servers.

Resources