Deploy Angular Universal on IIS - node.js

I Have a Angular Universal Project and I need to run that on the IIS and must be run main.js in first time .
I Try for some Wat but it Not worked :
A : Install IISnode
B : Active CGI into the Turn windows features on or off
C : Using this web.config:
<configuration>
<system.webServer>
<handlers>
<add name="iisnode" path="/main.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<rule name="nodejs">
<match url="(.*)" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Rewrite" url="/main.js" />
</rule>
</rules>
</rewrite>
<security>
<requestFiltering>
<hiddenSegments>
<add segment="node_modules" />
<add segment="iisnode" />
</hiddenSegments>
</requestFiltering>
</security>
</system.webServer>
</configuration>
but its not worked for me , and Show me this Error :
How Can i Solve this Problem and run Angular universal in on IIS ?

Related

Http 404 on Azure Websites for react app

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>

Azure node.js relative paths with graphql cli

I have a small node.js application acting as a graph-api created with graphql-cli.
Everything works fine on localhost, but when I try to run it in azure as a web app, I seem to have a problem with paths. The below snippet is working on localhost running npm start
const server = new GraphQLServer({
typeDefs: './src/schema.graphql',
resolvers,
context: req => ({
...req,
db: new Prisma({
typeDefs: 'src/generated/prisma.graphql',
endpoint: 'xxx',
secret: 'xxx',
debug: true,
}),
}),
})
The path to one of the .graphql-file is defined:
typeDefs: './src/schema.graphql',
Which I find a bit weird considering the folder structure where index.js is in the same folder as schema.graphql
Anyhow, this is working on localhost, but when trying to run it as an azure web app I get the following error:
No schema found for path: D:\home\site\wwwroot\src\src\schema.graphql
Since this is just a scaffolded app, I don't want to change the paths in code. I don't think they are wrong since it is working on localhost. I´m thinking that I'm missing some configuration on azure.
This is my web.config:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<webSocket enabled="false" />
<handlers>
<add name="iisnode" path="src/index.js" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^src/index.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="src/index.js"/>
</rule>
</rules>
</rewrite>
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<httpErrors existingResponse="PassThrough" />
</system.webServer>
</configuration>
And my iisnode.yml looks just like this:
nodeProcessCommandLine: "D:\Program Files (x86)\nodejs\8.4.0\node.exe"
I´ve tried a bunch of different node versions, but I'm currently running 8.4.0 on my localhost where its working
Anyone has any ideas?
You need to move the index.js file to your root and change the web.config to:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<webSocket enabled="false" />
<handlers>
<add name="iisnode" path="index.js" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^index.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="index.js"/>
</rule>
</rules>
</rewrite>
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<httpErrors existingResponse="PassThrough" />
</system.webServer>
</configuration>

IIS Rewrite, Exclude Folders and Subfolders - Swagger Case

