При разработке приложений, обучении использованию библиотеки или просто быстрому тестированию вы можете столкнуться с необходимостью разместить свои файлы на «статическом» сервере - это означает, что вам просто нужен HTTP-сервер для обслуживания файлов как есть из каталога - . В настоящее время существует несколько простых способов быстрой работы статического сервера, и именно об этом я расскажу в этой статье.

Я предполагаю, что для всех опций ниже, использующих командную строку, вы уже вошли в папку, в которой находятся ваши файлы. Например, если ваш код находится в папке «проект»

/
|- project
    |- index.html
    |- js
        |- main.js

Сначала вы должны войти в папку своего «проекта» в командной строке, выполнив примерно следующее:

cd /project

Серверы на основе узлов

Если на вашем компьютере установлен NodeJS, вы можете использовать несколько пакетов, доступных через NPM / NPX. Когда вы устанавливаете Node, вы также получаете установленные NPM и NPX. Если вы не знакомы с NPX, вот статья, которую я написал об этом, подробно объясняя это. Однако вам не нужно знать подробности, чтобы использовать любой из перечисленных ниже вариантов.

1. Browsersync

Browsersync существует уже довольно давно и очень популярен при разработке. Конечно, вы можете использовать его только для обслуживания своих статических файлов с помощью этой команды:

npx browser-sync start --server

Вы увидите такой результат:

[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.174:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Serving files from: ./

И браузер должен автоматически открыть указанный выше локальный URL.

Если вы хотите, чтобы он автоматически отслеживал изменения в ваших файлах и перезагружал страницу при каждом изменении файла, просто используйте опцию файлов, указав файлы, которые вы хотите просмотреть. нравится:

npx browser-sync start --server --files "*.html, js/*.js"

2. http-сервер

Модуль http-сервер очень прост. Вам просто нужно запустить:

npx http-server

И вы получите что-то вроде этого:

Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://192.168.1.174:8080

Вы можете использовать любой из URL-адресов, указанных выше, для доступа к вашему серверу. Разница в том, что второе должно быть доступно для любого другого устройства, отличного от вашего компьютера, если оно подключено к той же сети, что и ваш компьютер.

3. lite-сервер

Пакет lite-server помогает вам запускать сервер Node, как это делают static-server или Browsersync, но в нем есть некоторые оптимизации для одностраничных приложений (SPA), которые должны работать лучше, если вы пытаетесь запустить ваш СПА. Чтобы запустить его, просто сделайте следующее:

npx lite-server

Результат будет примерно таким:

[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.174:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...

Он должен автоматически открывать ваш браузер по указанному выше локальному URL-адресу. Как видите, это просто оболочка для BrowserSync (и она выполняет внутреннюю оптимизацию для SPA). Для дополнительных опций просто проверьте документы.

4. служить

Сервер обслужить - простой и быстрый вариант. Тебе просто нужно бежать

npx serve

И он автоматически запустит статический сервер и покажет вам следующий результат:

Serving!
- Local:            http://localhost:53459
- On Your Network:  http://192.168.1.174:53459
Copied local address to clipboard!

Теперь вы можете открыть браузер и перейти к указанному выше локальному URL.

5. статический сервер

Пакет static-server довольно прост. Вам не нужно устанавливать его глобально (как показано в документации). Тебе просто нужно сделать это

npx static-server

Будет выведено что-то вроде этого

* Static server successfully started.
* Serving files at: http://localhost:9080
* Press Ctrl+C to shutdown.

Теперь вы можете открыть этот URL-адрес в своем браузере и получить доступ к файлам, например http://localhost:9080/js/main.js

Есть много вариантов (которые вы можете проверить в документации), но я использую чаще всего возможность сразу открывать URL-адрес в моем браузере, когда я запускаю команду, например:

npx static-server -o

Серверы на базе Python

Если на вашем компьютере установлен Python (на компьютерах Mac по умолчанию установлен Python), есть также несколько очень простых вариантов.

6. Python 2 - SimpleHTTPServer

Если у вас Python версии 2, вы можете использовать SimpleHttpServer, просто запустите эту команду:

python -m SimpleHTTPServer

И вы увидите такое сообщение:

Serving HTTP on 0.0.0.0 port 8000 …

Это означает, что ваш локальный сервер должен быть доступен по адресу http://localhost:8000

7. Python 3 - http.server

Если у вас установлен Python версии 3, команда SimpleHTTPServer не будет работать, но вы можете использовать что-то подобное с http.server, например:

python3 -m http.server

Это даст вам такое сообщение:

Serving HTTP on :: port 8000 (http://[::]:8000/) ...

Сервер на базе PHP

8. Встроенный веб-сервер PHP.

Если у вас установлен PHP, вы можете запустить его встроенный веб-сервер. В приведенной ниже команде я говорю PHP запустить сервер на моем локальном хосте через порт 8888.

php -S localhost:8888

Вы получите такое сообщение:

Listening on http://localhost:8888
Document root is /project/
Press Ctrl-C to quit.

Единственное отличие от этого заключается в том, что этот сервер работает как статический сервер и как динамический сервер, поэтому он также сможет анализировать сценарии PHP (если они у вас есть в вашей кодовой базе).

Бонус - расширение Chrome

Это отличное расширение для запуска статического веб-сервера, которое вы можете использовать, если являетесь пользователем Chrome.

9. Веб-сервер для Chrome

Веб-сервер для Chrome - очень удобное расширение Chrome, которое вы можете добавить в свой браузер Chrome. После установки просто откройте его и выберите папку, которая будет корнем вашего сервера, и вуаля !.

После того, как вы выберете папку, вы можете щелкнуть URL-адрес, указанный в ней, и получить доступ к локальному серверу.

Не думайте, что вы сможете видеть страницу только в Chrome, URL localhost будет работать в любом из ваших браузеров. Это расширение было очень полезно в прошлом году, так как я отвечал за создание приложения Windows, которое запускало SPA в веб-представлении, и отладка приложения внутри приложения Windows была очень сложной, но мне удалось запустить именно тот код, который был установлен в приложении через веб-сервер для Chrome.

Заключение

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

Дайте мне знать, если вы знаете какие-либо другие простые альтернативы, о которых стоит упомянуть.