web-dev-qa-db-ja.com

HTTPS経由でカスタムドメインでローカルに実行するようにwebpackを設定する

アプリケーションに統合したいモジュール（ローカルで開発中）を使用するには、次の2つのことを行う必要があります。
1）アプリケーションをHTTPSでローカルに実行します。
2）特定のドメインでアプリケーションを実行します。

これらの両方は、私がローカル開発に使用しているWebpack開発サーバーではかなり簡単なはずですが、何らかの理由で、ドキュメントが示唆するように機能しません。

ぼくの webpack.configファイルは：

module.exports = {
  entry: './app/js/app.js',
  output: {
    path:'./app/js/',
    publicPath: 'https://specialurl.com/assets',
    filename:'bundle.js'
 }

私がポイントしているパスは、コンピューターのhostsファイルに追加されているため、localhostのデフォルトと同じように有効です。

と私 package.jsonファイルは、開発サーバーの開始スクリプトであるため、次のようになります。

"scripts": {
"start": "webpack-dev-server --progress --colors --https",
}

これらの変更を行った後、保存後にnpm startで再起動しました。問題は、サーバーがまだhttpsで実行されておらず、ブラウザーで新しいリンクをポイントしても何も表示されないことです。私が見つけたすべてのドキュメンテーションはこれがうまくいくように見えるので、私は明白な何かを見逃しているに違いありません。

javascriptlocalhostreactjswebpackwebpack-dev-server
13
pmcote

解決しました！予想通り、Webpackを使用するのは非常に簡単ですが、ドキュメントはやや混乱しています。

必要なドメインが含まれるようにHostファイルを編集し、次のコードをwebpack.configに追加するだけです。

 devServer: {
  Host: "localhost.specialurl.com",
  port: 1234,
  https: true
},

npm startを実行し、ブラウザで https://localhost.specialurl.com:1234/webpack-dev-server を指定すると、すべての設定が完了するはずです:)

32
pmcote