Allow Webpack's HTTPS options to be set through environment variables (…

…gravitational#1151)

web/.gitignore

@@ -4,4 +4,5 @@ node_modules
 coverage
 dist
 **/dist
-*DS_store
+*DS_store
+certs

web/README.md

@@ -80,6 +80,33 @@ To turn them off, set `WEBPACK_SOURCE_MAP` to `none` -
 $ WEBPACK_SOURCE_MAP=none yarn start-teleport --target=https://example.com:3080/web
 ```
 
+#### Custom HTTPS configuration
+
+If you'd like to provide your own key/certificate for Webpack's development server, you can
+override the default behavior by setting some environment variables.
+
+You should either set:
+
+- `WEBPACK_HTTPS_CERT` **(required)** - absolute path to the certificate
+- `WEBPACK_HTTPS_KEY` **(required)** - absolute path to the key
+- `WEBPACK_HTTPS_CA` - absolute path to the ca
+- `WEBPACK_HTTPS_PASSPHRASE` - the passphrase
+
+Or:
+
+- `WEBPACK_HTTPS_PFX` **(required)** - absolute path to the certificate
+- `WEBPACK_HTTPS_PASSPHRASE` - the passphrase
+
+You can set these in your `~/.zshrc`, `~/.bashrc`, etc.
+
+```
+export WEBPACK_HTTPS_CERT=/Users/you/go/src/github.com/gravitational/webapps/certs/server.crt
+export WEBPACK_HTTPS_KEY=/Users/you/go/src/github.com/gravitational/webapps/certs/server.key
+```
+
+The `certs/` directory in this repo is ignored by git, so you can place your certificate/keys
+in there without having to worry that they'll end up in a commit.
+
 ### Unit-Tests
 
 We use [jest](https://jestjs.io/) as our testing framework.

web/packages/build/devserver/index.js

@@ -64,8 +64,8 @@ function getTargetOptions() {
   };
 }
 
-const devServer = new WebpackDevServer(
-  {
+function getWebpackDevServerConfig() {
+  const config = {
     proxy: {
       // teleport APIs
       '/web/config.*': getTargetOptions(),
@@ -91,7 +91,30 @@ const devServer = new WebpackDevServer(
     headers: {
       'X-Custom-Header': 'yes',
     },
-  },
+  };
+
+  const cert = process.env.WEBPACK_HTTPS_CERT;
+  const key = process.env.WEBPACK_HTTPS_KEY;
+  const ca = process.env.WEBPACK_HTTPS_CA;
+  const pfx = process.env.WEBPACK_HTTPS_PFX;
+  const passphrase = process.env.WEBPACK_HTTPS_PASSPHRASE;
+
+  // we need either cert + key, or the pfx file
+  if ((cert && key) || pfx) {
+    config.server.options = {
+      cert,
+      key,
+      ca,
+      pfx,
+      passphrase,
+    };
+  }
+
+  return config;
+}
+
+const devServer = new WebpackDevServer(
+  getWebpackDevServerConfig(),
   compiler.webpackCompiler
 );