如何在 IIS 7.5 上获取 Angular.js 文件以进行 Angular 全栈部署

2024-02-20

--UPDATE

now Im getting this error but the rewrites looks like its working but it reads js files like html or some sort of issue like it enter image description here

我想在 IIS 7.5 上为 Angular 全栈应用程序部署的 web.config 创建正确的重写规则

这是我正在使用的 WEB.CONFIGthis one http://www.8sph.com/blog/node-iis-virtual-dirs但我无法配置虚拟路径

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
    <handlers>
        <add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
    </handlers>
    <iisnode node_env="PRODUCTION"
     nodeProcessCountPerApplication="1"
     maxConcurrentRequestsPerProcess="1024"
     maxNamedPipeConnectionRetry="100"
     namedPipeConnectionRetryDelay="250"
     maxNamedPipeConnectionPoolSize="512"
     maxNamedPipePooledConnectionAge="30000"
     asyncCompletionThreadCount="0"
     initialRequestBufferSize="4096"
     maxRequestBufferSize="65536"
     uncFileChangesPollingInterval="5000"
     gracefulShutdownTimeout="60000"
     loggingEnabled="true"
     logDirectory="iisnode"
     debuggingEnabled="true"
     debugHeaderEnabled="false"
     debuggerPortRange="5058-6058"
     debuggerPathSegment="debug"
     maxLogFileSizeInKB="128"
     maxTotalLogFileSizeInKB="1024"
     maxLogFiles="20"
     devErrorsEnabled="true"
     flushResponse="false"
     enableXFF="false"
     promoteServerVars=""
     configOverrides="iisnode.yml"
     watchedFiles="web.config;*.js" />
    <rewrite>
        <rules>
            <!-- Don't interfere with requests for node-inspector debugging -->
            <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
                <match url="^server.js\/debug[\/]?"/>
            </rule>

            <!-- serve static files from /public folder -->
            <rule name="StaticContent">
                <action type="Rewrite" url="public/{R:0}" logRewrittenUrl="true"/>
                <conditions>
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
                </conditions>
                <match url="public/*"/>
            </rule>

            <!-- All other URLs are mapped to the Node.js application entry point -->
            <rule name="DynamicContent">
                <conditions>
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
                </conditions>
                <action type="Rewrite" url="server.js"/>
            </rule>
            <rule name="SocketIO" patternSyntax="ECMAScript">
                <match url="socket.io.+"/>
                <action type="Rewrite" url="server.js"/>
            </rule>
        </rules>
    </rewrite>
    <!-- <appSettings>
        <add key="virtualDirPath" value="/idetikmssql"/>
    </appSettings> -->

</system.webServer>

这是我的 server.js

              "use strict";

              var express = require('express'),
                    stylus = require('stylus'),
                    logger = require('morgan'),
                    bodyParser = require('body-parser');
              // determind what mode we are
              var env = process.env.NODE_ENV = process.env.NODE_ENV||'developemnt';
              var virtualDirPath = process.env.virtualDirPath || '';
              var app = express();
              //configure the view engine
              function compile(str, path) {
                    return stylus(str).set('filename', path);
              }


              app.set('views', __dirname + '/server/views/');
              app.engine('html', require('ejs').renderFile);
              app.set('view engine', 'html');
              app.use(stylus.middleware(
                    {
                          src: __dirname + 'public',
                          compile: compile
                    }
              ));
              app.use(bodyParser());

              var appPath = app.get('appPath')
              app.use('/bower_components',  express.static(appPath + "/bower_components/"));
              app.use('/app/',              express.static(appPath + "/app/"));
              app.use('/assets',            express.static(appPath + "/assets/"));
              app.use(express.static(__dirname + '/public'));
              app.get('/partials/:partialsPath', function (req, res) {
                    debugger;
                    res.render('partials/' + req.params.partialsPath);
              });

              //the asterisk handles all routes includes javascript, css, html request...
              app.get('*', function (req , res) {
                    res.render('index');
              });
              // app.get(virtualDirPath + '/', function(req, res) {
              //   res.render('index', { virtualDirPath: virtualDirPath });
              // })

              var PORT = 3030;
              app.listen((process.env.PORT!==undefined)?process.env.PORT:PORT);
              console.log('Listening to PORT : ' + process.env.PORT );
              console.log(__dirname);

这是我的索引.HTML

          <!doctype html>
          <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
          <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
          <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
          <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
            <head>
              <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
            <!-- <base href="/"> -->
            <title></title>
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width">
            </head>
            <body ng-app="idetikApp">
            <div ng-view=""></div>
            </body>
            <script type="text/javascript" src="app/app.js"></script>
            <script type="text/javascript" src="bower_components/angular/angular.js"></script>
            <script type="text/javascript" src="bower_components/angular-route/angular-route.js"></script>
            <script type="text/javascript" src="bower_components/angular-resource/angular-resource.js"></script>
          </html>

我在 IIS 中添加文件结构

——我的解决方案之一

我尝试从头开始安装一个快速应用程序,它可以工作,我所要做的就是更改 process.env.PORT 的端口号及其运行,但全栈仍然无法使其工作,但我仍然需要帮助

