grunt 서버를 사용하여 모든 요청을 루트 URL로 리다이렉트하려면 어떻게 해야 합니까?

grunt 서버를 사용하여 모든 요청을 루트 URL로 리다이렉트하려면 어떻게 해야 합니까?

저는 Angular.js 어플리케이션을 처음 만들고 Yeoman을 사용하고 있습니다.

Yooman은 Grunt를 사용하여 node.js connect 서버를 'grunt server' 명령어로 실행할 수 있습니다.

각도 어플리케이션을 html5 모드로 실행하고 있습니다.각도 문서에 따르면 각도 앱은 한 페이지의 아약스 애플리케이션이기 때문에 모든 요청을 응용 프로그램의 루트(index.html)로 리다이렉트하기 위해 서버를 수정해야 합니다.

"[html5] 모드를 사용하려면 서버 측에서 URL을 다시 써야 합니다. 기본적으로 응용 프로그램의 진입점(예: index.html)에 대한 모든 링크를 다시 써야 합니다."

제가 해결하려는 문제는 이 질문에 자세히 나와 있습니다.

grunt 서버를 수정하여 모든 페이지 요청을 index.html 페이지로 리다이렉트하려면 어떻게 해야 합니까?

먼저 명령줄을 사용하여 grunt 파일을 사용하여 디렉토리로 이동합니다.

CLI 에 다음과 같이 입력합니다.

npm install --save-dev connect-modrewrite

grunt 파일의 맨 위에 다음과 같이 입력합니다.

var modRewrite = require('connect-modrewrite');

다음 부분에서는 modRewrite만 접속에 추가합니다.

modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']),

다음은 Gruntfile.js 내의 "connect"의 예를 제시하겠습니다.제 lrSnippet과 ssIncludes에 대해서는 걱정하지 않으셔도 됩니다.가장 중요한 것은 modRewrite를 삽입하는 것입니다.

        connect: {
        options: {
            port: 9000,
            // Change this to '0.0.0.0' to access the server from outside.
            hostname: '0.0.0.0',
        },
        livereload: {
            options: {
                middleware: function (connect) {
                return [
                        modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']),
                        lrSnippet,
                        ssInclude(yeomanConfig.app),
                        mountFolder(connect, '.tmp'),
                        mountFolder(connect, yeomanConfig.app)
                        ];
                }
            }
        },
        test: {
            options: {
                middleware: function (connect) {
                    return [
                    mountFolder(connect, '.tmp'),
                    mountFolder(connect, 'test')
                    ];
                }
            }
        },
        dist: {
            options: {
                middleware: function (connect) {
                    return [
                    mountFolder(connect, yeomanConfig.dist)
                    ];
                }
            }
        }
    },

참고로 Yooman/Grunt는 최근 새로운 Grunt files 기본 템플릿을 변경했습니다.

기본 미들웨어 로직을 복사하면 문제가 없습니다.

middleware: function (connect, options) {
  var middlewares = [];
  var directory = options.directory || options.base[options.base.length - 1];

  // enable Angular's HTML5 mode
  middlewares.push(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']));

  if (!Array.isArray(options.base)) {
    options.base = [options.base];
  }
  options.base.forEach(function(base) {
    // Serve static files.
    middlewares.push(connect.static(base));
  });

  // Make directory browse-able.
  middlewares.push(connect.directory(directory));

  return middlewares;
}

---

업데이트: grunt-contrib-connect 0.9.0 이후로는 접속 서버에 미들웨어를 삽입하는 것이 훨씬 쉬워졌습니다.

module.exports = function (grunt) {
  // Load grunt tasks automatically
  require('load-grunt-tasks')(grunt);
  grunt.initConfig({
    // The actual grunt server settings
    connect: {
      livereload: {
        options: {
         /* Support `$locationProvider.html5Mode(true);`
          * Requires grunt 0.9.0 or higher
          * Otherwise you will see this error:
          *   Running "connect:livereload" (connect) task
          *   Warning: Cannot call method 'push' of undefined Use --force to continue.
          */
          middleware: function(connect, options, middlewares) {
            var modRewrite = require('connect-modrewrite');

            // enable Angular's HTML5 mode
            middlewares.unshift(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']));

            return middlewares;
          }
        }
      }
    }
  });
}

이 문제에 대해 제가 보낸 pull request가 있습니다.https://github.com/yeoman/generator-angular/pull/132, 하지만 수동으로 적용해야 합니다.

@Zuriel씨의 답변을 심플하게 하기 위해서, 나를 위해서 일하는 것을 이하에 나타냅니다.

• connect-modrewrite 설치:npm install connect-modrewrite --save
• grunt 파일에 포함:var rewrite = require( "connect-modrewrite" );

• rewrite를 사용하도록 연결 옵션을 변경합니다.

  connect: {  
      options: {  
          middleware: function ( connect, options, middlewares ) {
              var rules = [
                  "!\\.html|\\.js|\\.css|\\.svg|\\.jp(e?)g|\\.png|\\.gif$ /index.html"
              ];
              middlewares.unshift( rewrite( rules ) );
              return middlewares;
          }
      },
      server: {
          options: {
              port: 9000,
              base: "path/to/base"
          }
      }
  }  
  

이것을 가능한 한 심플화.connect에 의해 제공되는 미들웨어에 액세스할 수 있기 때문에 리라이트를 1순위 응답으로 설정하는 것은 간단합니다.오랜만의 질문이지만, 이것은 구글 검색의 가장 큰 결과 중 하나입니다.

아이디어는 소스 코드 https://github.com/gruntjs/grunt-contrib-connect/blob/master/Gruntfile.js#L126-L139에서 나왔습니다.
규칙 문자열: http://danburzo.ro/grunt/chapters/server/

다 해봤는데 잘 안 되더라고요.저는 angular2 앱을 쓰고 있는데, 이 솔루션은 grunt-connect push state에서 나왔습니다.제가 한 건

npm install grunt-connect-pushstate --save

grunt 파일:

var pushState = require('grunt-connect-pushstate/lib/utils').pushState;
middleware: function (connect, options) {
  return [
    // Rewrite requests to root so they may be handled by router 
    pushState(),

    // Serve static files 
    connect.static(options.base)
  ];
}

모든 게 마법처럼 작동했어요

https://www.npmjs.com/package/grunt-connect-pushstate

언급URL : https://stackoverflow.com/questions/17080494/using-grunt-server-how-can-i-redirect-all-requests-to-root-url