2017-05-24 1 views
0

Ich habe viel googelt, und ich habe nicht herausgefunden, wie es geht. Ich habe eine Web-App, die ich gerne auf Azure bereitstellen würde. Ich erzeuge den Link, aber die Routen, die meine React-Komponenten verwenden, geben einen 500-Statuscode zurück.Veröffentlichen zu Azure, asp.net Kern React App

Für meine Komponenten verwende ich JSX und ich habe sie im wwwroot-Ordner unter/js (ich benutze nicht ES16).

Ich brauche etwas, um es zu bündeln und diese jsx in js richtig zu verarbeiten? Ich verstehe nicht, warum es auf localhost funktioniert.

Auf Startup.cs, konfigurieren Methode, habe ich die Skripte wie folgt aus:

app.UseReact(config => 
     { 

      config 
       .AddScript("~/js/test.jsx") 
       .AddScript("~/js/users.jsx") 
       .AddScript("~/js/userCards.jsx") 
       .AddScript("~/js/userInfo.jsx") 
       .AddScript("~/js/cards.jsx") 
       .AddScript("~/js/user.jsx") 
       .AddScript("~/js/addCard.jsx") 
       .AddScript("~/js/cardImages.jsx") 

       .SetJsonSerializerSettings(new JsonSerializerSettings 
       { 
        StringEscapeHandling = StringEscapeHandling.EscapeHtml, 
        ContractResolver = new CamelCasePropertyNamesContractResolver() 
       }); 

     }); 

Es tut mir leid, wenn es eine dumme Frage, aber ich kann nicht eine gute Erklärung scheinen für asp zu finden .net Kern.

[EDIT] Ich verwende VS2017, asp.net Kern 1.0.4 und 3.0.1 React.AspNet

Die Fehlerprotokolle:

ReactEngineNotFoundException: No usable JavaScript engine was found. Please 
install a JavaScript engine such as React.JavaScriptEngine.ClearScriptV8 (on 
Windows) or React.JavaScriptEngine.VroomJs (on Linux and Mac OS X). Refer 
    to the ReactJS.NET documentation for more details. 
    React.AspNet.HtmlHelperExtensions.get_Environment() 

    TinyIoCResolutionException: Unable to resolve type: 
    React.JavaScriptEngineFactory 
    React.AspNet.HtmlHelperExtensions.get_Environment() 

    TinyIoCResolutionException: Unable to resolve type: React.ReactEnvironment 
    React.AspNet.HtmlHelperExtensions.get_Environment() 

    ReactNotInitialisedException: ReactJS.NET has not been initialised 
    correctly. Please ensure you have called app.AddReact() and 
    app.UseReact() in your Startup.cs file. 
    React.AspNet.HtmlHelperExtensions.get_Environment() 

Es sagt ich habe keine App .AddReact noch app.UseReact, aber ich habe dann beide ...

public void ConfigureServices(IServiceCollection services) 
    { 
     services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>(); 
     services.AddReact(); 

     services.AddServerSentEvents(); 
     services.AddServerSentEvents<INotificationsServerSentEventsService, NotificationsServerSentEventsService>(); 

     services.AddMvc();    

     services.AddSingleton<HttpClient>(); 
    } 

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory, IServiceProvider serviceProvider) 
    { 
     loggerFactory.AddConsole(Configuration.GetSection("Logging")); 
     loggerFactory.AddDebug(); 

     if (env.IsDevelopment()) 
     { 
      app.UseDeveloperExceptionPage(); 
      app.UseBrowserLink(); 
     } 
     else 
     { 
      app.UseDeveloperExceptionPage(); 
      app.UseBrowserLink(); 
     } 


     app.MapServerSentEvents("/see-heartbeat"); 
     app.MapServerSentEvents("/sse-notifications", serviceProvider.GetService<NotificationsServerSentEventsService>()); 

     app.UseStatusCodePagesWithReExecute("/Error/{0}"); 

     app.UseReact(config => 
     { 

      config 
       .AddScript("~/js/test.jsx") 
       .AddScript("~/js/users.jsx") 
       .AddScript("~/js/userCards.jsx") 
       .AddScript("~/js/userInfo.jsx") 
       .AddScript("~/js/cards.jsx") 
       .AddScript("~/js/user.jsx") 
       .AddScript("~/js/addCard.jsx") 
       .AddScript("~/js/cardImages.jsx") 

       .SetJsonSerializerSettings(new JsonSerializerSettings 
       { 
        StringEscapeHandling = StringEscapeHandling.EscapeHtml, 
        ContractResolver = new CamelCasePropertyNamesContractResolver() 
       }); 

     }); 

     app.UseDefaultFiles(); 
     app.UseStaticFiles(); 


     app.UseMvc(routes => 
     { 
      routes.MapRoute(
       name: "default", 
       template: "{controller=Index}/{action=Index}/{id?}"); 
     }); 


    } 
+0

Was sind die Details Ihres Fehlers? '500' ist nicht beschreibend genug, um das Problem zu isolieren. – Svek

+0

@Svek Ich habe die Fehlerprotokolle zur Frage hinzugefügt – franmcod

Antwort

1

Das ist, weil Sie JavaScript Engine Sie auf Ihrem PC haben und nicht in Azure. Entnommen: https://github.com/reactjs/React.NET/issues/400 (eigentlich eine komplette Anleitung, wie man zum Laufen bringen Reagieren)

konnte ich die Anwendung zum Laufen bringen, wenn sie Azure mit einer Kombination aus diesen Führungen veröffentlicht:

http://www.samulihaverinen.com/web-development/dotnet/2016/01/19/how-to-run-clearscript-v8-javascript-engine-in-azure/

https://github.com/Taritsyn/JavaScriptEngineSwitcher/wiki/Registration-of-JS-engines

Von der ersten Führung, installierte ich Abhängigkeiten getrennt:

Uninstall-Package React.AspNet 
Install-Package JavaScriptEngineSwitcher.Core 
Install-Package JavaScriptEngineSwitcher.Msie (May not be needed) 
Install-Package JSPool 
Install-Package JavaScriptEngineSwitcher.ChakraCore 
Install-Package JavaScriptEngineSwitcher.ChakraCore.Native.win-x64 (Selected native implementation) 
Install-Package Microsoft.ChakraCore (I think this is key to enabling ChakraCore on the server) 
Install-Package React.AspNet -IgnoreDependencies 

Von der zweiten Führung installierte ich ein Paket JavaScriptEngineSwitcher Konfiguration in .NET Core-1.x zu aktivieren:

Install-Package JavaScriptEngineSwitcher.Extensions.MsDependencyInjection 

In Startup.cs

ConfigureServices(): 
services.AddJsEngineSwitcher(options => options.DefaultEngineName = ChakraCoreJsEngine.EngineName).AddChakraCore(); 
+0

'Install-Paket Microsoft.ChakraCore' das ist redundante Abhängigkeit. Ich empfehle Ihnen, die folgende Diskussion zu lesen - https://github.com/reactjs/React.NET/issues/409. –

Verwandte Themen