JHipster專案啟動後預設的8080主頁是空白頁面？

Gin.p發表於2017-07-01

1、背景

根據官網一步步地生成專案，他喵的啟動後居然是一個空白頁面，這怎麼玩啊？還有這種操作的嗎？跟說好的不一樣啊！關於JHipster資料，國內少的可憐，幾乎都是同一樣的東西，純介紹的文章，只好上stackoverflow上查了。

2、相似的情況

在stackoverflow找到了一個相似的提問，不過沒有具體的解決方法，倒是裡面的某個評論給了我很大的提示。

By default, yarn listens on port 9000 (webpack + browser sync) to hot reload frontend code and contents, maven or gradle listens on port 8080 to hot reload server code. You must run both in dev.

在開發階段，通常使用yarn start來啟動angular2，可以在開發過程中熱載入修改後的程式碼，然後通過./mvnw來啟動Spring Boot後端的api服務。
那麼問題來了，我以後要上線的時候也要這樣啟動啊？(╯‵□′)╯︵┻━┻

3、解決過程

由於前端是angular2，雖然可以熱載入方便開發者開發，但是上線也不會這樣做的。
通過了解angular2，可以通過ng build打包好，然後可以直接訪問主頁。
我在專案的目錄下執行ng build後，打包好的程式碼自動生成到target的www上面。
再次啟動專案，還是空白頁面，回到原點。
開啟瀏覽器的F12的network，居然只有一個localhost？？？
不對啊！為什麼只會有一個localhost呢？其他資源沒有載入嗎？有貓膩！
開啟生成專案的程式碼，找到配置web資源的WebConfigurer，通過檢視程式碼，我們可以看到：

public void customize(ConfigurableEmbeddedServletContainer container) {
        MimeMappings mappings = new MimeMappings(MimeMappings.DEFAULT);
        // IE issue, see https://github.com/jhipster/generator-jhipster/pull/711
        mappings.add("html", "text/html;charset=utf-8");
        // CloudFoundry issue, see https://github.com/cloudfoundry/gorouter/issues/64
        mappings.add("json", "text/html;charset=utf-8");
        container.setMimeMappings(mappings);
        // When running in an IDE or with ./mvnw spring-boot:run, set location of the static web assets.
        setLocationForStaticAssets(container);

        /*
         * Enable HTTP/2 for Undertow - https://twitter.com/ankinson/status/829256167700492288
         * HTTP/2 requires HTTPS, so HTTP requests will fallback to HTTP/1.1.
         * See the JHipsterProperties class and your application-*.yml configuration files
         * for more information.
         */
        if (jHipsterProperties.getHttp().getVersion().equals(JHipsterProperties.Http.Version.V_2_0) &&
            container instanceof UndertowEmbeddedServletContainerFactory) {

            ((UndertowEmbeddedServletContainerFactory) container)
                .addBuilderCustomizers(builder ->
                    builder.setServerOption(UndertowOptions.ENABLE_HTTP2, true));
        }
    }

其中，setLocationForStaticAssets(container);就是設定網站的靜態資源的位置。眼看程式碼是沒問題的，唯有debug救我。debug下面的程式碼：

private void setLocationForStaticAssets(ConfigurableEmbeddedServletContainer container) {
        File root;
        String prefixPath = resolvePathPrefix();
        root = new File(prefixPath + "target/www/");
        if (root.exists() && root.isDirectory()) {
            container.setDocumentRoot(root);
        }
    }

通過debug發現，root的路徑多了%20的字元導致找不到路徑，%20就是空格，將空格去掉再試一試~
果然是這個問題，去掉空格之後就有內容了。

4、結案

看看目錄的路徑是否帶有空格或者中文字元，有的話去掉試試看。

相關文章