出版与发展将Angular2应用程序部署到Azure

时间:2017-07-17 23:05:44

标签: angular azure http azure-web-sites web-deployment

我有一个Angular 2应用程序(在本地工作得很好),我想在Azure中托管。

我按照本教程https://prmadi.com/running-angular2-app-on-azure-app-services-with-ci-cd/使用我在我的根文件夹中使用index.html添加的web.config:

的web.config:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <clear />
                <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>
                <rule name="Angular" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="index.html" />
                </rule>
            </rules>
            <outboundRules>
                <rule name="AdjustCacheForHTMLPages" preCondition="IsIndexHTML">
                    <match serverVariable="RESPONSE_Cache-Control" pattern=".*" />
                    <action type="Rewrite" value="no-cache, no-store, must-revalidate" />
                </rule>
                <preConditions>
                    <preCondition name="IsIndexHTML">
                        <add input="{REQUEST_FILENAME}" pattern="index\.html" />
                    </preCondition>
                </preConditions>
            </outboundRules>
        </rewrite>
    </system.webServer>
</configuration>

azure上的git deployement工作得很好。 但该应用程序不会加载。当我在浏览器中打开它时出现http 500错误:

https://img15.hostingpics.net/pics/385274Capturedecran20170717a160101.png

当我进入我天蓝色webApp的日志时,我得到了:

</head> 
<body> 
<div id="content"> 
<div class="content-container"> 
<h3>HTTP Error 500.0 - Internal Server Error</h3> 
<h4>The page cannot be displayed because an internal server error has occurred.</h4> 
</div> 
<div class="content-container"> 
<fieldset><h4>Most likely causes:</h4> 
<ul>    <li>IIS received the request; however, an internal error occurred during the processing of the request. The root cause of this error depends on which module handles the request and what was happening in the worker process when this error occurred.</li>    <li>IIS was not able to access the web.config file for the Web site or application. This can occur if the NTFS permissions are set incorrectly.</li>    <li>IIS was not able to process configuration for the Web site or application.</li>     <li>The authenticated user does not have permission to use this DLL.</li>   <li>The request is mapped to a managed handler but the .NET Extensibility Feature is not installed.</li> </ul> 
</fieldset> 
</div> 
<div class="content-container"> 
<fieldset><h4>Things you can try:</h4> 
<ul>    <li>Ensure that the NTFS permissions for the web.config file are correct and allow access to the Web server's machine account.</li>     <li>Check the event logs to see if any additional information was logged.</li>  <li>Verify the permissions for the DLL.</li>    <li>Install the .NET Extensibility feature if the request is mapped to a managed handler.</li>  <li>Create a tracing rule to track failed requests for this HTTP status code. For more information about creating a tracing rule for failed requests, click <a href="http://go.microsoft.com/fwlink/?LinkID=66439">here</a>. </li> </ul> 
</fieldset> 
</div> 

<div class="content-container"> 
<fieldset><h4>Detailed Error Information:</h4> 
<div id="details-left"> 
<table border="0" cellpadding="0" cellspacing="0"> 
<tr class="alt"><th>Module</th><td>&nbsp;&nbsp;&nbsp;AspNetInitializationExceptionModule</td></tr> 
<tr><th>Notification</th><td>&nbsp;&nbsp;&nbsp;BeginRequest</td></tr> 
<tr class="alt"><th>Handler</th><td>&nbsp;&nbsp;&nbsp;ExtensionlessUrlHandler-Integrated-4.0</td></tr> 
<tr><th>Error Code</th><td>&nbsp;&nbsp;&nbsp;0x00000000</td></tr> 

</table> 
</div> 
<div id="details-right"> 
<table border="0" cellpadding="0" cellspacing="0"> 
<tr class="alt"><th>Requested URL</th><td>&nbsp;&nbsp;&nbsp;http://edcclone2:80/</td></tr> 
<tr><th>Physical Path</th><td>&nbsp;&nbsp;&nbsp;D:\home\site\wwwroot\dist</td></tr> 
<tr class="alt"><th>Logon Method</th><td>&nbsp;&nbsp;&nbsp;Not yet determined</td></tr> 
<tr><th>Logon User</th><td>&nbsp;&nbsp;&nbsp;Not yet determined</td></tr> 

</table> 
<div class="clear"></div> 
</div> 
</fieldset> 
</div> 

<div class="content-container"> 
<fieldset><h4>More Information:</h4> 
This error means that there was a problem while processing the request. The request was received by the Web server, but during processing a fatal error occurred, causing the 500 error. 
<p><a href="http://go.microsoft.com/fwlink/?LinkID=62293&amp;IIS70Error=500,0,0x00000000,9200">View more information &raquo;</a></p> 
<p>Microsoft Knowledge Base Articles:</p> 


</fieldset> 
</div> 
</div> 
</body> 
</html> 

2 个答案:

答案 0 :(得分:1)

暂时在web.config文件的相应标记中添加以下内容:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpErrors errorMode="Detailed" />
    </system.webServer>
    <system.web>
        <customErrors mode="Off" />
        <compilation debug="true" />
    </system.web>
</configuration>

添加完成后,再次加载页面以查看是否可以获得更详细的错误。

答案 1 :(得分:0)

主要问题是安装Node模块(以及一些关税模块,如ng-smart-tables)。 我开始使用一个有角度的2快速启动项目,当我正在进行工作时,它已更新为角度4。

并且nom安装不适用于它自己,我必须通过命令行安装所有自定义模块。

为了解决这个问题,我用

开始了一个新项目
ng new

我移动了我的组件和模块。另外,我将自定义包放在package.json文件中,按照教程进行操作,一切运行正常(不需要web.config文件)