Question

因此，我自己跟踪了一个（多个）tutorials来创建和使用您自己的SSL自签名证书，以便在Hipster monolith示例应用程序的前端和后端启用HTTPS。

与.yo-rc.json相关：

“jhipsterVersion”：“4.8.2”，“websocket”：“spring-websocket”

我能够使其工作并在后端和前端（使用不同的证书）中启用https。

我还能够成功重新启用BrowserSync功能，以免妨碍前端开发过程。

但我正在努力使用websockets部分（后端的一个端点，它在jHipster代码中预配置），它根本不会被BrowserSync和Node代理。我一旦用户登录，就会收到错误消息，例如：

[HPM]尝试代理请求时出错 /websocket/tracker/info?access_token=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImF1dGgiOiJST0xFX0FETUlOLFJPTEVfVVNFUiIsImV4cCI6MTUwNjUzMTEwMn0.T5t-bq3w-ow_kO0eK_DkSpS2xF17_Sc_Avz7Haof4Q6vBwy2Yo3Bx8w1q0gj1eznFrerpAHFRLWGhZ4vu2EK7A&t=1506444702511 从localhost：9060到ws：//127.0.0.1：8443（ECONNRESET）

localhost：9060是我的BrowserSync端点，而ws：//127.0.0.1：8443是websockets one。

我在哪里可以配置？我试过 webpack.dev.js ，但似乎无法找到合适的配置。

Answer 1

我也收到此错误，为避免此错误，我仅在webpack-dev-server上启用了https（不使用jhipster tls配置文件）。由于我的生产环境是通过启用反向代理（ngix）到Java服务器（wildfly）的客户端通过反向代理访问的，因此我不需要在春季配置中启用https。

如果您在下面看到webpack的配置，则代理目标为http端点。

仅供参考，我将密钥和证书设置在root_project / tls文件夹中。

这是我的webpack开发服务器配置：

const webpack = require('webpack');
const writeFilePlugin = require('write-file-webpack-plugin');
const webpackMerge = require('webpack-merge');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const path = require('path');
const sass = require('sass');

const utils = require('./utils.js');
const commonConfig = require('./webpack.common.js');

const ENV = 'development';

module.exports = (options) => webpackMerge(commonConfig({env: ENV}), {
  devtool: 'eval-source-map',
  devServer: {
    contentBase: './target/classes/static/',
    proxy: [{
      context: [
        '/api',
        '/services',
        '/management',
        '/swagger-resources',
        '/v2/api-docs',
        '/h2-console',
        '/auth',
        '/captcha.jpg'
      ],
      target: `http://localhost:7777`,
      secure: false,
      changeOrigin: options.tls
    }, {
      context: [
        '/ws'
      ],
      target: `ws://localhost:7777`,
      changeOrigin: options.tls,
      secure: false,
      ws: true
    }],
    stats: options.stats,
    watchOptions: {
      ignored: /node_modules/
    },
    https: {
      key: 'tls/localhost.key',
      cert: 'tls/localhost.crt',
    },
    historyApiFallback: true
  },
  entry: {
    polyfills: './src/main/webapp/app/polyfills',
    global: './src/main/webapp/content/scss/global.scss',
    main: './src/main/webapp/app/app.main'
  },
  output: {
    path: utils.root('target/classes/static/'),
    filename: 'app/[name].bundle.js',
    chunkFilename: 'app/[id].chunk.js'
  },
  module: {
    rules: [{
      test: /\.ts$/,
      enforce: 'pre',
      loader: 'tslint-loader',
      exclude: [/(node_modules)/, new RegExp('reflect-metadata\\' + path.sep + 'Reflect\\.ts')]
    },
      {
        test: /\.ts$/,
        use: [
          'angular2-template-loader',
          {
            loader: 'cache-loader',
            options: {
              cacheDirectory: path.resolve('target/cache-loader')
            }
          },
          {
            loader: 'thread-loader',
            options: {
              // There should be 1 cpu for the fork-ts-checker-webpack-plugin.
              // The value may need to be adjusted (e.g. to 1) in some CI environments,
              // as cpus() may report more cores than what are available to the build.
              workers: require('os').cpus().length - 1
            }
          },
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
              happyPackMode: true
            }
          },
          'angular-router-loader'
        ],
        exclude: /(node_modules)/
      },
      {
        test: /\.scss$/,
        use: ['to-string-loader', 'css-loader', {
          loader: 'sass-loader',
          options: {implementation: sass, sourceMap: true}
        }],
        exclude: /(vendor\.scss|global\.scss)/
      },
      {
        test: /(vendor\.scss|global\.scss)/,
        use: ['style-loader', 'css-loader', 'postcss-loader', {
          loader: 'sass-loader',
          options: {implementation: sass, sourceMap: true}
        }]
      }]
  },
  stats: process.env.JHI_DISABLE_WEBPACK_LOGS ? 'none' : options.stats,
  plugins: [
    process.env.JHI_DISABLE_WEBPACK_LOGS
      ? null
      : new SimpleProgressWebpackPlugin({
        format: options.stats === 'minimal' ? 'compact' : 'expanded'
      }),
    new FriendlyErrorsWebpackPlugin(),
    new ForkTsCheckerWebpackPlugin(),
    new BrowserSyncPlugin({
      https: {
        key: 'tls/localhost.key',
        cert: 'tls/localhost.crt',
      },
      host: 'localhost',
      port: 9000,
      proxy: {
        target: `http${options.tls ? 's' : ''}://localhost:9060`,
        ws: true,
        proxyOptions: {
          changeOrigin: false  //pass the Host header to the backend unchanged  https://github.com/Browsersync/browser-sync/issues/430
        }
      },
      rewriteRules: [
        {
          match: /Content-Security-Policy/,
          fn: function (match) {
            return "DISABLED-Content-Security-Policy";
          }
        }
      ],
      socket: {
        clients: {
          heartbeatTimeout: 60000
        }
      }
    }, {
      reload: false
    }),
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)/,
      path.resolve(__dirname, './src/main/webapp/')
    ),
    new writeFilePlugin(),
    new webpack.WatchIgnorePlugin([
      utils.root('src/test'),
    ])
  ].filter(Boolean),
  mode: 'development'
});

将自签名SSL证书添加到JHipster示例应用程序会破坏websockets通信

1 个答案: