Сконфигурируйте сервер разработки веб-пакетов Gridsome для использования SSL - PullRequest
Новая
       60

Сконфигурируйте сервер разработки веб-пакетов Gridsome для использования SSL

0 голосов
/ 31 января 2020

ОБНОВЛЕНИЕ

Я закончил тем, что представил PR в ужасный проект , чтобы выполнить sh, что я пытался сделать здесь. Обновлю этот вопрос, если он будет принят. В то же время вы можете просматривать изменения, которые я сделал в моем форке проекта.

Фон

При выполнении локальной разработки мне нравится настраивать SSL в соответствии с моим производством. окружающая среда как можно ближе. Для типичного проекта Vue. js я выполняю sh следующим образом:

  1. В root проекта установите локальный сертификат с mkcert example.test
  2. Обновите мой hosts файл для сопоставления 127.0.0.1 (localhost) до example.test: 
# /etc/hosts
127.0.0.1 example.test
Обновите конфигурацию веб-пакета в vue.config.js, чтобы использовать сертификат следующим образом: 
// vue.config.js
const fs = require('fs')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') {
      config.devServer = {
        disableHostCheck: true,
        host: 'example.test',
        https: {
          key: fs.readFileSync('./example.test-key.pem', 'utf8'),
          cert: fs.readFileSync('./example.test.pem', 'utf8'),
        },
      }
    }
  },
}

При этой настройке при запуске npm run serve я могу просматривать свой сайт по адресу https://example.test

Моя цель

Я хотел бы получить аналогичные настройки конфигурации для проекта Gridsome , но пока ничего не пробовал похоже, начинает действовать.

То, что я пробовал

Вот что я пробовал до сих пор, что не сработало:

Попытка # 1: Обновление конфигурации веб-пакета в gridsome.config.js

Я попытался обновить файл gridsome.config.js, чтобы он выглядел следующим образом: 

const fs = require('fs')

module.exports = {
  siteName: 'Example',
  siteUrl: 'example.test',
  plugins: [],
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') {
      config.devServer = {
        disableHostCheck: true,
        host: 'example.test',
        https: {
          key: fs.readFileSync('./example.test-key.pem', 'utf8'),
          cert: fs.readFileSync('./example.test.pem', 'utf8'),
        },
      }
    }
    return config
  },
}

Это, похоже, никак не повлияло.

Попытка # 2: обновить конфигурацию веб-пакета в gridsome.server.js

Аналогичным образом я попытался сделать нечто подобное в gridsome.server.js: 

const fs = require('fs')

module.exports = function (api) {
  api.configureWebpack({
    devServer: {
      disableHostCheck: true,
      host: 'example.test',
      https: {
        key: fs.readFileSync('./example.test-key.pem', 'utf8'),
        cert: fs.readFileSync('./example.test.pem', 'utf8'),
      },
    }
  })
}

Попытка # 3: Изменить Express config

Другие люди, похоже, сталкивались с аналогичными проблемами при изменении конфигурации dev-сервера Gridsome . При ближайшем рассмотрении выясняется, что Gridsome использует Express вместо внутреннего сервера разработки веб-пакетов. Doh! Это помогает, если вы пытаетесь настроить правильный сервер. Я попытался изменить gridsome.server.js следующим образом: 

const fs = require('fs')
const https = require('https')

module.exports = function (api) {
  api.configureServer(app => {
    // create an HTTPS server
    const server = https.createServer({
      key: fs.readFileSync('./example.test-key.pem', 'utf8'),
      cert: fs.readFileSync('./example.test.pem', 'utf8'),
    }, app)
    // start it up
    server.listen(8080)
  })
}

Хотя я могу подтвердить, что эта функция запускается, Внутренняя конфигурация сервера Gridsome не содержит каких-либо перехватчиков, которые позволили бы что-то подобное работать так, как я надеялся.

Другая информация, Мысли и др. c.

Я попробовал изменения конфигурации веб-пакета как со стилем функции, так и со стилем объекта (как в примерах выше) в обоих местах. Я могу заставить Gridsome распознать мой хост, используя флаг, когда я запускаю dev-сервер (то есть gridsome develop --host example.test).

Мне кажется, что то, что я пытаюсь сделать, не возможный. Кто-нибудь знает по-другому? Спасибо !!!

...