Перейти к содержимому

Как настроить локалхост 8080

  • автор:

Начало работы с помощью кнопки Запустить проект

Используйте это руководство, чтобы узнать, как открыть и закрыть средства разработки, нажав кнопку Запустить проект , чтобы запустить демонстрацию на веб-сервере localhost и сохранить URL-адрес веб-страницы в launch.json .

Мы будем использовать демонстрационное приложение для демонстрации кнопки Запустить проект после указания этой кнопки на URL-адрес localhost, например http://localhost:8080 . Кнопка Запустить проект запускает средства разработки в режиме отладки. Это main способ открыть средства разработки, когда веб-страница должна работать на веб-сервере. В качестве предварительного шага мы создадим launch.json файл и изменим URL-адрес в нем, чтобы он указывал на localhost, обслуживающий пример приложения demo-to-do .

Вам не всегда нужно использовать этот подход, так как во многих случаях щелчок ПРАВОй кнопкой мыши HTML-файла работает. Однако многие веб-страницы используют API, для которых веб-страница должна выполняться на веб-сервере, поэтому ниже приведены конкретные действия, которые можно выполнить.

Шаг 1. Установка средств разработки и необходимых компонентов

  1. Если вы еще этого не сделали, выполните действия, описанные в разделе Установка расширения DevTools для Visual Studio Code, а затем выполните следующие действия.

Шаг 2. Запуск веб-сервера

В этом разделе поддерживается нажатие кнопки Запустить проект .

В этих шагах объясняется, как запустить HTTP-сервер с помощью кроссплатформенной оболочки Git Bash, которая является частью Git. Хотя для запуска сервера можно использовать Visual Studio Code >View>Terminal, лучше запустить сервер из командной строки, которая находится за пределами Visual Studio Code, чтобы сервер оставался запущенным даже при закрытии и повторном открытии Visual Studio Code или папки.

  1. Если вы еще этого не сделали, настройте и запустите веб-сервер в первый раз, обслуживая приложение demo-to-do из репозитория Demos. Для этого см. шаг 6. Настройка сервера localhostстатьи Установка расширения DevTools для Visual Studio Code.
  2. Откройте git bash. Например, в Windows нажмите кнопку Пуск и введите git bash.
  3. cd в определенную папку, которую вы хотите обслужить через http, Demos\demo-to-do\ : В git bash используйте косую черту для путей к файлам. Например:

cd C:/Users/username/Documents/GitHub/Demos/demo-to-do 
npx http-server 

Запуск сервера

Отображаются сведения о сервере и URL-адресе localhost, например:

Starting up http-server, serving ./ Available on: http://10.0.1.8:8080 http://127.0.0.1:8080 Hit CTRL-C to stop the server 

Шаг 3. Настройка launch.json

В этом разделе поддерживается нажатие кнопки Запустить проект .

  1. В Visual Studio Code выберите Файл>Открыть папку. Выберите каталог проекта, содержащий index.html клонируемый пример демонстрации в репозитории Демонстрации, например C:\Users\username\Documents\GitHub\Demos\demo-to-do\ . Пример папки demo-to-do, открытый в Visual Studio CodeКак и в папке demo-to-do репозитория, изначально в ней нет .vscode ни папки, ни launch.json файла.
  2. На панели действий щелкните Инструменты Microsoft Edge (значок Инструментов Microsoft Edge). Откроется панель Средства Microsoft Edge .
  3. Нажмите кнопку Создать launch.json : Кнопка Откроется новый launch.json файл.
  4. В нескольких местах файла launch.json на каждой из «url» строк прокрутите вправо и обратите внимание на комментарий «Укажите URL-адрес проекта»:

"url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", // Provide your project's url to finish configuring 
"url": "http://localhost:8080", // Provide your project's url to finish configuring 

Шаг 4. Нажмите кнопку Запустить проект

  1. В Visual Studio Code на панели действий нажмите кнопку Средства Microsoft Edge (значок Инструментов Microsoft Edge). Откроется панель Средства Microsoft Edge , содержащая кнопку Запустить проект , но не кнопку Создать файл launch.json : Область целевых объектов при наличии файла launch.json
  2. Нажмите кнопку Запустить проект . Вкладки Edge DevTools и Edge DevTools: Browser открываются в отдельных панелях, где отображается веб-приложение demo-to-do : Демонстрационное веб-приложение, запущенное на вкладке

На этом этапе можно работать с изменениями CSS или пошагово выполнять код в отладчике. Ознакомьтесь с разделами учебника Начало работы, щелкнув правой кнопкой мыши HTML-файл:

  • Шаг 4. Изменение CSS в средствах разработки, автоматическое обновление CSS-файла
  • Шаг 5. Пошаговое выполнение кода JavaScript в отладчике

Шаг 5. Закрытие средств разработки

Чтобы завершить отладку и закрыть вкладки Edge DevTools :

