feat(webpack): Support mkcert in devserver (#27158)

.gitignore

@@ -32,6 +32,7 @@ node_modules
 /src/sentry/integration-docs
 /src/sentry/loader/_registry.json
 /config/chartcuterie/config.js*
+/config/*.pem
 /tests/apidocs/openapi-derefed.json
 tests/fixtures/integrations/*/data/**
 /wheelhouse

package.json

@@ -220,7 +220,8 @@
     "build-acceptance": "IS_ACCEPTANCE_TEST=1 NODE_ENV=production yarn webpack --mode development",
     "build-production": "NODE_ENV=production yarn webpack --mode production",
     "build": "yarn build-production --output-path=public",
-    "validate-api-examples": "yarn install-api-docs && cd api-docs && yarn openapi-examples-validator ./openapi.json --no-additional-properties"
+    "validate-api-examples": "yarn install-api-docs && cd api-docs && yarn openapi-examples-validator ./openapi.json --no-additional-properties",
+    "mkcert-localhost": "mkcert -key-file config/localhost-key.pem -cert-file config/localhost.pem localhost"
   },
   "volta": {
     "node": "12.19.0",

webpack.config.js

@@ -492,10 +492,19 @@ if (
 //
 // Various sentry pages still rely on django to serve html views.
 if (IS_UI_DEV_ONLY) {
+  // Try and load certificates from mkcert if available. Use $ yarn mkcert-localhost
+  const certPath = path.join(__dirname, 'config');
+  const https = !fs.existsSync(path.join(certPath, 'localhost.pem'))
+    ? true
+    : {
+        key: fs.readFileSync(path.join(certPath, 'localhost-key.pem')),
+        cert: fs.readFileSync(path.join(certPath, 'localhost.pem')),
+      };
+
   appConfig.devServer = {
     ...appConfig.devServer,
     compress: true,
-    https: true,
+    https,
     publicPath: '/_assets/',
     proxy: [
       {