EDIT: Updated the text in general to keep it shorter and more concise.
I am trying to configure HTTPS when I run npm run dev
so I can test MediaStream and alike locally (for which browsers require me to provide HTTPS).
I am trying to configure it through nuxt.config.js but without any success.
Here is my nuxt.config.js file:
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)/,
});
}
},
},
};
Also, here you can see my dependencies in 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"
}
However when I run npm run dev
it still does not provide HTTPS, but does not provide any error output as well...
The output is exactly the same as if I didn't have the HTTPS configurations in nuxt.config.js:
$ 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
Solution is described in NUXT documentation:
https://nuxtjs.org/api/configuration-server/#example-using-https-configuration
This may be achieved with:
openssl genrsa 2048 > server.key
chmod 400 server.key
openssl req -new -x509 -nodes -sha256 -days 365 -key server.key -out server.crt
import path from 'path'
import fs from 'fs'
server: {
https: {
key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
}
}
You must follow the doc spec here https://nuxtjs.org/api/configuration-server/#example-using-https-configuration , BUT you must add code in the server/index.js
file, otherwise it won't work at all.
So in the server/index.js
add const https = require('https')
at the top and replace :
app.listen(port, host)
consola.ready({
message: `Server listening on http://${host}:${port}`,
badge: true
})
With
https.createServer(nuxt.options.server.https, app).listen(port, host);
And now it's working!
If for some reason you enable https just like Jan Doleczek said and you also make use of axios module, make sure to disable https like this in nuxt.config.js:
axios: {
baseURL: 'http://yourapi:8000',
https:false,
},
If you don't do that all your axios request will use https instead of https.
You can use mkcert
brew install mkcert
brew install nss # if you use Firefox
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'))
}
}
In the scenario to run local on https
and share a domain
or subdomain
to share secured cookies for Single Sign On
etc follow the below
Prerequisites
openssl.exe
in C:\\Program Files\\Git\\usr\\bin
1.1 Create key
pkcs12 -in '[full-path-and-name-of-your].pfx' -nocerts -out '[full-path-and-name-to-create-the].key'
1.2 Create crt
pkcs12 -in '[full-path-and-name-of-your].pfx' -clcerts -nokeys -out '[full-path-and-name-to-create-the].crt'
server
config likely in nuxt.config.js
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]'
}
}
"dev": "nuxt --hostname subdmain.domain.com --port 8000"
Your local will now serve on https on that domain/subdomain and port eg https://subdmain.domain.com:8000
Nuxt 3
:
options.server from
nuxt.config
is not supported. You can use--port, --host, --https, --ssl-cert
and--ssl-key
instead.
Something like this:
{
"scripts": {
"dev": "nuxi dev --host website.test --https --ssl-key key.pem --ssl-cert cert.pem --port 3000",
}
I hope I didn't lose --
in example :-)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.