aspnetcore-vueclimiddleware icon indicating copy to clipboard operation
aspnetcore-vueclimiddleware copied to clipboard

publish in IIS with Development Variable

Open Kingside88 opened this issue 3 years ago • 10 comments

I try many days to publish my application to IIS but get everytime this error:

"InvalidOperationException: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request."

  • The "ASPNETCORE_ENVIRONMENT" is set to "Development".
  • As SSL Certificate I use the "IIS Express Development Certificate"
  • I tried to remove this part in the vue.config.js "devServer: { https: { [keys....] } } " and to recreate with mkcert. But nothing helps. I get this error. When I try to run the same application from visual studio, everything works well. I don't want to run the application as compiled in "dist" folder, but as development.

Here is my startup.cs: endpoints.MapToVueCliProxy( pattern: "en/{*path}", options: new SpaOptions { SourcePath = "ClientApp" }, npmScript: (System.Diagnostics.Debugger.IsAttached) ? "serve" : null, port: 8080, https: true, runner: ScriptRunnerType.Npm, regex: "Compiled successfully", forceKill: true //wsl: false );

Kingside88 avatar Nov 14 '20 12:11 Kingside88

In your Startup.cs you say only to run the Vue development server if the debugger is attached, are you actually attaching to the IIS process using Visual Studio?

TobbenTM avatar Nov 14 '20 12:11 TobbenTM

Oh man I think that was it. Thank you so much. Sometimes you have tomatos on you eyes :-D (German phrase) Now I have this error but I think I can solve it somehow: "Ensure that 'cmd' is installed and can be found in one of the PATH directories."...

Kingside88 avatar Nov 14 '20 13:11 Kingside88

I really don't know what to do. After changing the folder to another place, I get the same error as in the start post. manuelly "npm run serve" works well. It starts the VueApp without any error. Also I tried to remove https and the https part from vueConfig. Then I get this error:

"System.Net.Http.HttpRequestException: 'Failed to proxy the request to http://127.0.0.1:8080/timeattendance, because the request to the proxy target failed. Check that the proxy target server is running and accepting requests to http://127.0.0.1:8080/." The ApplicationPool is running as "Administrator" Account. So no permission problems must be there. IIS Express in Visual Studio works also like a charme.

Did someone else get this working? I offer 20$ Amazon or PayPal if someone could help me. Maybe through Remote Session? Than I could also write a little step-by-step tutorial to achieve these.

Kingside88 avatar Nov 16 '20 22:11 Kingside88

Could you paste the log output from the ASP.Net app? It should be forwarding any logs from the Vue server, and I'm curious to see if it's actually starting up, and on what port.

TobbenTM avatar Nov 17 '20 11:11 TobbenTM

Stdout Log seems to produce the best log file.

Stdlog out: https://pastebin.com/fytxZSxz Inner Exception: https://pastebin.com/LTvRCS0Q Startup.cs: https://pastebin.com/LEXhJvvb vue.config.js: https://pastebin.com/qJ9D1Gfu web.config: https://pastebin.com/KDCMyvZ2

The VueApp itself run on port 8080. I can open the app under following url "https://localhost:8080/en/ ". But this is the vueApp Url

VueApp is new created without modification. Just added vue.config.js and certifications in certs folder with mkcert. With IIS Express it runs well but make troubles with pure IIS. In IIS the AppPool runs with "Administrator" Identity. And https with "IIS Express Development Certificate"

Kingside88 avatar Nov 18 '20 20:11 Kingside88

Its very quiete here. Does nobody else has this problems? How do you publish youre app in IIS?

Kingside88 avatar Dec 06 '20 19:12 Kingside88

I'm not real clear on why you'd want to proxy this in production? Just let IIS serve the built, distributable Vue app with the Core app.

Proxying is intended mainly for debugging so you can do things like Hot Reload.

JohnCampionJr avatar Jan 06 '21 16:01 JohnCampionJr

The only other reason I can think of is for SSR. However, this library is not built or tested for any sort of security for a production deployment. This module is built and developed for use as a debugging and hot module reload assistant as @JohnCampionJr indicated.

If the problem is with getting the DIST folder content built, I would suggest starting with the sample projects in this repo and see if you can deploy those to IIS. If you use dotnet publish they should generate the appropriate files.

BinaryConstruct avatar Jan 08 '21 02:01 BinaryConstruct

Hi and thank you for your response. So the reason why I like to publish my ASP .NET Web Application with Vue is because the VueApp make Http Requests to my ASP Application. While developing the Frontend in Vue, I dont need to run the whole Asp Application in Visual Studio Debug mode.

But I solved the problem. If anyone else has the same requirements, he can do the follow:

  1. Install mkcert -> https://mkcert.org/
  2. open cmd and navigate to the folder where you want to generate a certification file (cd C:\Temp for example)
  3. type in the console window: mkcert -pkcs12 localhost 127.0.0.1
  4. now you created an "localhost+1.p12" file. Just rename it to "localhost.pfx"
  5. type in the console window: mkcert -install and agree with Yes or Ok
  6. double click to the file "localhost.pfx". Choose "Locale Computer". In the password field write changeit. Make the key exportable if needed.
  7. Now go to IIS where youre IIS Application is configured, choose "Bindings", choose your https Binding (or create one) and choose the installed certificate.
  8. In your Vue App, go to VueConfig.json the follow: `const fs = require('fs')

module.exports = { configureWebpack: { devtool: 'source-map' }, transpileDependencies: ["vuetify"], publicPath: '/PathFromVueCliMiddlewareForMyVueApp/', devServer: { // Serve index.html as the base XXX //contentBase: resolveAppPath('public'),

// Enable compression
compress: true,

// Enable hot reloading
hot: true,
hotOnly: true,
port: 8080,
https: true,
pfx: fs.readFileSync('../certs/localhost.pfx'),
pfxPassphrase: "changeit",
// public: 'https://xxxxxx:9000/',		

} };`

Kingside88 avatar Jan 09 '21 22:01 Kingside88

@Kingside88 How did you fix the Failed to start CMD error ? That's where I'm at.

fdrobidoux avatar Sep 03 '21 19:09 fdrobidoux