如何在 localhost 中使用 HTTPS 运行 NUXT（npm run dev）？

Posted 2023-02-22

【中文标题】如何在 localhost 中使用 HTTPS 运行 NUXT（npm run dev）？

【英文标题】：How to run NUXT (npm run dev) with HTTPS in localhost?

【发布时间】：2019-11-19 19:28:27

【问题描述】：

编辑：总体上更新了文本以使其更短更简洁。

我正在尝试在运行 npm run dev 时配置 HTTPS，以便可以在本地测试 MediaStream 等（浏览器要求我提供 HTTPS）。

我正在尝试通过 nuxt.config.js 对其进行配置，但没有任何成功。

这是我的 nuxt.config.js 文件：

import fs from "fs";
import pkg from "./package";

export default 
  mode: "spa",

  /*
  ** Headers of the page
  */
  head: 
    title: pkg.name,
    meta: [
       charset: "utf-8" ,
       name: "viewport", content: "width=device-width, initial-scale=1" ,
       hid: "description", name: "description", content: pkg.description ,
    ],
    link: [
       rel: "icon", type: "image/x-icon", href: "/favicon.ico" ,
    ],
  ,

  /*
  ** Customize the progress-bar color
  */
  loading:  color: "#fff" ,

  /*
  ** Global CSS
  */
  css: [
    "element-ui/lib/theme-chalk/index.css",
    "@makay/flexbox/flexbox.min.css",
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    "@/plugins/element-ui",
    "@/plugins/vue-upload",
    "@/plugins/axios-error-event-emitter",
    "@/plugins/eventemitter2",
    "@/plugins/vue-awesome",
    "@/plugins/webrtc-adapter",
    "@/plugins/vue-browser-detect-plugin",
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    "@nuxtjs/axios",
    "@nuxtjs/pwa",
  ],
  /*
  ** Axios module configuration
  */
  axios: 
    // See https://github.com/nuxt-community/axios-module#options
    baseURL: process.env.NODE_ENV === "production" ? "https://startupsportugal.com/api/v1" : "http://localhost:8080/v1",
  ,

  /*
  ** Build configuration
  */
  build: 
    transpile: [/^element-ui/, /^vue-awesome/],

    filenames: 
      app: ( isDev ) => (isDev ? "[name].[hash].js" : "[chunkhash].js"),
      chunk: ( isDev ) => (isDev ? "[name].[hash].js" : "[chunkhash].js"),
    ,

    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) 
      // Run ESLint on save

      if (ctx.isClient) config.devtool = "#source-map";

      if (ctx.isDev) 
        config.devServer = 
          https: 
            key: fs.readFileSync("server.key"),
            cert: fs.readFileSync("server.crt"),
            ca: fs.readFileSync("ca.pem"),
          ,
        ;
      

      if (ctx.isDev && ctx.isClient) 
        config.module.rules.push(
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/,
        );
      
    ,
  ,
;

另外，在这里你可以看到我在 package.json 中的依赖：

"dependencies": 
    "@makay/flexbox": "^3.0.0",
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/pwa": "^2.6.0",
    "cross-env": "^5.2.0",
    "element-ui": "^2.4.11",
    "eventemitter2": "^5.0.1",
    "lodash": "^4.17.11",
    "nuxt": "^2.8.0",
    "pug": "^2.0.3",
    "pug-plain-loader": "^1.0.0",
    "quagga": "^0.12.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-awesome": "^3.5.3",
    "vue-browser-detect-plugin": "^0.1.2",
    "vue-upload-component": "^2.8.20",
    "webrtc-adapter": "^7.2.4"
  ,
  "devDependencies": 
    "@nuxtjs/eslint-config": "^0.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.15.1",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-config-standard": ">=12.0.0",
    "eslint-import-resolver-webpack": "^0.11.1",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-import": ">=2.16.0",
    "eslint-plugin-jest": ">=22.3.0",
    "eslint-plugin-node": ">=8.0.1",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-promise": ">=4.0.1",
    "eslint-plugin-standard": ">=4.0.0",
    "eslint-plugin-vue": "^5.2.2",
    "nodemon": "^1.18.9"
  

但是，当我运行 npm run dev 时，它仍然不提供 HTTPS，但也不提供任何错误输出...

输出与我在 nuxt.config.js 中没有 HTTPS 配置时完全相同：

$ npm run dev

> clothing-demo@1.0.0 dev /mnt/d/tralha/clothing-demo-app/frontend
> nuxt --hostname 0.0.0.0 --port 3000


   ╭────────────────────────────────────────────────╮
   │                                                │
   │   Nuxt.js v2.8.1                               │
   │   Running in development mode (spa)            │
   │                                                │
   │   Listening on: http://192.168.126.241:3000/   │
   │                                                │
   ╰────────────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                                                  14:30:34
ℹ Initial build may take a while                                                                                                                                                                                     14:30:35
✔ Builder initialized                                                                                                                                                                                                14:30:35
✔ Nuxt files generated                              

【问题讨论】：

