使用SSL运行vuejs开发服务器（以通过HTTPS提供服务）

Question

重要细节和解决方法：我发现了这个问题："弃用不安全来源上的强大功能"

这解释了外部主机上强制使用HTTPS。我的开发环境在我的笔记本电脑上，在周末我会SSH到那台机器上，这就是为什么昨天遇到这个问题的原因。我将vuejs dev服务器远程运行在笔记本电脑上，让它监听0.0.0.0并在桌面上打开页面。这导致了问题。

我尝试使用SSH端口转发到localhost。这有效，并且对我来说是可以接受的解决方法。

原始问题仍然有效。我暂时保留它。

---

我正在使用需要SSL（WebRTC）的JS API进行工作。因此，为了进行开发，我需要通过HTTPS运行dev服务器。如何在vuejs中实现这一点？

我使用webpack快速启动了项目。我找到了一些链接，说明如何在SSL上运行webpack-dev-server，但我不知道如何在vuejs应用程序中实现这一点。考虑到JavaScript和NPM的所有内容，我非常陌生。webpack链接都提到了一个配置文件，但是我的项目中没有这样的文件。我看到的最接近的是"main.js"，但是里面绝对没有配置。

本质上，我拥有以下步骤的结果：

mkdir demo
cd demo
npm install --save-dev vue-cli
./node_modules/.bin/vue init vuetifyjs/webpack-advanced demo

# Use the defaults here (except for "Vue build" I used "Runtime-only")

cd demo
npm install
npm run dev  # <-- This is the command I would like to use SSL in

- exhuma

---

@exhumai 你好，我可以帮你处理node.js相关的问题。但是为什么vue.js会有所不同呢？ - user8556290

我其实不是很确定。这基本上是我在使用像这样的开发Web服务器尝试编写JS的第一个应用程序。我还没有单独使用过webpack。我发现使用Vuejs进行开发工作流程很容易入门。只是现在我正在与HTTPS问题苦苦挣扎。 - exhuma

您确定需要将Webpack dev服务器设置为https吗？该dev服务器仅用于实时重新加载（当您更改代码时，网站将使用新代码而无需完全刷新），仅在开发中使用，并不应与您提到的此API进行交互。也许您需要一个实际的node服务器来设置https？另外Vue与https无关，Vue是客户端问题，https是服务器问题。 - Eric Guan

@EricGuan刚开始一个node项目，我想他不太知道如何在https上驱动webpack，这里并不是问题，关键是如何从nodejs自己生成和添加SSL证书，我想这就是我理解的。要在https上进行webpack，我们只需要像这样使用https作为参数调用webpack：webpack-dev-server --https，在这种情况下，我们不必担心如何自己完成。但是，如果您有解决方案，请开车带领他。让我知道。问候。 - user8556290

Stack Overflow是一个关于编程和开发问题的网站。这个问题似乎不属于编程或开发范畴。请参阅帮助中心中的我可以在这里问什么样的问题。也许超级用户、Web应用程序堆栈交换或网络管理员堆栈交换更适合提问。 - jww

Answer 1

我不知道你是否还遇到这个问题，或者其他人是否仍然遇到，但我找到了解决办法。

按照上面的说明在您的工作文件夹中生成openssl密钥和证书。

在/node_modules/webpack-dev-server/bin/webpack-dev-server.js中将此行更改为：

 key: {

    type: 'string',

    describe: 'Path to a SSL key.',

    group: SSL_GROUP

  },

  cert: {

    type: 'string',

    describe: 'Path to a SSL certificate.',

    group: SSL_GROUP

  },

收件人：

key: {

    type: 'string',

    describe: fs.readFileSync('key.pem'),

    group: SSL_GROUP

  },

  cert: {

    type: 'string',

    describe: fs.readFileSync('cert.pem'),

    group: SSL_GROUP
  },

然后设置。

argv.https = true;

那就是我必须做的，只需从 https 中提供我的代码即可。

请注意，命令行仍将显示 http://localhost:8080，但在浏览器中使用 https 时，您的应用程序将在浏览器警告后显示。

- Everistus Olumese

Answer 2

要求已安装openssl：

首先，我们必须基于通过openssl生成的密钥生成SSL证书，而且没有密码，因为这会生成错误。

nodejs https>node server.js _tls_common.js:87 c.context.setKey(options.key); ^ Error: error:0907B068:PEM routines:PEM_READ_BIO_PRIVATEKEY:bad password read ...

进入您的项目开始创建密钥和证书：

openssl req -nodes -new -x509 -keyout key.pem -out cert.pem -days 365

-nodes：完全不加密私钥。

安装项目所需的软件包：（使用--save将其添加到package.json）

npm install express --save
npm install https --save
npm install fs --save

现在创建服务器文件：

touch server.js
nano server.js

复制/粘贴：到server.js文件中。

var fs = require('fs');
var https = require('https');
var app = require('express')();
var options = {
   key  : fs.readFileSync('key.pem'),
   cert : fs.readFileSync('cert.pem')
};

app.get('/', function (req, res) {
   res.send('Hello World!');
});

https.createServer(options, app).listen(3000, function () {
   console.log('Started!');
});

在这种情况下，我们不使用443端口，因为它已被服务使用，所以我使用3000端口，该端口未被任何应用程序使用...

- user8556290

---

但是不使用vuejs服务器？不太确定我理解了。我已经有类似的东西，使用uwsgi。但是这并不能处理.vue文件。 - exhuma

@exhuma 如果你想要我使用 Vue.js，我需要你的服务器部分。请发布它。如果需要，我也需要所需的模块。 - user8556290

没有什么特别的要发布。给我一秒钟。我会编辑原始问题，添加一个设置Vue项目的示例（基本上提供像我拥有的文件树一样的内容）。 - exhuma

@exhuma 好的，谢谢，或者把你翻译的网址发给我；）我必须在15分钟内离开，5个小时后回来。 - user8556290

刚刚编辑了原始问题。我马上就要离开几分钟了。然后这里就会是晚上时间。所以我可能要等到明天才能看到你的回复 :P - exhuma

@exhuma 没问题，我今晚会添加我的答案，明天见 ;) 晚安。 - user8556290