Кнопка

  1. На панели инструментов Отладка нажмите кнопку Остановить (SHIFT+F5): Или в меню Выполнить выберите Остановить отладку. Или закройте две вкладки Средства разработки. Закрывается панель инструментов Отладка.
  • Закрытие средств разработки в открывании средств разработки и в браузере DevTools.

Вы завершили работу с руководством «Начало работы с помощью кнопки Запустить проект». Рекомендуется также выполнить другие руководства. См. статью Начало работы с расширением DevTools для Visual Studio Code.

См. также

  • Открытие средств разработки и браузера DevTools
  • Расширение Средств разработки Microsoft Edge для Visual Studio Code

Github:

  • demo-to-do — демонстрационного веб-приложения, работающего на сервере github.io .
  • Исходный код для демонстрации
  • Репозиторий MicrosoftEdge/Demos

Как настроить локальный сервер для тестирования?

Эта статья объясняет как установить простой локальный тестовый сервер на вашем компьютере, а так же основы его использования.

Требования: Сначала вам необходимо изучить как работает интернет, а также что такое веб-сервер (en-US) .
Цель: Вы научитесь как устанавливать локальный тестовый сервер.

Локальные и удалённые файлы

На протяжении всего обучения, вы будете открывать примеры непосредственно в браузере — двойным кликом по HTML файлу, перетаскиванием файла в окно браузера, или через меню File > Open. и указывая необходимый HTML файл. Существует множество способов как это сделать.

Если веб-адрес начинается с file:// в котором далее прописан путь к файлу на вашем локальном жёстком диске, значит используется локальный файл. В противоположность этому, если вы откроете на просмотр один из наших примеров, расположенных на GitHub (или пример расположенный на любом другом удалённом сервере), веб-адрес будет начинаться с http:// или https:// , что означает что файл был получен через HTTP.

Проблемы тестирования локальных файлов

Некоторые примеры могут не запуститься, если вы попробуете открыть их как локальные файлы. Это может произойти по нескольким причинам, самые распространённые из которых:

  • Они содержат асинхронные запросы. Некоторые браузеры (включая Chrome) не будут запускать асинхронные запросы (см. Fetching data from the server), если вы просто запускаете пример из локального файла. Это связано с ограничениями безопасности (для получения дополнительной информации о безопасности в Интернете, ознакомьтесь с Website security).
  • Они имеют серверный язык. Серверные языки (например, PHP или Python) требуют специального сервера для интерпретации кода и предоставления результатов.

Запуск простого локального HTTP сервера

Чтобы обойти проблему асинхронных запросов, нам нужно протестировать такие примеры, запустив их через локальный веб-сервер. Один из самых простых способов сделать это для наших целей — использовать модуль SimpleHTTPServer Python.

Для этого нужно:

  1. Установить Python. Если вы пользуетесь Linux или Mac OS X, всё уже готово в вашей системе. Если вы пользователь Windows, вы можете скачать установочный файл с домашней страницы Python:
    • Зайдите на python.org
    • В секции загрузок, выберите линк для Python «3.xxx».
    • Внизу страницы выберите Windows x86 executable installer и скачайте его.
    • После загрузки файла запустите его.
    • На первой странице инсталлятора выберите чекбокс «Add Python 3.xxx to PATH».
    • Нажмите Install, затем нажмите Close когда установка закончится.
  2. Откройте командную строку (Windows)/ (OS X/Linux). Для проверки установки Python введите следующую команду:

# include the directory name to enter it, for example cd Desktop # use two dots to jump up one directory level if you need to cd .. 
# If Python version returned above is 3.X python -m http.server # If Python version returned above is 2.X python -m SimpleHTTPServer 

Примечание: . Если у вас уже есть что-то на порту 8000, вы можете выбрать другой порт, запустив команду сервера, за которой следует альтернативный номер порта, например: python -m http.server 7800 (Python 3.x) или python -m SimpleHTTPServer 7800 (Python 2.x). Затем вы можете получить доступ к своему контенту на localhost: 7800 .

Запуск серверных языков локально

Модуль Python SimpleHTTPServer (python 2.0) http.server (python 3.0) полезен, но он не знает, как запускать код, написанный на таких языках, как Python, PHP или JavaScript. Чтобы справиться с этим, вам понадобится нечто большее — именно то, что вам нужно, зависит от языка сервера, который вы пытаетесь запустить. Вот несколько примеров:

  • Для запуска кода на стороне сервера Python вам необходимо использовать веб-инфраструктуру Python. Вы можете узнать, как использовать структуру Django, прочитав Django Web Framework (Python). Flask также является хорошей (чуть менее тяжёлой) альтернативой Django. Чтобы запустить это, ознакомьтесь с install Python/PIP, а затем установите Flask с помощью pip3 install flask . На этом этапе вы сможете запустить примеры Python Flask, используя, например, python3 python-example.py , затем перейдя на localhost: 5000 в свой браузер.
  • Чтобы запустить серверный код Node.js (JavaScript), вам нужно использовать Node.js или фреймворк, построенный поверх него. Express — хороший выбор — см. Express Web Framework (Node.js/JavaScript).
  • Чтобы запустить PHP-серверный код, вам понадобится настройка сервера, которая может интерпретировать PHP. Хорошими вариантами для локального тестирования PHP являются MAMP (Mac и Windows), AMPPS (Mac, Windows, Linux) и LAMP (Linux, Apache, MySQL и PHP / Python / Perl). Это полные пакеты, которые создают локальные настройки, позволяющие запускать базы данных Apache, PHP и MySQL.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Получаем доступ к localhost на удаленном сервере