你在使用 webpack 吗？

NUXT 使用 webpack。我会将依赖项和版本添加到帖子中

那么你可以使用https dev server来解决问题吗？ webpack.js.org/configuration/dev-server/#devserverhttps

我有点迷路了。我将以下内容添加到我的 nuxt.config.js 并尝试了“npm run dev”，但没有发生任何新情况......我错过了什么？ if (ctx.isDev) config.devServer = http2: true, ;

如果要https，为什么要使用http2？

【参考方案1】：

本地开发上的 HTTPS - NUXT 样式

NUXT 文档中描述了解决方案：

https://nuxtjs.org/api/configuration-server/#example-using-https-configuration

这可以通过以下方式实现：

转到项目主目录； 创建私钥和公钥；

openssl genrsa 2048 > server.key
chmod 400 server.key
openssl req -new -x509 -nodes -sha256 -days 365 -key server.key -out server.crt

在nuxt.config.js的顶部添加要求；

import path from 'path'
import fs from 'fs'

在nuxt.config.js中扩展或添加服务器配置；

server: 
  https: 
    key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
    cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
  

【讨论】：

遇到和 OP 一样的问题。严格按照这些说明进行操作，但没有成功。

这对我有用，但是只有在我处于开发模式时我才能拥有它？这段代码正在生产中运行，我不想要这个。

@LincolnLemos try: server: process.env.NODE_ENV !== 'production' ? https：...：，

以防万一有人需要，请遵循此说明***.com/a/60516812/4059304 和此security.stackexchange.com/questions/163199/…

【参考方案2】：

你必须遵循https://nuxtjs.org/api/configuration-server/#example-using-https-configuration这里的文档规范，但是你必须在server/index.js文件中添加代码，否则它根本不起作用。

所以在server/index.js 顶部添加const https = require('https') 并替换：

app.listen(port, host)
  consola.ready(
    message: `Server listening on http://$host:$port`,
    badge: true
  )

与

https.createServer(nuxt.options.server.https, app).listen(port, host);

现在它开始工作了！

【参考方案3】：

你可以使用mkcert

安装 mkcert：

brew install mkcert
brew install nss # if you use Firefox

将 mkcert 添加到本地根 CA：

mkcert -install

在您的终端中，导航到站点的根目录或您希望证书所在的任何目录。然后运行：

mkcert localhost

将以下内容添加到您的nuxt.config.js：

    server: 
        https: 
            key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
            cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem'))
        
    

https://web.dev/how-to-use-local-https/

【讨论】：

最简单最完整的解决方案。谢谢你。要添加此内容，const fs = require('fs'); const path = require('path'); 必须包含在 nuxt.config.js 文件的顶部。

【参考方案4】：

如果由于某种原因您像 Jan Doleczek 所说的那样启用了 https，并且您还使用了 axios 模块，请确保在 nuxt.config.js 中像这样禁用 https：

  axios: 
    baseURL: 'http://yourapi:8000',
    https:false,
  ,

如果你不这样做，你所有的 axios 请求都将使用 https 而不是 https。

【讨论】：

不明白你最后一句话。您的意思是使用http 而不是https？

【参考方案5】：

在https 上本地运行并共享domain 或subdomain 以共享Single Sign On 等的安全cookie 等的场景中，请遵循以下操作

先决条件

openssl 如果您使用的是 Windows，您可以在 C:\Program Files\Git\usr\bin 中找到 openssl.exe 您的 .pfx 证书 如果需要，包括密码

1。使用 openssl.exe 创建 .crt 和 .key 文件

1.1 创建密钥

pkcs12 -in '[full-path-and-name-of-your].pfx' -nocerts -out '[full-path-and-name-to-create-the].key' 如果提示输入密码以打开您的 .pfx

1.2 创建crt

pkcs12 -in '[full-path-and-name-of-your].pfx' -clcerts -nokeys -out '[full-path-and-name-to-create-the].crt' 将 .key 和 .crt 移至源文件夹的根目录

See more details here

2。更新server 配置可能在nuxt.config.js

正如其他答案所建议的，请按照更改从 Nuxt documentation 设置 https 输入第 1 步中使用的密码作为 passphase 值

  server: 
    https: 
      key: fs.readFileSync(path.resolve(__dirname, '[key-file-name].key')),
      cert: fs.readFileSync(path.resolve(__dirname, '[crt-file-name].crt')),
      passphrase: '[your password]'
    
  

3。创建/修改本地构建脚本以指定主机名

"dev": "nuxt --hostname subdmain.domain.com --port 8000"

您的本地现在将在该域/子域和端口上的 https 上提供服务，例如https://subdmain.domain.com:8000

【参考方案6】：

Nuxt 3:

不支持来自nuxt.config 的options.server。您可以改用--port, --host, --https, --ssl-cert 和--ssl-key。

official docs

类似这样的：

    "scripts": 
        "dev": "nuxi dev --host website.test --https --ssl-key key.pem --ssl-cert cert.pem --port 3000",

我希望我没有在示例中丢失-- :-)