I have a WebApp with an AspNetCore WebAPI + AngularApp on Azure with IIS rewrite rules in my Web.Config based on this article: https://weblog.west-wind.com/posts/2017/Apr/27/IIS-and-ASPNET-Core-Rewrite-Rules-for-AspNetCoreModule
I would like to avoid rewriting on Swagger, so I added this rule as the first rule:
<rule name="swagger" enabled="true" stopProcessing="true">
<match url="swagger/.*" />
<action type="None" />
</rule>
Based on this website: https://www.regextester.com/
The rules is supposed to exclude swagger/ and all the subfolders and files too. But It s not the case.
This is what I can see when I open http://[MYWEBSITE]/swagger/
The Angular app works correctly.
I already made some search about that:
How to exclude a directory with IIS URL rewriting?
How to Exclude Directories from Rules in Web.config (ASP.NET)
https://learn.microsoft.com/en-us/iis/extensions/url-rewrite-module/url-rewrite-module-configuration-reference
Thanks for your help.
EDIT 1:
Just to let you know, with the default web.config:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<handlers>
<add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified" />
</handlers>
<aspNetCore processPath="dotnet" arguments=".\[MYWEBAPP].Api.dll" stdoutLogEnabled="false" stdoutLogFile="\\?\%home%\LogFiles\stdout" />
</system.webServer>
</configuration>
I can correctly see Swagger working:
EDIT 2:
During my tests, I removed the rewrite rules to focus only on the Handlers and I noticed that theses rules make problem:
It s normal, Swagger is build in the .NetCore WebApi. I m looking for a way to exclude a specific folder from a handlers.
Based on this response: IIS Handlers exclude a Directory when processing htm requests
I created a web.config in 'D:\home\site\wwwroot\wwwroot\swagger' on Azure with the following configuration:
<system.webServer>
<handlers>
<remove name="StaticFileModuleHtml" />
<remove name="StaticFileModuleJs" />
<remove name="StaticFileModuleCss" />
<remove name="StaticFileModulePng" />
</handlers>
</system.webServer>
EDIT 3:
Clearly the problem comes from the Static handlers.
If I want to use Swagger, I need to disable them.
If I want to access to my angular App, I need to add them.
I saw here: https://github.com/domaindrivendev/Swashbuckle.AspNetCore#swashbuckleaspnetcorecli
That it seems possible to extract the content from the SwaggerUi directly in a folder on built, but currently, the Nugget Package is not available:
https://github.com/domaindrivendev/Swashbuckle.AspNetCore/issues/601
I will keep you update. If someone has an idea, it will be helpful. I m probalbly not the only to try to do that :).
But the problem is still there.
I finally found a solution!
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="wwwroot-static" stopProcessing="true">
<match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg))" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_URI}" pattern="swagger/" negate="true" />
</conditions>
<action type="Rewrite" url="wwwroot/{R:1}" />
</rule>
<rule name="empty-root-index" stopProcessing="true">
<match url="^$" />
<action type="Rewrite" url="wwwroot/index.html" />
</rule>
<rule name="AngularJS-Html5-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" />
<add input="{REQUEST_URI}" pattern="swagger/" negate="true" />
</conditions>
<action type="Rewrite" url="wwwroot/index.html" />
</rule>
</rules>
</rewrite>
<handlers>
<add name="StaticFileModuleHtml" path="*.htm*" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
<add name="StaticFileModuleSvg" path="*.svg" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
<add name="StaticFileModuleJs" path="*.js" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
<add name="StaticFileModuleCss" path="*.css" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
<add name="StaticFileModuleJpeg" path="*.jpeg" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
<add name="StaticFileModuleJpg" path="*.jpg" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
<add name="StaticFileModulePng" path="*.png" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
<add name="StaticFileModuleGif" path="*.gif" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
<add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified" />
</handlers>
<aspNetCore processPath="dotnet" arguments=".\[MYWEBAPP].dll" stdoutLogEnabled="false" stdoutLogFile="\\?\%home%\LogFiles\stdout" />
</system.webServer>
</configuration>
My mistake during the Edit 2 was to create a Swagger folder in wwwroot/wwwroot instead of wwwroot/ directly.
Here is the web.config to add in wwwroot/swagger:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<handlers>
<!--We need to add this web.config to avoid conflict on Azure between Angular App and Swagger -->
<remove name="StaticFileModuleHtml" />
<remove name="StaticFileModuleSvg" />
<remove name="StaticFileModuleJs" />
<remove name="StaticFileModuleCss" />
<remove name="StaticFileModuleJpeg" />
<remove name="StaticFileModuleJpg" />
<remove name="StaticFileModulePng" />
<remove name="StaticFileModuleGif" />
</handlers>
</system.webServer>
</configuration>
You can now access to:
http(s)://[MYWEBAPP]
http(s)://[MYWEBAPP]/[ANGULAR ROUTE]
http(s)://[MYWEBAPP]/Swagger
I hope it will help someone :). If you have any questions, please ask.
First of all, because Swagger does not make a real folder, so it is not a perfect idea to make a folder in wwwroot named swagger and make that web.config inside of it. I consider that the default address for your swagger UI is: localhost:[random-port-number]/swagger/index.html. It can be different based on your swagger version and you can also change it to something else like below:
app.UseSwagger(c =>
{
c.RouteTemplate = "SampleApi/swagger/{documentName}/swagger.json";
});
app.UseSwaggerUI(c =>
{
c.SwaggerEndpoint("/SampleApi/swagger/v1/swagger.json", "Sample API");
c.RoutePrefix = "SampleApi/swagger";
});
For more information see this article. The version of my Swashbuckle.AspNetCore is 4.0.1
I also added API to the routes in order to be able to use your Microsoft web APIs in your project from font-end by React or Angular or anything else,
you just need to add this to your main web.config in the project:
<rules>
<rule name="wwwroot-static" stopProcessing="true">
<match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg|ico|axd))" />
<!--Handle static file requests and server them from the wwwroot-->
<conditions logicalGrouping="MatchAll">
<add input="{HTTP_METHOD}" pattern="GET|HEAD" />
<add input="{REQUEST_URI}" pattern="/swagger/.*" negate="true" />
</conditions>
<action type="Rewrite" url="wwwroot/{R:1}" />
</rule>
<rule name="html5-routes" stopProcessing="true">
<match url=".*" />
<!-- Handle all paths except /api/ and pass the route onto the wwwroot/index.html -->
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<!-- Add rule to negate file requests e.g. css/html/images-->
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<!-- Add rule to negate directories-->
<add input="{REQUEST_URI}" pattern="^/api/" negate="true" />
<add input="{REQUEST_URI}" pattern="/swagger/.*" negate="true" />
<!-- Add rule to negate paths and let them through the MVC-->
<add input="{HTTP_METHOD}" pattern="GET|HEAD" />
</conditions>
<action type="Rewrite" url="wwwroot/index.html" />
</rule>
</rules>

