#javascript #asp.net #reactjs #iis #.net-core
#javascript #asp.net #reactjs #iis #.net-core
Вопрос:
У меня есть ASP.Net Основное веб-приложение с React, которое я создал в Visual Studio 2019. Сейчас я пытаюсь развернуть на Windows Server 2019 стандартный IIS.
Я выполнил все шаги, чтобы развернуть это, и теперь при просмотре сайта на веб-странице отображается просто белый экран. При проверке страницы я вижу You need to enable JavaScript to run this app.
Читая другие сообщения, я вижу, что проблема может быть связана с моим package.json, startup.cs или web.config. Я опубликовал свой код для всех трех. Нужно ли мне запускать npm build
на сервере?
Или, может быть, что-то с моими портами?
package.json
{
"name": "testcalendar",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"axios": "^0.21.0",
"bootstrap": "^4.5.3",
"jquery": "^3.4.1",
"material-table": "^1.69.1",
"merge": "^1.2.1",
"oidc-client": "^1.9.0",
"react": "^16.0.0",
"react-bootstrap": "^1.4.0",
"react-datepicker": "^3.3.0",
"react-dom": "^16.0.0",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.1",
"reactstrap": "^8.4.1",
"rimraf": "^2.6.2",
"xml-js": "^1.6.11"
},
"devDependencies": {
"ajv": "^6.9.1",
"cross-env": "^5.2.0",
"typescript": "^3.7.5",
"eslint": "^6.8.0",
"eslint-config-react-app": "^5.2.0",
"eslint-plugin-flowtype": "^4.6.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.18.3",
"nan": "^2.14.1"
},
"eslintConfig": {
"extends": "react-app"
},
"scripts": {
"start": "rimraf ./build amp;amp; react-scripts start",
"build": "react-scripts build",
"test": "cross-env CI=true react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint ./src/"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
startup.cs
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
namespace TestCalendar
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
// In production, the React files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/build";
});
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
//app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
});
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseReactDevelopmentServer(npmScript: "start");
}
});
}
}
}
web.config
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<location path="." inheritInChildApplications="false">
<system.webServer>
<handlers>
<add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
</handlers>
<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" />
</conditions>
<action type="Rewrite" url="/dynamotoolsapi" />
</rule>
</rules>
</rewrite>
<aspNetCore processPath=".TestCalendar.exe" stdoutLogEnabled="true" stdoutLogFile=".logsstdout" hostingModel="inprocess" />
</system.webServer>
</location>
</configuration>
<!--ProjectGuid: b6025f4d-4dd5-4a9a-8094-a8e221a9799a-->
Комментарии:
1. в вашем браузере отключен javascript? попробуйте включить его и повторите попытку
2. @Jerryc не думаю, что это имеет какое-либо отношение к моему браузеру, к сожалению. Пробовал в нескольких браузерах, на разных компьютерах.
3. этот текст всегда доступен по умолчанию на
index.html
странице для стандартногоcreate-react-app
приложения. Если это так, вы неправильно провели расследование, и проблема может быть в чем-то другом.4. @SamridhTuladhar есть идеи, с чего мне начать расследование?
5. во-первых, работает ли это с simple
npm start
(тот, в котором react запускает сервер узла с включенной горячей перезагрузкой, часто называемый режимом разработчика ). Если да, тоnpm build
скопируйте статические файлы на свой сервер и повторите попытку, убедитесь, что URL-адрес совпадает с тем, с которым вы взаимодействовали вnpm start
, если они не совпадают, пожалуйста, добавьте дополнительныйhomepage
ключ вpackage.json
и повторите попытку.