我的应用程序在 IIS 上运行良好


好的,经过一周的挖掘,我终于让它工作了,以下是 IIS 7.5 的正确配置,记住您的 /partials 文件夹必须位于客户端 /public 文件夹中,快速路由才能正常工作。

这是一个链接GitHub项目 https://github.com/cesarvega/MEAN-IIS7.5-Stack

link : https://github.com/cesarvega/MEAN-IIS7.5-Stack https://github.com/cesarvega/MEAN-IIS7.5-Stack

这是我的 web.config

          <?xml version="1.0" encoding="utf-8"?>
    <configuration>
        <system.webServer>
            <handlers>
                <add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
            </handlers>
            <iisnode node_env="PRODUCTION"
             nodeProcessCountPerApplication="1"
             maxConcurrentRequestsPerProcess="1024"
             maxNamedPipeConnectionRetry="100"
             namedPipeConnectionRetryDelay="250"
             maxNamedPipeConnectionPoolSize="512"
             maxNamedPipePooledConnectionAge="30000"
             asyncCompletionThreadCount="0"
             initialRequestBufferSize="4096"
             maxRequestBufferSize="65536"
             uncFileChangesPollingInterval="5000"
             gracefulShutdownTimeout="60000"
             loggingEnabled="true"
             logDirectory="iisnode"
             debuggingEnabled="true"
             debugHeaderEnabled="false"
             debuggerPortRange="5058-6058"
             debuggerPathSegment="debug"
             maxLogFileSizeInKB="128"
             maxTotalLogFileSizeInKB="1024"
             maxLogFiles="20"
             devErrorsEnabled="true"
             flushResponse="false"
             enableXFF="false"
             promoteServerVars=""
             configOverrides="iisnode.yml"
             watchedFiles="web.config;*.js" />
            <rewrite>
                <rules>
                    <!-- Don't interfere with requests for node-inspector debugging -->
                    <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
                        <match url="^server.js\/debug[\/]?"/>
                    </rule>
                    <!-- serve static files from /public folder -->
                    <rule name="StaticContent">
                        <action type="Rewrite" url="public/{R:0}" logRewrittenUrl="true"/>
                        <conditions>
                            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
                        </conditions>
                        <match url=".*" />
                    </rule>
                    <rule name="DynamicContent">
                        <conditions>
                            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
                        </conditions>
                        <action type="Rewrite" url="server.js"/>
                    </rule>
                    <rule name="SocketIO" patternSyntax="ECMAScript">
                        <match url="socket.io.+"/>
                        <action type="Rewrite" url="server.js"/>
                    </rule>
                </rules>
            </rewrite>
        </system.webServer>
    </configuration>

Server.js 文件

        "use strict";
        var express = require('express'),
              stylus = require('stylus'),
              logger = require('morgan'),
              bodyParser = require('body-parser');
        var env = process.env.NODE_ENV = process.env.NODE_ENV||'developemnt';
        var app = express();
        //configure the view engine
        function compile(str, path) {
              return stylus(str).set('filename', path);
        }
        app.set('views', __dirname + '/server/views/');
        app.engine('html', require('ejs').renderFile);
        app.set('view engine', 'html');
        app.use(stylus.middleware(
              {
                    src: __dirname + 'public',
                    compile: compile
              }
        ));
        app.use(bodyParser());
        app.use(express.static(__dirname + '/public'));

        app.get('/partials/:partialsPath', function (req, res) {
              res.render('/node/idetikmssql/partials/' + req.params.partialsPath);
        });
        app.get('*', function (req , res) {
              res.render('index');
        });
        var PORT = 3030;
        app.listen((process.env.PORT!==undefined)?process.env.PORT:PORT);
        console.log('Listening to PORT : ' + process.env.PORT );
        console.log(__dirname);

索引.html

    <!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
  <!-- <base href="/node/idetikmssql/"> -->
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  </head>
  <body ng-app="idetikApp">
  <div ng-view=""></div>
  </body>
  <script type="text/javascript" src="bower_components/angular/angular.js"></script>
  <script type="text/javascript" src="bower_components/angular-route/angular-route.js"></script>
  <script type="text/javascript" src="bower_components/angular-resource/angular-resource.js"></script>
  <script type="text/javascript" src="app/app.js"></script>
</html>

public 内的 app.js

    angular.module('idetikApp', [ 'ngResource', 'ngRoute']);

angular.module('idetikApp').config(function ($routeProvider, $locationProvider) {
  //$locationProvider.html5Mode(true);
  $routeProvider.when('/', {templateUrl: 'public/partials/main.html', controller:'mainctrl'})

});

angular.module('idetikApp').controller('mainctrl', function ($scope) {
  $scope.mayvar = "Hello from client Node JS "
})

main.html

<h1>this is a partial</h1>
<h2>{{mayvar}}</h2>

最后是文件路径和服务器 IIS 配置的文件结构

服务器配置

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 IIS 7.5 上获取 Angular.js 文件以进行 Angular 全栈部署 的相关文章

随机推荐