none
[Node.js][Web Apps] Can't access my web site - error 403 RRS feed

  • Question

  • I've created a React Web Starter Kit project which runs successfully on my local Windows 10 box.  I have followed directions to publish my web app to Azure.  I also followed directions to have Azure's Kudu run a custom script for installing and building my app.

    The custom deployment works correctly but I cannot access my site.  I receive a 403 when I try to browse http://axiscode.azurewebsites.com.  Could it be that my site was correctly built, but Azure/Kudu did not bother to execute "node server.js"?

    The custom deployment output looks like this:

    remote: Preparing deployment for commit id '058581114c'.
    remote: Running custom deployment command...
    remote: Running deployment command...
    remote:
    remote: D:\home\site\repository>call npm install
    remote: ...............................
    remote: D:\home\site\repository
    remote: npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
    remote: +-- babel@5.8.34
    remote: npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.6
    remote: ¦ +-- glob@5.0.15
    remote: npm WARN optional Skipping failed optional dependency /browser-sync/chokidar/fsevents:
    remote: +-- babel-core@5.8.34
    remote: npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.6
    remote: ¦ +-- regenerator@0.8.40
    remote: ¦   +-- commoner@0.10.4
    remote: ¦     +-- glob@5.0.15
    remote: +-- eslint@1.10.3
    remote: ¦ +-- glob@5.0.15
    remote: +-- jest-cli@0.8.2
    remote: ¦ +-- istanbul@0.3.22
    remote: ¦   +-- fileset@0.2.1
    remote: ¦     +-- glob@5.0.15
    remote: +-- jscs@2.8.0
    remote: ¦ +-- glob@5.0.15
    remote: +-- postcss-import@7.1.3
    remote: ¦ +-- glob@5.0.15
    remote: +-- precss@1.4.0
    remote:   +-- postcss-mixins@2.1.1
    remote:     +-- globby@3.0.1
    remote:       +-- glob@5.0.15
    remote:
    remote:
    remote: > @ build D:\home\site\repository
    remote: > babel-node tools/run build
    remote:
    remote: ...................
    remote: [06:40:25] Starting 'build'...
    remote: [06:40:25] Starting 'clean'...
    remote: [06:40:25] Finished 'clean' after 31 ms
    remote: [06:40:25] Starting 'copy'...
    remote: build/package.json
    remote: [06:40:25] Finished 'copy' after 234 ms
    remote: [06:40:25] Starting 'bundle'...
    remote: .....................
    remote: Child
    remote:     Time: 24924ms
    remote:                            Asset     Size  Chunks             Chunk Names
    remote:     main.js?e1ad0f66932a7e39e0b4  2.85 MB       0  [emitted]  main
    remote: Child
    remote:     Time: 24236ms
    remote:             Asset    Size  Chunks             Chunk Names
    remote:         server.js  204 kB       0  [emitted]  main
    remote:     server.js.map  186 kB       0  [emitted]  main
    remote: [06:40:51] Finished 'bundle' after 25924 ms
    remote: [06:40:51] Finished 'build' after 26189 ms
    remote: ..........................................................................................................................................
    remote: D:\home\site\repository\build\assets.js
    remote: D:\home\site\repository\build\package.json
    remote: D:\home\site\repository\build\server.js
    remote: D:\home\site\repository\build\server.js.map
    remote: D:\home\site\repository\build\content\about.jade
    remote: D:\home\site\repository\build\content\index.jade
    remote: D:\home\site\repository\build\content\privacy.jade
    remote: D:\home\site\repository\build\public\apple-touch-icon.png
    remote: D:\home\site\repository\build\public\browserconfig.xml
    remote: D:\home\site\repository\build\public\crossdomain.xml
    remote: D:\home\site\repository\build\public\favicon.ico
    remote: D:\home\site\repository\build\public\humans.txt
    remote: D:\home\site\repository\build\public\main.js
    remote: D:\home\site\repository\build\public\robots.txt
    remote: D:\home\site\repository\build\public\tile-wide.png
    remote: D:\home\site\repository\build\public\tile.png
    remote: 16 File(s) copied
    remote: Custom build finished successfully.
    remote: Running post deployment command(s)...
    remote: Deployment successful.
    To https://Mystagogue@axiscode.scm.azurewebsites.net:443/AxisCode.git
       22fbf15..0585811  master -> master

    -Brent Arias


    Monday, January 11, 2016 7:10 AM