Вообще, данную фичу можно использовать двояко: как Socks proxy или для получения доступа к локальному хосту удаленной машины, нас же больше интересует второй вариант. Для работы нам понадобится программа PuTTy и любой линуксовый сервер (в нашем случае CentOS или Ubuntu/Debian).

В нашем примере мы будем использовать виртуальный сервер на VirtualBox с установленной CentOS 7 (принцип будет таким же и для Debian/Ubuntu).

Работает наш VirtualBox за NAT‘ом, соответственно конфигурация PuTTy для подключения к серверу остается прежней:

PuTTy Configuration

Далее, нам нужно будет настроить тунелирование трафика от нас (хост машины) к серверу (виртуальной машине):
Переходим в настройки «Connection -> SSH -> Tunnels», порт в настройке «Source port» указываем 8080, параметр под «Destination» выставляем на «Dynamic» и жмём кнопочку «Add», далее — «Ok».

PuTTY Port Forwarding

В браузере на следующем этапе в настройках прокси, указываем IP: 127.0.0.1 и Port: 8080

Browser Proxy Configuration

И на последнем этапе, нам остается лишь перейти по адресу нашего сервера, там мы должны увидеть нашу тестовую заглушку:

Remote Localhost

В данном примере мы не привязывались к конкретному адресу или порту нашего сервера, оставили это как динамический параметр указав лишь порт нашей хост машины с которой мы подключаемся (т.е.: мы проксируем трафик на удаленный сервер через порт 8080).

Таким образом мы можем через удаленный сервер попасть и в интернет, и в интранет (локальную сеть). В случае если сервер реальный и находится не у вас на компьютере, ваш IP адрес будет изменен (да, можно использовать как Socks прокси).

Можно ли изменить порт 8080 на другой

Нужно изменить стандартный порт 8080 на другой. Это можно сделать? Он занят другим приложением и работа контроллера невозможна.

Alina
Member
  • unifi.http.port=8080 (port for UAP to inform controller)
  • unifi.https.port=8443 (port for controller GUI / API, as seen in web browser)
  • portal.http.port=8880 (port for HTTP portal redirect)
  • portal.https.port=8843 (port for HTTPS portal redirect)
  • unifi.db.port=27117 (local-bound port for DB server)
  • unifi.stun.port=3478 # UDP port used for STUN
  • port 8881 for redirector port for wireless clients
  • port 8882 for redirector port for wired clients
Alina
Member

1) Завершить работу контроллера.
2) Изменить системные свойства файла (файл можно найти в директории /data/system.properties)
3) unifi.http.port=8080 — поменять на другой. Если закомментрована строка, раскомментировать (удалить решетку (#) в начале).
4) Запустить контроллер.

Wladimir
New Member

На будущее, чтобы и самому не забыть.

Не достаточно сменить порт в настройках.
У меня UI Controller стоит на машине под w2012 r2, в винде файл настроек «system.properties» лежит по пути «c:\Users\папка_пользователя\Ubiquiti UniFi\»
Все строки, начинающиеся с # это комментарии и они ни на что не влияют.
Раскомменчиваем/добавляем строчку с портом:
unifi.http.port=8191

После чего нужно терминалом зайти в каждую точку по SSH, это синтаксис для OSX:

ssh -l ubnt 192.168.1.123 pass: ubnt . ssh -l ubnt 192.168.1.133 pass: ubnt

И так далее.
(если пароль меняли/не подходит, посмотреть в настройках: Settings/site/Device Authentication)

И каждой точке выдать команду в виде:

http://ip:port/inform set-inform http://192.168.1.1:8191/inform

Только после этого всё взлетит. Порт может быть почти любым, ip это адрес машины с UI контроллером.

Смотреть кто сидит на порту 8080 можно в терминале (винды), командой

netstat -ona | findstr "8080"

Если продолжает ругаться на то, что «не могу стартовать, порт 8191 занят другим приложением», то скачиваем JavaUninstallTool, выносим жабу, прогоняем какой-нибудь чистилкой (я просто прошелся руками по всем папкам локальных пользователей и удалил в них папки Java/Oracle итд )

И ставим java по новой.

У меня взлетело после переустановки java, но профит в том, что порт 8080 много кто хочет и луче его не занимать.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *