Строго погледнато, няма нищо конкретно различно между „локалния“ уеб сървър и традиционния уеб сървър. Квалификаторът локален просто се отнася до това, че се изпълнява на същата машина, на която изграждате своя сайт или приложение.

Производственият уеб сървър ще трябва да включва много повече функции, за да може да се справя с неща като обем на трафика и сигурност; но за щастие не е нужно да се тревожим за тях, когато обслужваме нашите файлове локално.

Всичко, за което трябва да се тревожим, е да накараме нашия проект да се покаже в нашия браузър.

Уеб сървърът (по-специално HTTP сървър) е част от софтуера, предназначен да доставя съдържание от едно устройство на друго.

В нашия случай това съдържание е HTML файл и ние го доставяме на нашия уеб браузър, който ще го покаже за нас.

Преди да продължим, важно е да очертаем няколко основни термина, които ще срещате често, когато работите с уеб сървър:

- localhost — Това е псевдоним за IP на вашата машина, обикновено преобразуващ се в 127.0.0.1, loopback адрес, който насочва заявките обратно към вашата собствена машина. Често ще наричате този IP, наричан вашия домашен адрес. „Повече информация тук“.

- порт — Портът е специален номер, използван за препращане към процеса или програмата, изпълнявана на машината, до която трябва да бъде изпратена заявката. Така че, ако изпращате писмо, можете да мислите за IP като за домашен адрес, а за порта като за лицето в къщата, до което е адресирано писмото. Някои номера на портове са _резервирани_. Например порт 80 е стандартният за целия HTTP интернет трафик. Когато не включите номер на порт в URL, се приема, че той е 80 по подразбиране. Правенето на заявка от браузър към процес на вашата собствена машина, използвайки порт 8000, ще изглежда така: `http://localhost:8000`

(Не се притеснявайте, ако не разбирате всички тези термини на този етап, все още можете да стартирате сървър, без да знаете по-фините подробности, но това помага да разберете някои от основните понятия)

В по-голямата си част, освен ако не редактирате hosts файла« на вашата операционна система, всички ваши заявки към вашия локален сървър ще бъдат направени към домейна `localhost`. Портът може да бъде зададен ръчно от вас или в зависимост от сървъра, който използвате, може да бъде зададен автоматично.

Някои често срещани локални сървърни портове, които ще видите, са 3000 (използван от `create-react-app`), 5000 (използван от разширението `Live Server` на VS Code) и порт 8000 (порт, който разработчиците обикновено използват за локални сървъри, само по конвенция).

Повечето сървърни приложения, които откриват процес, който вече работи на порт на вашата машина, просто ще увеличат номера на порта с единица, докато не намерят свободен порт.

Изпълнение на локален уеб сървър

Във всеки от тези примери предполагаме, че имате файл, наречен `index.html` в корена на директорията, в която стартирате сървъра.

Ако все още нямате такъв, можете или да използвате шаблона по-долу, или ако използвате VS Code, можете да създадете файл, наречен `index.html` и просто да натиснете `!` ключ. Ще получите контекстно меню, което при щракване автоматично ще генерира шаблон за вас:

<!DOCTYPE html>
<html>
  <head>
  <meta charset=”UTF-8" />
  </head>
  <body>My web page</body>
</html>

Опция 1 (препоръчително): Live Server Extension (VS Code)

Ако използвате VS Code, най-лесният начин е да инсталирате разширението `Live Server` (идентификатор на разширение `ritwickdey.liveserver`). Просто инсталирайте разширението и иконата „Go Live“ ще се появи на синята лента в долния десен ъгъл на VS Code.

След като щракнете върху него, ще можете да видите уеб страницата си на какъвто и да е порт, който сървърът реши, URL адресът по подразбиране е http://localhost:5500

Ако имате затруднения, можете да се обърнете към пълната документация тук.

Вариант 2: Уеб сървър на възел

Ако вече сте инсталирали Node.js на вашата машина (ще ви трябва за други уроци в тази поредица), тогава автоматично ще имате инсталиран и пакет за изпълнение на `npx` (не бъркайте `npx` с `npm` са две различни команди).

Изпълнете следната команда:

npx http-server -p 8000

Ще ви подкани да инсталирате `http-сървър` (ако вече не е инсталиран). След това можете да получите достъп до вашата уеб страница на [http://localhost:8000]()

Опция 3: Python3 уеб сървър

Ако сте на машина с инсталиран Python 3, тогава можете да стартирате прост уеб сървър със следната команда:

python3 -m http.server 8000

След това отворете вашата уеб страница на адрес http://localhost:8000

Опция 4: PHP уеб сървър

Ако вече имате инсталиран PHP на вашата машина, тогава можете да стартирате лесен локален уеб сървър със следната команда:

php -S localhost:8000

Той ще обслужва вашия HTML и Javascript по същия начин като всеки друг сървър, но като приятен бонус можете също да включите някакъв PHP код във вашия `index.html`, ако решите (не е необходимо обаче).

Достъп до вашата уеб страница на адрес http://localhost:8000

Разглеждане на вашата уеб страница

Която и опция да изберете, ако сте използвали стандартния HTML шаблон от предишния раздел, резултатът трябва да е същият:

Обобщавайки

Сега, когато имате възможността да преглеждате вашите файлове на жив сървър, имате всички необходими инструменти, за да тествате вашето уеб приложение.

Въпреки че можете да използвате по-усъвършенствани инструменти, докато вашият стек се разширява, в крайна сметка, независимо от сложността, вие винаги ще можете да се върнете към някой от тези прости уеб сървъри, за да хоствате входната точка на вашето приложение.

Моля, разгледайте другите записи в тази серия! Чувствайте се свободни да оставите коментар или въпрос и да споделите с други, ако намерите някой от тях за полезен:

  • „Разбиране на съвременния уеб стек: Изпълнение на локален уеб сървър“
  • „Разбиране на съвременния уеб стек: Babel“
  • „Разбиране на съвременния уеб стек: Webpack (част 1)“
  • „Разбиране на съвременния уеб стек: Webpack (част 2)“

Благодаря за четенето!