Set Node.js Environment Variable (NODE_ENV) in iisnode to Production/Development/Test

How do we tell iisnode to run our Node.js application environment in production/development/test?
We have successfully gotten our Node.js app running with iisnode but process.env.NODE_ENV is coming out as 'undefined'.
At the moment, our web.config file is written this way:
<configuration>
<system.webServer>
<handlers>
<add name="iisnode" path="app.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<rule name="app">
<match url="/*" />
<action type="Rewrite" url="app.js" />
</rule>
</rules>
</rewrite>
<security>
<requestFiltering>
<hiddenSegments>
<add segment="node_modules" />
</hiddenSegments>
</requestFiltering>
</security>
</system.webServer>
<appSettings>
<add key="NODE_ENV" value="production" />
</appSettings>
</configuration>
Joachim is right above that adding <iisnode node_env="production" /> to web.config allows control over the NODE_ENV value. Another way is to add the iisnode.yml file next to your web.config, and in there spcify the NODE_ENV value as node_env: production. See other settings you can use in iisnode.yml at https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/iisnode.yml
For the sake of clarity the web.config file would look like this:
<configuration>
<system.webServer>
<handlers>
<add name="iisnode" path="app.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<rule name="app">
<match url="/*" />
<action type="Rewrite" url="app.js" />
</rule>
</rules>
</rewrite>
<security>
<requestFiltering>
<hiddenSegments>
<add segment="node_modules" />
</hiddenSegments>
</requestFiltering>
</security>
<iisnode NODE_ENV="production" /> <=== Add env required here
</system.webServer>
</configuration>

Azure Websites PHP API - 405 Method Not Allowed on PUT and DELETE

I'm building a simple PHP web service using Azure Web Sites and I'm having trouble getting it to support PUT and DELETE http methods. Assuming it's something that'll have to go into the web.config file - I've tried a few options from around the interwebs but non of them seem to function properly. Any ideas?
Here's the web.config file as it currently stands:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<handlers>
</handlers>
<security>
</security>
<directoryBrowse enabled="false" />
<caching>
<profiles>
<add extension=".php" policy="DontCache" kernelCachePolicy="DontCache" />
<add extension=".html" policy="CacheForTimePeriod" kernelCachePolicy="CacheForTimePeriod" duration="14:00:00" />
</profiles>
</caching>
<rewrite>
<rules>
<rule name="block favicon" stopProcessing="true">
<match url="favicon\.ico" />
<action type="CustomResponse" statusCode="404" subStatusCode="1"
statusReason="The requested file favicon.ico was not found"
statusDescription="The requested file favicon.ico was not found" />
</rule>
<rule name="Cols Rule" stopProcessing="true">
<match url="^(.*)$" ignoreCase="false" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
<add input="{URL}" pattern="^/favicon.ico$" ignoreCase="false" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
</conditions>
<action type="Rewrite" url="index.php?q={R:1}" appendQueryString="true" />
</rule>
</rules>
</rewrite>
<defaultDocument>
<files>
<remove value="index.php" />
<add value="index.php" />
</files>
</defaultDocument>
</system.webServer>
</configuration>
I do not see that you have handler added into your web.config. I haven't personally tested but someone suggested that PUT and DELETE should work with Windows Azure Website however you would need to configure them correctly on your Windows Azure Websites through web.config.
Following is the simple configuration you can use to set it up:
<configuration>
<system.webServer>
<handlers>
<remove name="PHP53_via_FastCGI" />
<add name="PHP53_via_FastCGI" path="*.php"
verb="GET, PUT, POST, HEAD, DELETE"
modules="FastCgiModule"
scriptProcessor="D:\Program Files (x86)\PHP\v5.3\php-cgi.exe"
resourceType="Either" requireAccess="Script" />
</handlers>
</system.webServer>
</configuration>
It didn't work with DELETE as the last option, and here's the code modified for PHP54 on Azure. But thanks to Avkash!
<handlers>
<remove name="PHP54_via_FastCGI" />
<add name="PHP54_via_FastCGI" path="*.php"
verb="GET, PUT, POST, DELETE, HEAD"
modules="FastCgiModule"
scriptProcessor="D:\Program Files (x86)\PHP\v5.4\php-cgi.exe"
resourceType="Either" requireAccess="Script" />
</handlers>

Resources