Горячая перезагрузка веб-пакета с помощью laravel-mix в ошибке SSL на защищенном сайте - PullRequest
Новая
       30

Горячая перезагрузка веб-пакета с помощью laravel-mix в ошибке SSL на защищенном сайте

0 голосов
/ 25 сентября 2019

Я использую Laravel Valet для локального размещения сайтов и Laravel Mix для компиляции ресурсов и выполнения HMR с использованием сервера Webpack dev

Я защитил .devлокально по 

valet secure

Нет проблем с вызовом {{ mix('js/app.js') }} при запуске npm run watch

Но всякий раз, когда я хочу воспользоваться горячей перезагрузкой, запустив скрипт hot npm, я получаюэто

GET https://localhost:8080//css/app.css net :: ERR_CERT_AUTHORITY_INVALID

GitHub предлагает добавить флаг --https, я пробовал его, а также --http

Я даже отключил проверку хостов с помощью флага --disable-host-check, очистил каждый возможный кеш и даже попробовал новый git clone, но безрезультатно

Вот мой package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --https --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@kazupon/vue-i18n-loader": "^0.3.0",
        "cross-env": "^5.1",
        "eslint-plugin-vue": "^5.2.3",
        "laravel-mix": "^4.0.7",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.21.0",
        "sass-loader": "^7.1.0",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "algoliasearch": "^3.33.0",
        "axios": "^0.19.0",
        "font-awesome": "^4.7.0",
        "jquery": "^2.1.1",
        "lato-webfont": "^2.15.1",
        "modernizr": "^3.7.1",
        "raleway-webfont": "^3.0.1",
        "raphael": "^2.1.4",
        "vlightbox": "^2.0.2",
        "vue": "^2.5.17",
        "vue-i18n": "^8.12.0",
        "vue-instantsearch": "^2.2.1"
    }
}

и webpack.mix.js, если это полезно 

const mix = require('laravel-mix');

// Extend Mix with the "i18n" method, that loads the vue-i18n-loader
mix.extend('i18n', new class {
    webpackRules() {
        return [{
            resourceQuery: /blockType=i18n/,
            type: 'javascript/auto',
            loader: '@kazupon/vue-i18n-loader',
        }, ];
    }
}(), );

// Call the .i18n() (to load the loader) before .js(..., ...)
mix.i18n()
   .js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

Что я делаю не так?Можно ли это воспроизвести?я должен найти способ обезопасить localhost:8080 тоже?

1 Ответ

0 голосов
/ 25 сентября 2019

Итак, чтобы это заработало, проинструктируйте laravel mix использовать конкретный домен и порт для HMR в объекте параметров

webpack.mix.js

// Get the APP_URL from .env and remove protocol
let url = process.env.APP_URL.replace(/(^\w+:|^)\/\//, '');
mix.options({
   hmrOptions: {
       host: url,
       port: 8080 // Can't use 443 here because address already in use
   }
});

Оставьте флаг --httpsоднако, чтобы указать webpack-dev-server, какой протокол использовать, удалите --disable-host-check, поскольку он избыточен (Google Chrome в любом случае имеет строгую политику SSL для .dev доменов)

Теперь, когда valet secure генерирует ключ SSLи сертификат для каждого домена, укажите webpack-dev-server, чтобы использовать их также в сценарии hot package.json

"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js
--inline --hot --https
--key /home/caddy/.valet/Certificates/laravel.dev.key
--cert /home/caddy/.valet/Certificates/laravel.dev.crt --config=node_modules/laravel-mix/setup/webpack.config.js",

replace / home / caddy / по вашему собственному абсолютному пути

run 

npm run hot

Теперь горячая перезагрузка работает нормально для защищенных камердинеров

Источник

...