Большое вам спасибо за то, что нашли время проверить мою маленькую загадку.Это мой первый вопрос StackOverflow, поэтому, пожалуйста, прости меня, если я случайно пропущу что-то важное (я добавлю любую необходимую вам информацию, если вы просто дадите мне знать).
Моя проблема заключается в следующем: у меня естьВиртуальная личная виртуальная машина, которую я использую для размещения всего кода своего приложения, включая сервер приложения.Я использую PuTTY для подключения к своей виртуальной машине разработки и перенаправляю порт, на котором работает сервер приложений vert.x (т. Е. 7443), на мой локальный хост.Таким образом, когда я подключаюсь к серверу, я просто ввожу:
https://localhost:7443
в адресной строке браузера на моей локальной машине.Я также использую Gulp.js для создания компонента пользовательского интерфейса и отслеживания изменений в моих файлах.В настоящее время задача gulp watch просто перестраивает файлы комплектов Javascript и CSS, на которые я ссылаюсь в моем файле index.html, и я вручную перезагружаю браузер всякий раз, когда перестройки комплектов завершаются.Недавно я наткнулся на Browsersync, когда исследовал технологии live-reload для браузера, и он выглядит потрясающе, но я не могу заставить его работать с моими настройками разработки.
Вот мое задание gulp watch:
const browserSync = require("browser-sync").create("browser-sync-server");
gulp.task("watch", () => {
console.info("=== Initializing BrowserSync Server ===");
browserSync.init({
proxy: "localhost:7443", // This is my dev server running on port 7443
open: false // I do not want a new browser to open up when I start BrowserSync
});
console.info("=== Listening for changes to reload === ");
const jsWatcher = gulp.watch(
myJsFiles,
{ awaitWriteFinish: true },
["reload-js"]
);
const templateWatcher = gulp.watch(
myHtmlFiles,
{ awaitWriteFinish: true },
["reload-templates"]
);
const lessWatcher = gulp.watch(
myLessFiles,
{ awaitWriteFinish: true },
["reload-less"]
);
});
Когда я запускаю задачу наблюдения, в консоли я вижу:
Starting 'watch'...
=== Initializing BrowserSync Server ===
=== Listening for changes to reload ===
Finished 'watch' after 126 ms
[Browsersync] Proxying: http://localhost:7443
[Browsersync] Access URLs:
Local: http://localhost:3000
External: http://192.168.1.11:3000
UI: http://localhost:3001
UI External: http://192.168.1.11:3001
Я также перенаправляю порты 3000 и 3001 на свой локальный компьютер, чтобы я мог получить доступ к этим конечным точкам в своем браузере.
Я могу нормально добраться до пользовательского интерфейса Browsersync через порт 3001 через HTTP, но когда я нажимаю кнопку «NEW TAB» в разделе Local , появляется новая вкладка, но сервер никогдагрузы.Он просто вращается и вращается, пока, наконец, я не получаю сообщение об ошибке в Chrome, которое говорит: «Данные не получены».У кого-нибудь есть идеи относительно того, в чем может быть проблема?Я предполагаю, что это как-то связано с тем фактом, что приложение моей команды использует HTTPS для доступа через браузер, и что для Browserync требуется дополнительная настройка для работы с HTTPS, но я не знаю, как это сделать.
Спасибо вам всем за помощь!Пожалуйста, дайте мне знать, если я смогу предоставить вам больше информации.
- Том
Редактировать 5/23/18:
Я использовал openssl для генерацииКлюч localhost и файлы сертификатов для моей виртуальной машины разработки и добавили их в мою конфигурацию для BrowserSync в моем gulpfile.js.
Вот моя измененная конфигурация:
const proxy = require("http-proxy-middleware");
...
browserSync.init({
ui: {
port: 8080
},
https: {
key: "./conf/browsersync/localhost.key",
cert: "./conf/browsersync/localhost.crt",
},
server: {
baseDir: "./",
index: "index.html"
},
middleware: [
proxy("/api", {
target: "https://localhost:7443",
secure: false, // Do not validate SSL certs
changeOrigin: true, // Seems to be a highly recommended setting
xfwd: true,
prependPath: true, // Ensure that the API calls are prepended with the target URL
logLevel: "debug" // So that I can see verbose console output
})
],
port: 3000,
open: false
});
Это определенно дало мнедальше, но это все еще не совсем верно.Теперь, когда я нажал https://localhost:3000 в своем браузере, я попал на главную страницу моего веб-приложения, но ни один из асинхронных вызовов API не был решен правильно.В консоли, где я запускаю задачу gulp watch, я вижу много ошибок от HPM (программное обеспечение html-proxy-middleware).Вот один пример:
[HPM] Error occurred while trying to proxy request /api/settings/ from localhost:3000 to https://localhost:7443 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
Кроме того, если я открою консоль Javascript в окне браузера для https://localhost:3000 (сеанс BrowserSync), я могу увидеть множество ошибок 504 (время ожидания шлюза),Есть идеи?Еще раз большое спасибо за ваше время.
- Том