diff --git a/packages/react-scripts/config/getHttpsConfig.js b/packages/react-scripts/config/getServerConfig.js
similarity index 67%
rename from packages/react-scripts/config/getHttpsConfig.js
rename to packages/react-scripts/config/getServerConfig.js
index 4fec7936b2f..bc343327b1d 100644
--- a/packages/react-scripts/config/getHttpsConfig.js
+++ b/packages/react-scripts/config/getServerConfig.js
@@ -51,24 +51,30 @@ function readEnvFile(file, type) {
   return fs.readFileSync(file);
 }
 
-// Get the https config
-// Return cert files if provided in env, otherwise just true or false
-function getHttpsConfig() {
+// Get the server config
+// Return server option if provided in env, otherwise just string
+function getServerConfig() {
   const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
-  const isHttps = HTTPS === 'true';
+  const protocol = HTTPS === 'true' ? 'https' : 'http';
 
-  if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
-    const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
-    const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
-    const config = {
-      cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
-      key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
-    };
+  if (protocol === 'https') {
+    if (SSL_CRT_FILE && SSL_KEY_FILE) {
+      const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
+      const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
+      const config = {
+        type: protocol,
+        options: {
+          cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
+          key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
+        },
+      };
 
-    validateKeyAndCerts({ ...config, keyFile, crtFile });
-    return config;
+      validateKeyAndCerts({ ...config.options, keyFile, crtFile });
+      return config;
+    }
+    return protocol;
   }
-  return isHttps;
+  return protocol;
 }
 
-module.exports = getHttpsConfig;
+module.exports = getServerConfig;
diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js
index 522a81b9b2b..2488abf4fdc 100644
--- a/packages/react-scripts/config/webpackDevServer.config.js
+++ b/packages/react-scripts/config/webpackDevServer.config.js
@@ -14,7 +14,7 @@ const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMi
 const ignoredFiles = require('react-dev-utils/ignoredFiles');
 const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
 const paths = require('./paths');
-const getHttpsConfig = require('./getHttpsConfig');
+const getServerConfig = require('./getServerConfig');
 
 const host = process.env.HOST || '0.0.0.0';
 const sockHost = process.env.WDS_SOCKET_HOST;
@@ -98,8 +98,9 @@ module.exports = function (proxy, allowedHost) {
       // remove last slash so user can land on `/test` instead of `/test/`
       publicPath: paths.publicUrlOrPath.slice(0, -1),
     },
-
-    https: getHttpsConfig(),
+    // https is deprecated from webpack-dev-server v4.4.0+ in favor of server option.
+    // see https://github.com/webpack/webpack-dev-server/blob/master/CHANGELOG.md#440-2021-10-27
+    server: getServerConfig(),
     host,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.