Http 404 on Azure Websites for react app - node.js

I have published a react app which works locally to an azure website, I checked the files on the KUDU dashboard, and I can see the files there and the index.html
However, I cant browse to the site, not even directly to the .html file.
I created this web.config, but I guess I am missing some configuration
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="server.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="^server.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="server.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>

Basically the answer is to change the web.config to handle routing correctly like this:
<?xml version="1.0"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

Related

Azure AppService NodeJs with virtual directory

I have a website built on Angular7 with server side rendering deployed on an Azure App Service. I had to add a web.config file in order to make the server.js run.
Here's the web.config file
<?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>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^server.js\/debug[\/]?" />
</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="server.js"/>
</rule>
</rules>
</rewrite>
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<httpErrors existingResponse="PassThrough" />
</system.webServer>
</configuration>
This site is deployeed to mysite.com and everything works fine.
I now need to create a virtual directory mysite.com/app to hold a different application (on the old AngularJS). Without the server side rendering I just create the virtual directory on Azure Portal and everything works fine. Because of the server side and the "redirection" to server.js the virtual directory is no longer working.
Is there any Rule to put on the web.config file to ignore the requests of /app, not to run the nodejs server?
I got my response on another question (credit to dana) so I've just added the rule
<rule name="ignore app application" stopProcessing="true">
<match url="^app" />
<action type="None" />
</rule>
before the other rules. This way if the url typed is mysite.com/app the node server won't be "activated" and the virtual directory works as expected.

node app on azure occasionally redirecting to server.js

I have a Node.js (Express) app that is running on Azure App Service. Every once in a while, when I visit my domain, rather than executing the Node app, I will be taken to https://example.com/server.js. This doesn't happen often, but occasionally we'll have a user report that they can't get to our app and this ends up being the culprit.
To make matters worse, it's very hard, if not impossible, to reproduce. I have had some luck reproducing with a fresh install of a new browser, but not always.
I'm basically using the default web.config with a couple of added lines for HSTS/HTTPS. See below:
<?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 modules="iisnode" name="iisnode" path="server.js" verb="*"/>
</handlers>
<rewrite>
<rules>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^server.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="server.js"/>
</rule>
<!-- Redirect all HTTP to HTTPS -->
<rule name="HTTP to HTTPS redirect" stopProcessing="true">
<match url="(.*)"/>
<conditions>
<add ignoreCase="true" input="{HTTPS}" pattern="off"/>
</conditions>
<action redirectType="Permanent" type="Redirect" url="https://{HTTP_HOST}/{R:1}"/>
</rule>
</rules>
<outboundRules>
<rule enabled="true" name="Add Strict-Transport-Security when HTTPS">
<match pattern=".*" serverVariable="RESPONSE_Strict_Transport_Security"/>
<conditions>
<add ignoreCase="true" input="{HTTPS}" pattern="on"/>
</conditions>
<action type="Rewrite" value="max-age=31536000"/>
</rule>
</outboundRules>
</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>
Any suggestions on why this might be occurring?
I would recommend you install the extension named Redirect HTTP to HTTPS via the Azure portal rather than add a rule manually.

http to https using web.config appends server.js to url

I'm trying get all http traffic to redirect to https using web.config on azure. I'm using node.js stack.
I want the url to remain the same for all requests. Currently, however, it's appending server.js to the end of the route.
The problem:
Go to http://www.example.com/
Redirect to https://www.example.com/server.js
Below is my web.config file I'm using.
<?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="server.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="^server.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="server.js"/>
</rule>
<!-- Redirect all http traffic to https -->
<rule name="Redirect to https" stopProcessing="true">
<match url=".*" />
<conditions>
<add input="{HTTPS}" pattern="off" ignoreCase="true" />
</conditions>
<action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
</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>
Maybe you can try to install the extension named Redirect HTTP to HTTPS via the Azure portal, with this approach you have no need to add any rule for redirecting to HTTPS.

Azure rewrite rules causing error 404 in detailed logs

