如何获得angular.js文件在IIS 7.5的部署角全栈 [英] How get the angular.js files on IIS 7.5 for angular full-stack deployed

问题描述

- 更新

现在即时得到这个错误，但重写看起来像它的工作，但它读起来就像HTML js文件或某种问题，喜欢它

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

我想在IIS 7.5中创建web.config中的权重写入规则角度全栈的应用程序部署

I want to create the right re-write rules for web.config on IIS 7.5 for angular full-stack application deploy

这是我的web.config我使用这个但我不能配置的虚拟路径

This is my WEB.CONFIG I'm Using this one but I cant config the the virtual path

<?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

THIS IS MY 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);

这是我的INDEX.HTML

THIS IS MY INDEX.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我的文件结构

I add my file structure inside IIS

- 我的一个解

我试图安装从头开始前preSS的应用和它的作品都是我所要做的就是改变process.env.PORT和端口号，其运行，但全栈还没有能够使它发挥作用但我仍然需要帮助。

I tried to install an express application from scratch and it works all I have to do is change the port number for process.env.PORT and its running but the full-stack still no able to make it work yet I still need help

下面我的应用程序工作正常，在IIS

HERE MY APP WORKS FINE ON IIS

推荐答案

一个星期挖它的我终于做到了工作后确定伙计们，以下的为IIS 7.5记住你的/谐音文件夹必须在客户端正确的配置/为前preSS路由公用文件夹正常工作。

OK Folks after a week of digging it I finally made it work, the following its the right configuration for IIS 7.5 remember your /partials folder must be in the client /public folder for the express routing to work properly.

下面是一个链接到 GIT-枢纽工程

链接： https://github.com/cesarvega/MEAN-IIS7.5-堆栈

下面的我的web.config

Here its my 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

The Server.js file

        "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);

中的index.html

The index.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>

内部公开app.js

The app.js inside public

    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 "
})

YThe main.html中

YThe main.html

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

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

and finally the file structure for the file paths and server IIS configuration

服务器配置

这篇关于如何获得angular.js文件在IIS 7.5的部署角全栈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！