diff --git a/web/.gitignore b/web/.gitignore index 35b383a140e10..1b5d45610af98 100644 --- a/web/.gitignore +++ b/web/.gitignore @@ -4,4 +4,5 @@ node_modules coverage dist **/dist -*DS_store \ No newline at end of file +*DS_store +certs \ No newline at end of file diff --git a/web/README.md b/web/README.md index 2238fd528282b..2b28604ecb7e8 100644 --- a/web/README.md +++ b/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. diff --git a/web/packages/build/devserver/index.js b/web/packages/build/devserver/index.js index 97db876101d8b..fe553a05e514e 100644 --- a/web/packages/build/devserver/index.js +++ b/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 );