Блог

У меня есть два приложения, одно приложение React и одно приложение NextJS. Приложение React запущено на локальном хосте:5001, а приложение NextJS запущено на локальном хосте:3000. Когда я запускаю приложение, оно отлично запускается и запускает мой браузер на localhost:5001, загружая мое приложение react.

У меня есть некоторое промежуточное ПО, настроенное таким образом, чтобы, если путь запроса содержит слово «тест» (т. Е. localhost:5001/test, промежуточное программное обеспечение перенаправит меня на мой сервер nextjs, работающий на порту 3000, и будет обслуживать мою тестовую страницу на сервере nextjs, но по какой-то причине я не могу заставить его работать.

Я пытался перехватить информацию о запросе и изменить путь, порт и строку запроса, чтобы заставить nextjs забрать ее, но безрезультатно.

Если я введу localhost:3000/test в браузере во время работы приложений, я смогу нормально видеть свою страницу nextjs, поэтому я предполагаю, что это что-то в промежуточном ПО, из-за чего она не перенаправляется.

Что я здесь делаю не так?

 using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.HttpsPolicy; using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.Routing; using Microsoft.AspNetCore.Rewrite; using Microsoft.AspNetCore.Routing; using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.Hosting; using System; using System.Collections.Generic; using System.Linq; using System.IO; using System.Threading; using System.Threading.Tasks; using Newtonsoft.Json; using Microsoft.AspNetCore.Mvc.Filters; using Microsoft.Extensions.FileProviders;  namespace Client {  public class Startup  {  private IWebHostEnvironment mEnvironment;  public Startup(IConfiguration configuration, IWebHostEnvironment environment)  {  Configuration = configuration;  mEnvironment = environment;  }   public IConfiguration Configuration { get; }   public void ConfigureServices(IServiceCollection services)  {  services.AddControllersWithViews();   // In production, the React files will be served from this directory  services.AddSpaStaticFiles(configuration =gt;  {  configuration.RootPath = "ClientApp/build";  });  services.AddSingletonlt;IHttpContextAccessor, HttpContextAccessorgt;();  }   public void Configure(IApplicationBuilder app, IWebHostEnvironment env)  {  if (env.IsDevelopment())  {  app.UseDeveloperExceptionPage();  }  else  {  app.UseExceptionHandler("/Error");  app.UseHsts();  }   app.UseHttpsRedirection();  app.UseStaticFiles();  app.UseSpaStaticFiles();   app.MapWhen(c =gt; c.Request.Path.Value.Contains("test"), appBuilder =gt;   {   appBuilder.Run(async (context) =gt;   {  context.Connection.LocalPort = 3000;  context.Connection.RemotePort = 3000;  context.Request.Path = "/_next/webpack-hmr?page=/test";  context.Request.PathBase = "/_next/webpack-hmr";  context.Request.QueryString = new QueryString("?page=/test");  context.Request.Host = new HostString("localhost:3000");    app.UseSpa(spa =gt;   {  spa.Options.SourcePath = "next";  });  });  });    app.UseRouting();   app.UseEndpoints(endpoints =gt;  {  endpoints.MapDynamicControllerRoutelt;SubdomainRouteTransformergt;(  pattern: "{controller}/{action=Index}/{id?}");  });   app.UseSpa(spa =gt;  {  spa.Options.SourcePath = "ClientApp";   if (env.IsDevelopment())  {  spa.UseReactDevelopmentServer(npmScript: "start");  }  });   app.UseSpa(spa =gt;   {  spa.Options.SourcePath = "next";   if(env.IsDevelopment())  {  spa.Options.StartupTimeout = TimeSpan.FromSeconds(120);  spa.UseProxyToSpaDevelopmentServer("https://localhost:3000");  spa.UseReactDevelopmentServer(npmScript: "dev");  }  });  }  }  }  

Вот моя следующая работа server.js файл:

 const { createServer } = require('https') const { parse } = require('url') const next = require('next') const fs = require('fs');  const dev = process.env.NODE_ENV !== 'production' const app = next({ dev }) const handle = app.getRequestHandler()  //VERY UNSAFE -- figure this out later process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";  var privateKey = fs.readFileSync('localhost.key', 'utf8'); var certificate = fs.readFileSync('localhost.crt', 'utf8');  const httpOptions = {  key: privateKey,  cert: certificate };  app.prepare().then(() =gt; {  createServer(httpOptions, (req, res) =gt; {   //console.log(req);  // Be sure to pass `true` as the second argument to `url.parse`.  // This tells it to parse the query portion of the URL.   const parsedUrl = parse(req.url, true)  const { pathname, query } = parsedUrl   console.log(parsedUrl);   if (pathname === '/a') {  app.render(req, res, '/a', query)  } else if (pathname === '/b') {  app.render(req, res, '/b', query)  } else {  handle(req, res, parsedUrl)  }  }).listen(3000, (err) =gt; {  if (err) throw err  console.log('gt; Ready on https://localhost:3000')  }) })  

И моя файловая структура выглядит так:

 Client  ClientApp  Controllers  next  pages  test.js Startup.cs Program.cs