javascript - Run vuejs development server with SSL (to serve over HTTPS) - Stack Overflow

admin管理员组

文章数量:1401444

Important Detail & Workaround: I've e across this: "Deprecating Powerful Features on Insecure Origins"

This explains that HTTPS is enforced on external hosts. I have my development environment on my laptop and, on the weekend I SSH into that box, which is why I ran into this problem yesterday. I run the vuejs dev server remotely on the laptop, making it listen to 0.0.0.0 and open the page on my desktop. This causes the problem.

I've tried using SSH port forwarding to localhost. This worked and is an acceptable workaround for me.

The original question still remains valid. I will leave it open for now.

---

I'm working with a JS API which requires SSL (WebRTC). So to do development, I need to run the dev server over HTTPS. How can I do that with vuejs?

I've quickstarted the project using webpack. I found some links explaining how to run webpack-dev-server over SSL but I don't know how to do that with a vuejs application. I'm incredibly green considering everything that's JavaScript & NPM. The webpack links all mention a config file, but there is no such file in my project. The closest I see is the "main.js" but there is absolutely no configuration in there.

In essence, what I have is the result of the following steps:

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 mand I would like to use SSL in

Important Detail & Workaround: I've e across this: "Deprecating Powerful Features on Insecure Origins"

This explains that HTTPS is enforced on external hosts. I have my development environment on my laptop and, on the weekend I SSH into that box, which is why I ran into this problem yesterday. I run the vuejs dev server remotely on the laptop, making it listen to 0.0.0.0 and open the page on my desktop. This causes the problem.

I've tried using SSH port forwarding to localhost. This worked and is an acceptable workaround for me.

The original question still remains valid. I will leave it open for now.

---

I'm working with a JS API which requires SSL (WebRTC). So to do development, I need to run the dev server over HTTPS. How can I do that with vuejs?

I've quickstarted the project using webpack. I found some links explaining how to run webpack-dev-server over SSL but I don't know how to do that with a vuejs application. I'm incredibly green considering everything that's JavaScript & NPM. The webpack links all mention a config file, but there is no such file in my project. The closest I see is the "main.js" but there is absolutely no configuration in there.

In essence, what I have is the result of the following steps:

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 mand I would like to use SSL in

• javascript
• node.js
• ssl
• vue.js

Share Improve this question Follow edited Oct 22, 2017 at 6:56 exhuma asked Oct 21, 2017 at 15:19 exhumaexhuma 21.8k1515 gold badges9696 silver badges138138 bronze badges 8

• @exhumai Hi i can help you for node.js but why vue.js should be different?? – user8556290 Commented Oct 21, 2017 at 16:16
• I don't really know. It is pretty much the first application I am trying to write in JS using a dev web server like this. I have not used webpack by itself just yet. I find the development workflow with vuejs easy to get started with. Except that I am now struggling with the HTTPS issue – exhuma Commented Oct 21, 2017 at 16:30
• i just put an example based on express fs and https adding certificat based on key generated by openssl needed. Regards. – user8556290 Commented Oct 21, 2017 at 17:18
• 1 Are you sure you need the Webpack dev server to be https? The dev server is purely for live reloading (as you change the code, the website will use the new code without a full refresh), it is only used in development and shouldn’t interact with this API you mentioned. Maybe you need an actual node server to be https? Also Vue doesn’t have anything to do with https, Vue is client side and https is a server issue. – Eric Guan Commented Oct 21, 2017 at 22:25
• @EricGuan exhuma just started a node project i think he don't really known how to drive webpack on https isn't really a matter here the way is how to add and generate from nodejs own SSL i guess is what i understand. For doing a webpack on https what we have to do is just to call the web pack with a https as arguments like this : webpack-dev-server --https in this cas we don't worries about how to do them self. But if you got a solution about this take the car and drive him if you wanted. Let me known. Regards. – user8556290 Commented Oct 21, 2017 at 23:12

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

I don't know if you still have this problem or if any other person still encounters it but I found a solution.

Follow the instruction above to generate an openssl key and cert in your working folder.

In /node_modules/webpack-dev-server/bin/webpack-dev-server.js change this line from:

 key: {

    type: 'string',

    describe: 'Path to a SSL key.',

    group: SSL_GROUP

  },

  cert: {

    type: 'string',

    describe: 'Path to a SSL certificate.',

    group: SSL_GROUP

  },

to:

key: {

    type: 'string',

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

    group: SSL_GROUP

  },

  cert: {

    type: 'string',

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

    group: SSL_GROUP
  },

then set

argv.https = true;

That is all I had to do to have my code served from https.

Note that the mand line will still read http://localhost:8080, but when you use https in the browser, your app will be displayed after warning from the browser

Requirement openssl installed :

First we have to generate SSL certificat based on a key made by openssl and without pass phrase cos this will generate an error.

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

Go inside your project start to create key & certificat :

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

-nodes : Don't encrypt the private keys at all.

Install the packages needed for your project : (--save to add to package.json)

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

now create the server file :

touch server.js
nano server.js

Copy/Paste : to 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!');
});

In this cas we don't use 443 port because is already used by services, so i use the port 3000 unused by any app...

本文标签： javascriptRun vuejs development server with SSL (to serve over HTTPS)Stack Overflow