Problems enabling SSL with NextJS dev server

Question

Problems enabling SSL with NextJS dev server

JyrkiHei opened this issue a year ago · comments

Are you accessing the CLI from the default port :4280 ?

No, I am using a different port number (--port) and accessing the CLI from that port
Yes, I am accessing the CLI from port :4280

Describe the bug
I try to run NextJS development server with SWA emulator. After enabling SSL, emulator crashes after first request. If I do static export of the NextJS site and use that folder with emulator, everything works correctly.

Configs and outputs at the end...

To Reproduce

Create new vanilla NextJS app with 'nxp create-next-app@latest new-swa-test'
Run ´swa init´ and accept default settings
Update package.json to run NextJS dev server with different port (3001 required for my case, but same problem with default port)
Update swa-cli.config.json with dev server port (3001) and SSL settings
Run ´swa start´
Wait for a sec or make request directly and the emulator crashes

Expected behavior
Emulator would nicely serve my pages from the NextJS server.

Desktop (please complete the following information):

OS: Windows 11
Versions
SWA CLI 1.1.4
NodeJS 18.14.0 (through NVM 1.1.9)
NextJS 13.4.19

Additional context
swa-cli.config.json

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "new-swa-test": {
      "appLocation": ".",
      "outputLocation": ".next",
      "appBuildCommand": "npm run build",
      "run": "npm run dev",
      "appDevserverUrl": "http://localhost:3001",
      "ssl": true,
      "verbose": "silly"
    }
  }
}

package.json scripts

