I saw lot of posts about vue.js on IIS but my project is not working.
Vue.JS Application with router :
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/Applications',
name: 'Applications',
component: Applications
}
]
const router = new VueRouter({
mode: 'history',
routes
})
Web server :
IIS 10
Url Rewrite 2 :
Url rewrite configuration import from web.config
Url rewrite is working (tried this : https://learn.microsoft.com/en-us/iis/extensions/url-rewrite-module/using-failed-request-tracing-to-trace-rewrite-rules)
web.config
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" 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>
</rewrite>
</system.webServer>
</configuration>
Result :
Blank page
Inspector console errors (missing my application node into url)
Failed to load resource: the server responded with a status of 404 (Not Found)
GET http://localhost/css/app.63040a86.css net::ERR_ABORTED 404 (Not Found)
I already tried all things found but it's not working, can you help me please ?
Related
Im using .net core 3.1 in an docker environment pointing an IIS Reverse Proxy with ARR installed to it.
Update
I managed to get the rewriting running. BNut since I dont know why it works this way Im unable to answer this question.
I changed the rewrite rules from localhost: to 127.0.0.1:
Now the handshake works. But it seems not work with websocket protocol only with ServerSentEvents.
Error: Failed to start the transport 'WebSockets': Error: WebSocket failed to connect. The connection could not be found on the server, either the endpoint may not be a SignalR endpoint, the connection ID is not present on the server, or there is a proxy blocking WebSockets. If you have multiple servers check that sticky sessions are enabled.
But Websockets are installed. Im using ARR3.
So the last 2 questions in this for me are:
Why did it work with the IP instead of localhost? (Full config below)
Why does it throw this error even WS is installed?
Full Rewrite config:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<urlCompression doStaticCompression="false" doDynamicCompression="false" />
<rewrite>
<rules>
<rule name="ReverseProxyInboundRule1" stopProcessing="true">
<match url="wss://(.*)" />
<action type="Rewrite" url="wss://127.0.0.1:3101/{R:1}" />
</rule>
<rule name="ReverseProxyInboundRule2" stopProcessing="true">
<match url="(.*)" />
<action type="Rewrite" url="https://127.0.0.1:3101/{R:1}" />
</rule>
</rules>
<outboundRules>
<rule name="ReverseProxyOutboundRule1" preCondition="ResponseIsHtml1">
<match filterByTags="A, Form, Img" pattern="^http(s)?://127.0.0.1:3101/(.*)" />
<action type="Rewrite" value="http{R:1}://sub.example.com/{R:2}" />
</rule>
<preConditions>
<preCondition name="ResponseIsHtml1">
<add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
</preCondition>
</preConditions>
</outboundRules>
</rewrite>
</system.webServer>
</configuration>
EDIT
Thanks to Bruce Zhang I got to the source of the problem but still not Idea how to fix it.
Ive got an docker environment running via docker compose on a windows server.
There I use IIS10 with UrlRewrite and ARR3 together with an .net core 3.1 app and signalR core.
As Client I use the typescript version of #microsoft/signalr (latest)
For some reasons I dont know the Connection is ok but the handshake call ends in an timeout.
I looked at the net for some solutions and applied this so far:
Added URL Rewrite Inbound Rules for wss:// and ws://
Increased the timeouts for signalR
Configured the response buffer in ARR (see picture below)
Enabled failed request tracing
The docker env is running on the same server as the IIS with enabled ARR and Websockets Feature.
The Web-App container exposes port 6652 mapping it to port 443 in the docker container.
My rewrite rule are defined as below:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<urlCompression doStaticCompression="false" doDynamicCompression="false" />
<rewrite>
<rules>
<rule name="WS reverse proxy" stopProcessing="true">
<match url="ws://devlocal.example.com" />
<conditions>
<add input="{CACHE_URL}" pattern="^(.+)://" />
</conditions>
<action type="Rewrite" url="{C:1}://127.0.0.1:6652" />
</rule>
<rule name="WSS reverse proxy" stopProcessing="true">
<match url="wss://devlocal.example.com" />
<conditions>
<add input="{CACHE_URL}" pattern="^(.+)://" />
</conditions>
<action type="Rewrite" url="{C:1}://127.0.0.1:6652" />
</rule>
<rule name="_Inbound_devlocal.example.com.com" stopProcessing="true">
<match url="(.*)" />
<action type="Rewrite" url="{C:1}://localhost:6652/{R:1}" logRewrittenUrl="true" />
<conditions logicalGrouping="MatchAny">
<add input="{CACHE_URL}" pattern="^(.+)://" />
<add input="{HTTP_HOST}" pattern="^devlocal\.example.com\.com$" />
</conditions>
</rule>
</rules>
<outboundRules>
<rule name="_Outboundund_devlocal.example.com.com" stopProcessing="true">
<match filterByTags="A, Form, Img, Link, Script" pattern="^http(s)?://localhost:6652/(.*)" />
<action type="Rewrite" value="http{R:1}://devlocal.example.com.com/{R:2}" />
</rule>
</outboundRules>
</rewrite>
</system.webServer>
</configuration>
SignalR configured as:
services.AddSignalR(hubOptions =>
{
hubOptions.ClientTimeoutInterval = TimeSpan.FromSeconds(240);
hubOptions.HandshakeTimeout = TimeSpan.FromSeconds(120);
hubOptions.KeepAliveInterval = TimeSpan.FromSeconds(60);
hubOptions.EnableDetailedErrors = true;
hubOptions.MaximumReceiveMessageSize = 200;
hubOptions.StreamBufferCapacity = 300;
});
// Mappig hub like:
app.UseEndpoints(api =>
{
api.MapControllers();
api.MapHub<CommentsHub>("/sockR/hub");
}
);
The ARR Config:
The trace log of the signalR client shows that its the handshake call thats ends in an timeout:
[2022-01-13T18:29:07.232Z] Information: Normalizing '/sockR/hub' to 'https://devlocal.example.com/sockR/hub'.
Utils.js:151 [2022-01-13T18:29:07.233Z] Debug: Starting HubConnection.
Utils.js:151 [2022-01-13T18:29:07.233Z] Debug: Starting connection with transfer format 'Text'.
Utils.js:147 [2022-01-13T18:29:07.342Z] Information: WebSocket connected to wss://devlocal.example.com/sockR/hub.
Utils.js:151 [2022-01-13T18:29:07.342Z] Debug: The HttpConnection connected successfully.
Utils.js:151 [2022-01-13T18:29:07.342Z] Debug: Sending handshake request.
Utils.js:147 [2022-01-13T18:29:07.342Z] Information: Using HubProtocol 'json'.
... After 3 minutes:
ERROR Error: Uncaught (in promise): Error: Server timeout elapsed without receiving a message from the server. Error: Server timeout elapsed without receiving a message from the server.
Is there any way to debug why the request is ending in an timeout? The strange thing is Ive got also an jira instance on the server.Also bound via revers proxy with same settings and the WSS/WS calls there dont fail.
Apperently it works now by removing:
Startup.cs
app.UseWebSockets();
And after changing my rewrite config to:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<urlCompression doStaticCompression="false" doDynamicCompression="false" />
<rewrite>
<rules>
<rule name="ReverseProxyInboundRule1" stopProcessing="true">
<match url="wss://(.*)" />
<action type="Rewrite" url="wss://127.0.0.1:3101/{R:1}" />
</rule>
<rule name="ReverseProxyInboundRule2" stopProcessing="true">
<match url="(.*)" />
<action type="Rewrite" url="https://127.0.0.1:3101/{R:1}" />
</rule>
</rules>
<outboundRules>
<rule name="ReverseProxyOutboundRule1" preCondition="ResponseIsHtml1">
<match filterByTags="A, Form, Img" pattern="^http(s)?://127.0.0.1:3101/(.*)" />
<action type="Rewrite" value="http{R:1}://sub.example.com/{R:2}" />
</rule>
<preConditions>
<preCondition name="ResponseIsHtml1">
<add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
</preCondition>
</preConditions>
</outboundRules>
</rewrite>
</system.webServer>
</configuration>
I am trying to deploy my NuxtJS application on a new IIS server. I have installed latest Node and IISNode. Below are my web.config and server/index.js. Site Binding is on localhost:93 but I keep getting error - 'This page isn't working' http error 500. Appreciate your help.
web.config
<!--
This configuration file is required if iisnode is used to run node processes behind
IIS or IIS Express. For more information, visit:
https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
<configuration>
<system.webServer>
<!-- Visit https://azure.microsoft.com/en-us/blog/introduction-to-websockets-on-windows-azure-web-sites/ for more information on WebSocket support -->
<webSocket enabled="false" />
<handlers>
<!-- Indicates that the server.js file is a Node.js site to be handled by the iisnode module -->
<add name="iisnode" path="server" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^server\/debug[\/]?" />
</rule>
<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>
<!-- All other URLs are mapped to the Node.js site entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="server" />
</rule>
</rules>
</rewrite>
<!-- 'bin' directory has no special meaning in Node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
<add segment="node_modules" />
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />
<iisnode node_env="production" />
<!--
You can control how Node is hosted within IIS using the following options:
* watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
* node_env: will be propagated to node as NODE_ENV environment variable
* debuggingEnabled - controls whether the built-in debugger is enabled
See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
-->
<!--<iisnode watchedFiles="web.config;*.js"/>-->
</system.webServer>
</configuration>
server/index.js
const express = require('express');
const consola = require('consola');
const { Nuxt, Builder } = require('nuxt');
const app = express();
const config = require('../nuxt.config.js');
config.dev = process.env.NODE_ENV !== 'production';
async function start() {
const nuxt = new Nuxt(config);
const { host, port } = nuxt.options.server;
if (config.dev) {
const builder = new Builder(nuxt);
await builder.build();
} else {
await nuxt.ready();
}
app.use(nuxt.render);
app.listen(port, host);
consola.ready({
message: `Server listening on http://${host}:${port}`,
badge: true
});
}
start();
This is the error SS:
I'am getting error "404 Not found" when i refresh any page in my Vue JS application hosted in Azure Web APP (IIS Server) except the default web page index.html
I'am already adding this rewrite configuration in my web.config according to VueJs offical docs :
<rule name="Handle History Mode and custom 404/500" 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="/" />
</rule>
This is my web.conf file:
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" 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="/" />
</rule>
<rule name="redirect all requests" stopProcessing="true">
<match url="^(.*)$" ignoreCase="false" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
</conditions>
<action type="Rewrite" url="index.html" appendQueryString="true" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
the `router.js` file have this conf :
const router = new VueRouter({
mode: 'history',
routes: [...]
})
Any idea to resolve that ?
Regards
EDIT :
Just ADD pm2 serve /home/site/wwwroot --no-daemon --spa , in
Azure Portal > App Service > Configuration > Application Setting
Azure APP Service based on Linux , don't need to use web.config
BR.
Since I came here from top google results, and kind of kicked of my journey to get results I want to post this here in hopes it will help someone in future.
I was trying to host my Vue#3 app on local IIS to test if things work before I exchange it in production.
I am actually rewriting Vue#2 app in Vue#3, and for Vue#2 following any of these 3 links would yield success:
https://gist.github.com/AngeloAnolin/6b19d22220b27a545e10f5fa672072fa
https://www.linkedin.com/pulse/hosting-vue-js-spa-build-microsoft-iis-zainul-zain
https://dnilvincent.com/blog/posts/host-vuejs-app-on-iis
However, in Vue#3 this is a bit of overkill and will throw http error 500.19 - internal server error. Changing content of web.config with following content would yield success:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" 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="/" />
</rule>
</rules>
</rewrite>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>
That's it basically. Good luck with everything :D
I'm trying to deploy a vuejs application integrated with vue router(history mode on) on a IIS server. I'm having an issue with router i.e when I refresh the page anywhere else other than the main page (/), it will return with 404 NOT FOUND. I followed some resources found online but can't seem to fix the issue.
I followed the steps mentioned in the vue router documentation by installing IIS Url Rewrite then adding this configuration in web.config in the root directory.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" 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="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
But it still does not work.
In my IIS server, I created a folder called ${appName} and pasted the content of the dist folder inside it after npm run build on the vue app
This is a sample of my router file
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: () => import('#/views/pages/Home.vue'),
meta: {
auth: false,
layout: layouts.navLeft,
searchable: false,
nav: false,
icon: 'icon-home',
roles: [ ROLES.SUPERADMIN, ROLES.ADMIN ]
}
},
This is the server.js file on the vue app.
const express = require('express');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname + '/dist/'));
app.get(/.*/, function(req, res) {
res.sendfile(__dirname + 'dist/index.html');
});
app.listen(port);
console.log('server started');
I need help deploying a VueJS application to the IIS Default Web Site as an additional application.
I can add the built Vue site as its own IIS Web Site on a new port(other than port 80). I change the vue.config.js publicPath property to './' and point the new site to the built 'dist' folder. THIS WORKS FINE
What i cannot get working is when i try to add a new 'Application' under the Default Web Site. This allows you to use the default port(80) and just append the 'Alias' name to the URL. ex - localhost/myvuesite
Ive gotten this to work fine in the past with other company ASP.NET websites but i cannot get this working with Vue. When i try to navigate to my newly created site, localhost/myvuesite, i just get a blank page with nothing to display. When i inspect the chrome source it appears that the site downloaded the .js and .css and index.html files but something is not working correctly.
web.config in 'dist' directory:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" 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="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
vue.config.js:
module.exports = {
publicPath: './',
productionSourceMap: false
};
File structure:
myvuesite
- css
- img
- js
- favicon.ico
- index.html
- web.config