Answers

  • As the introduction at How to Build, Test, Deploy of the react-starter-kit Getting Started guide, I followed it and configure a few custom configurations on Azure, it works fine on my side, here are my steps for your information:

    1. clone the project repo at https://github.com/kriasoft/react-starter-kit to local,  and deploy it to Azure Web app via GI, you can refer to Continuous deployment using GIT in Azure App Service
    2. login Azure mange portal, enabled EDIT IN VISUAL STUDIO ONLINE under CONFIGURE tab, then I can leverage VSO to modify the code on Azure online. 
    3. click the edit in VSO under the DASHBOARD of your manage portal site, click the "open console" at left nav on VSO.
    4. run following commands: 
    npm update
    npm run build


    1. create a file named `web.config` at the root directory of your site, with the following content:
    <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="build/server.js" verb="*" modules="iisnode" />
        </handlers>
    
        <rewrite>
          <rules>        
    
            <!-- 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="build/server.js" />
            </rule>
          </rules>
        </rewrite>
      </system.webServer>
    </configuration>
    

    After all, click "Run" button at left nav to have a test view.

    Any concern, please feel free to let me know.

    • Marked as answer by Brent Arias Monday, January 18, 2016 6:15 PM
    Tuesday, January 12, 2016 5:41 AM
    Moderator

All replies

  • Hi,

    I would suggest that you start with enabling the diagnostics for your website to isolate and get insight on the issue.
    You can enable diagnostic logs following the steps given in the link below:

    https://azure.microsoft.com/en-in/documentation/articles/web-sites-enable-diagnostic-log/

    You can also browse through the Kudu console by accessing the url: https://****.scm.azurewebsites.net/ (enter your website name instead of ****
    You should be able to find the log files under the debug console. Please check if there are any failure logs. You can refer to the link below for more information on this:

    https://github.com/projectkudu/kudu/wiki/Investigating-issues

    Regards,
    Azam Khan

    Monday, January 11, 2016 5:17 PM
  • Hi Brent,

    i checked your site, under "D:\home\site\wwwroot", i don`t see any web.config

    Azure App Service runs nodejs app thru iisnode, i believe you are using your own custom deployment script, so you will have to create your own web.config together in your code.

    below is a sample web.config. if your entry file is not server.js at the root. please modify below line

          <add name="iisnode" path="server.js" verb="*" modules="iisnode"/>

    <?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>
          </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>
    

    Tuesday, January 12, 2016 1:38 AM
  • As the introduction at How to Build, Test, Deploy of the react-starter-kit Getting Started guide, I followed it and configure a few custom configurations on Azure, it works fine on my side, here are my steps for your information:

    1. clone the project repo at https://github.com/kriasoft/react-starter-kit to local,  and deploy it to Azure Web app via GI, you can refer to Continuous deployment using GIT in Azure App Service
    2. login Azure mange portal, enabled EDIT IN VISUAL STUDIO ONLINE under CONFIGURE tab, then I can leverage VSO to modify the code on Azure online. 
    3. click the edit in VSO under the DASHBOARD of your manage portal site, click the "open console" at left nav on VSO.
    4. run following commands: 
    npm update
    npm run build


    1. create a file named `web.config` at the root directory of your site, with the following content:
    <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="build/server.js" verb="*" modules="iisnode" />
        </handlers>
    
        <rewrite>
          <rules>        
    
            <!-- 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="build/server.js" />
            </rule>
          </rules>
        </rewrite>
      </system.webServer>
    </configuration>
    

    After all, click "Run" button at left nav to have a test view.

    Any concern, please feel free to let me know.

    • Marked as answer by Brent Arias Monday, January 18, 2016 6:15 PM
    Tuesday, January 12, 2016 5:41 AM
    Moderator
  • The absence of the web.config file was indeed the problem.  The various documentation sources I consulted had not mentioned it.

    -Brent Arias

    Monday, January 18, 2016 6:11 PM
  • I tried a variation of what you've presented here.  I setup continuous deployment to Azure from a local git repository (instead of VS Online) and issued the "npm run deploy" command offered by the React Starter Kit.

    Not only did this properly deploy the folders as needed, it also created the web.config file that I needed.

    Your post sent me in the right direction, and gave me the bonus of information about VS Online.  Thank you!


    -Brent Arias

    Monday, January 18, 2016 6:15 PM