"scripts": {
    "dev": "next dev -p 3001",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

Output after 'swa start' (certification details snipped away)

Welcome to Azure Static Web Apps CLI (1.1.4)

Using configuration "new-swa-test" from file:
  C:\code\swa-test\new-swa-test\swa-cli.config.json

***********************************************************************
* WARNING: This emulator may not match the cloud environment exactly. *
* Always deploy and test your app in Azure.                           *
***********************************************************************

Checking if localhost:3000 is accepting TCP connections...
Port 3000 is available. Use it.
Resolved port number: 3000
appDevserverUrl provided, we will try connect to dev server at .next
Trying to read workflow config with values:
 - appLocation: C:\code\swa-test\new-swa-test
 - outputLocation: http://localhost:3001
 - apiLocation: <undefined>
No workflow config folder found at C:\code\swa-test\new-swa-test\.github\workflows
Validating user workflow config (BEFORE):
 - appLocation: C:\code\swa-test\new-swa-test
 - outputLocation: http://localhost:3001
 - apiLocation: <undefined>
Validating user workflow config (AFTER):
 - appLocation: C:\code\swa-test\new-swa-test
 - apiLocation: <undefined>
 - outputLocation: http://localhost:3001
 - dataApiLocation: <undefined>
User workflow config:
 - appLocation: C:\code\swa-test\new-swa-test
 - apiLocation: <undefined>
 - outputLocation: http://localhost:3001
 - dataApiLocation: <undefined>
Running echo 'No Data API found'. Skipping
WARNING: Using built-in UNSIGNED certificate. DO NOT USE IN PRODUCTION!
Checking for cached certificate at C:\Users\heinonenjj\.swa\certificates\ssl\swa-cli-UNSIGNED.pem
Certificate is valid, using it.
Starting the SWA emulator with the following configuration:
- ssl:
  - 0: true
  - 1: -----BEGIN CERTIFICATE REQUEST-----
[[.... SNIP .... ]]
-----END CERTIFICATE REQUEST-----
-----BEGIN RSA PRIVATE KEY-----
[[.... SNIP .... ]]
-----END RSA PRIVATE KEY-----
-----BEGIN CERTIFICATE-----
[[.... SNIP .... ]]
-----END CERTIFICATE-----
  - 2: -----BEGIN CERTIFICATE REQUEST-----
[[.... SNIP .... ]]
-----END CERTIFICATE REQUEST-----
-----BEGIN RSA PRIVATE KEY-----
[[.... SNIP .... ]]
-----END RSA PRIVATE KEY-----
-----BEGIN CERTIFICATE-----
[[.... SNIP .... ]]
-----END CERTIFICATE-----
- env:
  - SWA_RUNTIME_CONFIG_LOCATION: C:\code\swa-test\new-swa-test
  - SWA_RUNTIME_WORKFLOW_LOCATION: <undefined>
  - SWA_CLI_DEBUG: silly
  - SWA_CLI_API_PORT: 7071
  - SWA_CLI_APP_LOCATION: C:\code\swa-test\new-swa-test
  - SWA_CLI_OUTPUT_LOCATION: http://localhost:3001
  - SWA_CLI_API_LOCATION: <undefined>
  - SWA_CLI_DATA_API_LOCATION: <undefined>
  - SWA_CLI_DATA_API_PORT: undefined
  - SWA_CLI_HOST: localhost
  - SWA_CLI_PORT: 3000
  - SWA_CLI_APP_SSL: true
  - SWA_CLI_APP_SSL_CERT: -----BEGIN CERTIFICATE REQUEST-----
[[.... SNIP .... ]]
-----END CERTIFICATE REQUEST-----
-----BEGIN RSA PRIVATE KEY-----
[[.... SNIP .... ]]
-----END RSA PRIVATE KEY-----
-----BEGIN CERTIFICATE-----
[[.... SNIP .... ]]
-----END CERTIFICATE-----
  - SWA_CLI_APP_SSL_KEY: -----BEGIN CERTIFICATE REQUEST-----
[[.... SNIP .... ]]
-----END CERTIFICATE REQUEST-----
-----BEGIN RSA PRIVATE KEY-----
[[.... SNIP .... ]]
-----END RSA PRIVATE KEY-----
-----BEGIN CERTIFICATE-----
[[.... SNIP .... ]]
-----END CERTIFICATE-----
  - SWA_CLI_STARTUP_COMMAND: npm run dev
  - SWA_CLI_VERSION: 1.1.4
  - SWA_CLI_SERVER_TIMEOUT: 60
  - SWA_CLI_OPEN_BROWSER: false
- commands:
  - swa: node "C:\Users\heinonenjj\AppData\Roaming\nvm\v18.14.0\node_modules\@azure\static-web-apps-cli\dist\msha\server.js"
  - api: <undefined>
  - dataApi: <undefined>
  - run: cd "C:\code\swa-test\new-swa-test" && npm run dev
[swa] Please make sure you want to hit the http proxy server.
[run]
[run] > new-swa-test@0.1.0 dev
[run] > next dev -p 3001
[run]
[swa] No staticwebapp.config.json found in current project
[swa] Validating dev server config:
[swa]  - url: http://localhost:3001
[swa]  - timeout: 60
[swa] Checking if localhost:3001 is accepting TCP connections...
[swa] - Waiting for http://localhost:3001 to be ready
[run] - ready started server on [::]:3001, url: http://localhost:3001
[run] 2023-08-21T07:54:40.313Z next:router-server:filesystem nextDataRoutes Set(0) {}
[run] 2023-08-21T07:54:40.314Z next:router-server:filesystem dynamicRoutes []
[run] 2023-08-21T07:54:40.314Z next:router-server:filesystem pageFiles Set(0) {}
[run] 2023-08-21T07:54:40.314Z next:router-server:filesystem appFiles Set(0) {}
[swa] Connected to tcp:127.0.0.1:3001 successfully
[swa] ✔ http://localhost:3001 validated successfully
[swa]
[swa] Using dev server for static content:
[swa]   http://localhost:3001
[swa]
[swa] Azure Static Web Apps emulator started at https://localhost:3000. Press CTRL+C to exit.
[swa]
[swa]
[swa] Connected to tcp:localhost:3001 successfully
[run] 2023-08-21T07:54:44.011Z next:jsconfig-paths-plugin tsconfig.json or jsconfig.json paths: { '@/*': [ './src/*' ] }
[run] 2023-08-21T07:54:44.011Z next:jsconfig-paths-plugin resolved baseUrl: C:\code\swa-test\new-swa-test
[run] 2023-08-21T07:54:44.028Z next:jsconfig-paths-plugin tsconfig.json or jsconfig.json paths: { '@/*': [ './src/*' ] }
[run] 2023-08-21T07:54:44.028Z next:jsconfig-paths-plugin resolved baseUrl: C:\code\swa-test\new-swa-test
[run] 2023-08-21T07:54:44.051Z next:jsconfig-paths-plugin tsconfig.json or jsconfig.json paths: { '@/*': [ './src/*' ] }
[run] 2023-08-21T07:54:44.051Z next:jsconfig-paths-plugin resolved baseUrl: C:\code\swa-test\new-swa-test
[run] - event compiled client and server successfully in 170 ms (20 modules)
[run] - wait compiling...
[run] - event compiled client and server successfully in 135 ms (20 modules)
[swa] GET ws://localhost:3000/_next/webpack-hmr (proxy)
[swa] killing SWA CLI
[swa] node "C:\Users\heinonenjj\AppData\Roaming\nvm\v18.14.0\node_modules\@azure\static-web-apps-cli\dist\msha\server.js" exited with code 0
--> Sending SIGTERM to other processes..
[run] cd "C:\code\swa-test\new-swa-test" && npm run dev exited with code 1
✖ SWA emulator stoped because the --run command exited with code 1.

Jikun · Answer 1 · Wed Aug 30 2023 16:54:39 GMT+0800 (China Standard Time)

Thanks for reporting. Will investigate Nextjs with ssl later.

Jyrki Heinonen · Answer 2 · Fri Sep 15 2023 05:23:42 GMT+0800 (China Standard Time)

Any update?

Jyrki Heinonen · Answer 3 · Thu Sep 28 2023 17:10:32 GMT+0800 (China Standard Time)

Any update?

Jyrki Heinonen · Answer 4 · Mon Oct 09 2023 03:04:28 GMT+0800 (China Standard Time)

Any update?

Jyrki Heinonen · Answer 5 · Wed Nov 22 2023 16:01:10 GMT+0800 (China Standard Time)

Any update yet?