I have a website with the following structure at the root for a Node.js app
package.json
server.js
public
index.html
css
js
images
...other folders
I would like to take the person only inside the public folder with a forced HTTPS connection.
My current web.config file looks like 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="server.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="^server.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="server.js"/>
</rule>
<rule name="Force HTTPS" enabled="true">
<match url="(.*)" ignoreCase="false" />
<conditions>
<add input="{HTTPS}" pattern="off" />
</conditions>
<action type="Redirect" url="https://{HTTP_HOST}/{R:1}" appendQueryString="true" redirectType="Permanent" />
</rule>
<rule name="Redirect rquests to default azure websites domain" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAny">
<add input="{HTTP_HOST}" pattern="^zupbot\.azurewebsites\.net$" />
</conditions>
<action type="Redirect" url="https://www.zup.chat/{R:0}" />
</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>
Whenever I try to access my website, it tries finding a server.js and gives me this error
{"code":"NotAuthorized","message":"/server.js"}
My node.js code does this to serve static files
server.get('/.*/', restify.serveStatic({
//Ensure that people can only access the files within the public directory and none of the protected server files
directory: __dirname + '/public',
default: constants.INDEX_HTML,
match: /^((?!server.js).)*$/ // we should deny access to the application source
}));
How can I take the person straight inside the public folder always with an HTTPS connection? Thank you for your help in advance.
UPDATE 1
I added the HTTPS redirect before any other rule that has a stopProcessing=true and it works , however if I go to my native site http://.azurewebsites.net, it still takes me to the https version of it, how can I redirect sitename.azurewebsites.net to the https version of my custom domain?
Please try the following rewrite rules in web.config:
<rule name="DynamicContent" stopProcessing="true">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="server.js"/>
</rule>
<rule name="Redirect to https" enabled="true" patternSyntax="ECMAScript" stopProcessing="true">
<match url="(.*)"/>
<conditions>
<add input="{HTTPS}" pattern="Off"/>
</conditions>
<action type="Redirect" url="https://{HTTP_HOST}/{R:1}" appendQueryString="true" />
</rule>
Which will rewrite the url your_site.azurewebsites.net/<asset> to https protocol if there is a file named <asset> in public folder as you configured in restify.serveStatic.
And it will not rewrite the url those can match the route setting in your restify application.
Any further concern, please feel free to let me know.

Run node.js & WebAPI on same server for same site with IIS

I'm looking to slowly convert a Node.js application over to ASP.NET WebAPI 2.0. I'm currently using IIS and will stick with IIS. So, I would like to host them on the same server but direct some URIs over to the new platform.
How would I do this in the web.config? The current web.config for node.js looks like so:
<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="beta/app.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<!-- Don't interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^beta/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="beta/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="beta/app.js" />
</rule>
</rules>
</rewrite>
<httpErrors errorMode="Detailed"/>
</system.webServer>
</configuration>
The file structure is:
- web.config (the one shown above)
-> node
- app.js
- ...
-> webapi
- web.config
- global.asax
- ...
I was thinking that I should be writing a new rule which lists the URIs to go to the WebAPI. But, I'm not quite sure how to do that. My guess is that I would add a condition for each URI with the input attribute. I was also thinking I should point to the ASP.NET WebAPI project but I am even more clueless how I should go about doing that since Node.js I'm just pointing at the app.js file.
OK, this is what I ended up doing. It was actually pretty straight forward. But when you are not familiar with IIS it can be daunting.
I put the original web.config in with the node directory. I think the iisnode handler interferes with WebAPI config if you don't. So, the new node.js web.config in the node directory would look like this:
<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="app.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^app.js\/debug[\/]?" />
</rule>
</rules>
</rewrite>
<httpErrors errorMode="Detailed"/>
</system.webServer>
</configuration>
For root web.config I made it point to static files directly, bypassing node.js. Which means I'm going to have to write some custom code to handle rewrites for gzipped files - I'll figure that out later. I also added the attribute stopProcessing to each rewrite rule. This was also messing up the code, as it wouldn't actually rewrite where I wanted it too, since the rewrite would be overwritten. Note that the accept versioning header hasn't actually been tested yet - I don't have any reason to believe it wouldn't work though. The last rewrite points all uris to the webapi app by default.
In the WebAPI project I had to route all my routes to webapi/api since it isn't in the root folder. After I migrate everything from node.js I will probably make the webapi directory the root folder for the project so it won't need the webapi in my routing anymore. But this is all hidden from the client.
So here's the actual code:
<configuration>
<system.webServer>
<rewrite>
<rules>
<!-- test item for webapi folder -->
<rule name="StaticContent2" stopProcessing="true" >
<conditions>
<add input="{REQUEST_URI}" pattern="^/def" />
</conditions>
<action type="Rewrite" url="webapi{REQUEST_URI}" />
</rule>
<!-- rewrite static items which exist on node -->
<rule name="Node Static" stopProcessing="true" >
<conditions>
<add input="{REQUEST_URI}" pattern=".*\.[A-Za-z2]{2,5}$" />
</conditions>
<action type="Rewrite" url="node/public{REQUEST_URI}" />
</rule>
<rule name="WebAPI Version 2" stopProcessing="true">
<conditions>
<add
input="{HEADER_ACCEPT}"
pattern="vnd.fieldops.v2"
ignoreCase="true"
/>
</conditions>
<action type="Rewrite" url="webapi{REQUEST_URI}" />
</rule>
<!-- rewrite to node for dynamic items -->
<rule name="Node Dynamic" stopProcessing="true" >
<conditions>
<add
input="{REQUEST_URI}"
pattern="^/api/(dealerservicereports|chat|dealers|dealerequipment|dealercloseout|publications|tokens|users|\?)"
ignoreCase="true"
/>
</conditions>
<action type="Rewrite" url="node/app.js" />
</rule>
<!-- rewrite everything else to webapi -->
<rule name="WebAPI Dynamic" stopProcessing="true" >
<action type="Rewrite" url="webapi{REQUEST_URI}" />
</rule>
</rules>
</rewrite>
<httpErrors errorMode="Detailed"/>
</system.webServer>
</configuration>

Resources