При разработке приложений, обучении использованию библиотеки или просто быстрому тестированию вы можете столкнуться с необходимостью разместить свои файлы на «статическом» сервере - это означает, что вам просто нужен 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.
Заключение
Как видите, есть несколько способов запустить локальный статический сервер, и вам, скорее всего, не потребуется ничего устанавливать на машину. Какой из них вы выберете, будет зависеть от того, нужно ли вам что-то немного отличное от простого обслуживания статических файлов, и есть ли у конкретного модуля дополнительные параметры для этого или нет.
Дайте мне знать, если вы знаете какие-либо другие простые альтернативы, о которых стоит упомянуть.