Chcę uruchomić bardzo prosty serwer HTTP. Każde żądanie GET example.com
powinno zostać index.html
doręczone, ale jako zwykła strona HTML (tj. Takie same wrażenia, jak podczas czytania normalnych stron internetowych).
Korzystając z poniższego kodu, mogę przeczytać treść index.html
. Jak mogę służyć index.html
jako zwykła strona internetowa?
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end(index);
}).listen(9615);
Jedna z poniższych sugestii jest skomplikowana i wymaga ode mnie napisania get
wiersza dla każdego pliku zasobów (CSS, JavaScript, obrazy), którego chcę użyć.
Jak mogę obsłużyć jedną stronę HTML z kilkoma obrazkami, CSS i JavaScript?
Odpowiedzi:
Najprostszy serwer Node.js to:
Teraz możesz uruchomić serwer za pomocą następujących poleceń:
Jeśli używasz NPM 5.2.0 lub nowszej wersji, możesz korzystać z niej
http-server
bez instalacjinpx
. Nie jest to zalecane do użytku w produkcji, ale jest to świetny sposób na szybkie uruchomienie serwera na localhost.Możesz także wypróbować tę opcję, która otwiera przeglądarkę internetową i włącza żądania CORS:
Aby uzyskać więcej opcji, zapoznaj się z dokumentacją w
http-server
witrynie GitHub lub uruchom:Mnóstwo innych fajnych funkcji i niewiarygodnie proste wdrożenie na NodeJitsu.
Widelce funkcji
Oczywiście możesz łatwo uzupełnić funkcje własnym widelcem. Może się okazać, że zostało to już zrobione na jednym z ponad 800 wideł tego projektu:
Serwer światła: alternatywa automatycznego odświeżania
Dobrą alternatywą
http-server
jestlight-server
. Obsługuje oglądanie plików i automatyczne odświeżanie oraz wiele innych funkcji.Dodaj do menu kontekstowego katalogu w Eksploratorze Windows
Prosty serwer REST JSON
Jeśli potrzebujesz utworzyć prosty serwer REST dla projektu prototypowego, serwer json może być tym, czego szukasz.
Auto odświeżające edytory
Większość edytorów stron internetowych i narzędzi IDE zawiera teraz serwer WWW, który będzie oglądać twoje pliki źródłowe i automatycznie odświeżać twoją stronę internetową, gdy się zmienią.
Używam Live Server z Visual Studio Code.
W open source edytor tekstu Wsporniki zawiera również NodeJS statyczny serwer WWW. Wystarczy otworzyć dowolny plik HTML w nawiasach, nacisnąć przycisk „ Podgląd na żywo ”, co spowoduje uruchomienie serwera statycznego i otwarcie przeglądarki na stronie. Przeglądarka ** automatycznie odświeży się po każdej edycji i zapisaniu pliku HTML. Jest to szczególnie przydatne podczas testowania adaptacyjnych stron internetowych. Otwórz stronę HTML w wielu przeglądarkach / rozmiarach okien / urządzeniach. Zapisz swoją stronę HTML i od razu sprawdź, czy Twoje elementy adaptacyjne działają, ponieważ wszystkie automatycznie się odświeżają.
Programiści PhoneGap
Jeśli kodujesz hybrydową aplikację mobilną , możesz być zainteresowany tym, że zespół PhoneGap zastosował tę koncepcję automatycznego odświeżania w swojej nowej aplikacji PhoneGap . Jest to ogólna aplikacja mobilna, która podczas ładowania może ładować pliki HTML5 z serwera. Jest to bardzo sprytna sztuczka, ponieważ teraz możesz pomijać powolne kroki kompilacji / wdrażania w cyklu programowania hybrydowych aplikacji mobilnych, jeśli zmieniasz pliki JS / CSS / HTML - co robisz przez większość czasu. Zapewniają również statyczny serwer WWW NodeJS (uruchamiany
phonegap serve
), który wykrywa zmiany plików.PhoneGap + Sencha Touch Developers
W dużym stopniu zaadaptowałem teraz serwer statyczny PhoneGap i aplikację dewelopera PhoneGap dla programistów Sencha Touch i jQuery Mobile. Sprawdź to na Sencha Touch Live . Obsługuje kody QR --qr i --localtunnel, który proxy twojego statycznego serwera z komputera stacjonarnego do adresu URL poza zaporą ogniową! Mnóstwo zastosowań. Ogromne przyspieszenie hybrydowych mobilnych programistów.
Cordova + Ionic Framework Developers
Lokalne funkcje serwera i automatycznego odświeżania są wstawiane do
ionic
narzędzia. Po prostu uruchomionic serve
z folderu aplikacji. Jeszcze lepiej ...ionic serve --lab
aby wyświetlać automatyczne odświeżanie obok siebie widoków na iOS i Androida.źródło
npm install live-server -g
jeśli chcesz tego samego, ale z automatycznym przeładowaniem, gdy wykryje zmianę plikuhttp-server -a localhost
Możesz użyć Connect i ServeStatic z Node.js do tego:
Zainstaluj Connect i podaj-static z NPM
Utwórz plik server.js z tą zawartością:
Uruchom z Node.js
Możesz teraz przejść do
http://localhost:8080/yourfile.html
źródło
Sprawdź tę treść . Odtwarzam go tutaj w celach informacyjnych, ale treść jest regularnie aktualizowana.
Aktualizacja
Gist obsługuje pliki css i js. Sam tego użyłem. Korzystanie z odczytu / zapisu w trybie „binarnym” nie stanowi problemu. Oznacza to po prostu, że plik nie jest interpretowany przez bibliotekę plików jako tekst i nie jest powiązany z typem treści zwróconym w odpowiedzi.
Problem z twoim kodem polega na tym, że zawsze zwracasz typ zawartości „tekst / zwykły”. Powyższy kod nie zwraca żadnego typu zawartości, ale jeśli używasz go tylko do HTML, CSS i JS, przeglądarka może wywnioskować je w porządku. Żaden typ zawartości nie jest lepszy niż niewłaściwy.
Zazwyczaj typem zawartości jest konfiguracja serwera WWW. Przykro mi, jeśli to nie rozwiąże twojego problemu, ale działało dla mnie jako prosty serwer programistyczny i pomyślałem, że może pomóc innym osobom. Jeśli potrzebujesz poprawnych typów zawartości w odpowiedzi, musisz jawnie zdefiniować je jako joeytwiddle lub użyć biblioteki takiej jak Connect, która ma sensowne wartości domyślne. Zaletą tego jest to, że jest prosty i samodzielny (bez zależności).
Ale czuję twój problem. Oto połączone rozwiązanie.
źródło
fs.exists()
teraz jest także przestarzałe. Złap błądfs.stat()
zamiast tworzyć warunek wyścigu.Nie potrzebujesz ekspresu. Nie potrzebujesz połączenia. Node.js robi NATYCHMIAST http. Wszystko, co musisz zrobić, to zwrócić plik zależny od żądania:
Bardziej pełny przykład, który zapewnia, że żądania nie mogą uzyskać dostępu do plików pod katalogiem podstawowym, i poprawnie obsługuje błędy:
źródło
node thisfile.js
. Będzie działać, nasłuchując nowych połączeń i zwracając nowe wyniki, aż albo A. zostanie zamknięty sygnałem, albo B. jakiś zwariowany błąd w jakiś sposób spowoduje zakończenie programu.Myślę, że teraz tęsknisz za tym, że wysyłasz:
Jeśli chcesz, aby przeglądarka internetowa renderowała HTML, powinieneś to zmienić na:
źródło
<style>
tagu.Krok 1 (wewnątrz wiersza polecenia [mam nadzieję, że cd do TWOJEGO FOLDERU]):
npm install express
Krok 2: Utwórz plik server.js
Pamiętaj, że powinieneś również dodać WATCHFILE (lub użyć nodemon). Powyższy kod dotyczy tylko prostego serwera połączeń.
KROK 3:
node server.js
lubnodemon server.js
Jest teraz łatwiejsza metoda, jeśli chcesz hostować prosty serwer HTTP.
npm install -g http-server
i otwórz nasz katalog i typ
http-server
https://www.npmjs.org/package/http-server
źródło
Szybki sposób:
Na swój sposób:
źródło
Zamiast zajmować się instrukcją switch, myślę, że lepiej jest wyszukać typ zawartości ze słownika:
źródło
Jest to zasadniczo zaktualizowana wersja zaakceptowanej odpowiedzi dla wersji Connect 3:
Dodałem również domyślną opcję, aby index.html był wyświetlany jako domyślny.
źródło
Nie musisz używać żadnych modułów NPM do uruchomienia prostego serwera, istnieje bardzo mała biblioteka o nazwie „ NPM Free Server ” dla Node:
50 linii kodu, wyświetla wyjście, jeśli żądasz pliku lub folderu i nadaje mu czerwony lub zielony kolor, jeśli nie zadziałało. Rozmiar mniejszy niż 1 KB (zminimalizowany).
źródło
var filename = path.join(process.cwd() + '/dist/', uri);
na serwerze z folderu dist . Wstawiam kodserver.js
i po prostu działa, gdy piszęnpm start
jeśli węzeł zainstalowany na swój komputer prawdopodobnie masz KMP, jeśli nie trzeba NodeJS rzeczy, można użyć służyć pakiet do tego:
1 - Zainstaluj pakiet na komputerze:
2 - Podaj swój folder statyczny:
Pokaże Ci, który port jest obsługiwany przez twój folder statyczny, po prostu przejdź do hosta, na przykład:
źródło
Znalazłem ciekawą bibliotekę na npm, która może ci się przydać. Nazywa się mime (
npm install mime
lub https://github.com/broofa/node-mime ) i może określać typ mime pliku. Oto przykład serwera, który napisałem przy jego użyciu:Będzie to obsługiwać każdy zwykły plik tekstowy lub obrazkowy (.html, .css, .js, .pdf, .jpg, .png, .m4a i .mp3 to przetestowane przeze mnie rozszerzenia, ale teoria powinna działać na wszystko)
Uwagi dla programistów
Oto przykład wyniku, który otrzymałem:
Zwróć uwagę na
unescape
funkcję w konstrukcji ścieżki. Ma to na celu uwzględnienie nazw plików ze spacjami i zakodowanych znaków.źródło
Edytować:
Przykładowa aplikacja Node.js Node Chat ma pożądaną funkcjonalność.
W pliku README.textfile
3. Krok jest tym, czego szukasz.
Oto server.js
Oto util.js
źródło
.readFileSync
oddzwaniania. W node.js używamy nieblokującego We / Wy. Nie polecajSync
poleceń.Robię to przede wszystkim poprzez globalną instalację statycznego serwera węzłów
następnie przejdź do katalogu zawierającego pliki HTML i uruchom serwer statyczny
static
.Przejdź do przeglądarki i wpisz
localhost:8080/"yourHtmlFile"
.źródło
Myślę, że szukasz tego. W pliku index.html po prostu wypełnij go zwykłym kodem HTML - cokolwiek chcesz na nim renderować, na przykład:
źródło
Zasadniczo kopiowanie zaakceptowanej odpowiedzi, ale unikanie tworzenia pliku js.
Uważam to za bardzo wygodne.
Aktualizacja
Od najnowszej wersji Express serw-static stał się oddzielnym oprogramowaniem pośrednim. Użyj tego do podania:
Zainstaluj
serve-static
najpierw.źródło
od w3schools
bardzo łatwo jest utworzyć serwer węzłów, który będzie obsługiwał żądany plik, i nie trzeba instalować żadnych pakietów dla niego
http: // localhost: 8080 / file.html
poda plik.html z dysku
źródło
Możesz po prostu wpisać je w swojej powłoce
Repo: https://github.com/zeit/serve .
źródło
Korzystam z poniższego kodu, aby uruchomić prosty serwer WWW, który wyświetla domyślny plik HTML, jeśli nie ma pliku wymienionego w Url.
Będzie renderować wszystkie pliki js, css i obraz, wraz z całą zawartością HTML.
Zgadzam się na stwierdzenie „ Żaden typ zawartości nie jest lepszy niż niewłaściwy ”
źródło
Nie jestem pewien, czy tego właśnie chciałeś, ale możesz spróbować zmienić:
do tego:
Spowoduje to, że klient przeglądarki wyświetli plik jako HTML zamiast zwykłego tekstu.
źródło
źródło
Content-Type
Powinno byćtext/html
, jak to jest zdefiniowane w ten sposób:Content-Type := type "/" subtype *[";" parameter]
.Nieco bardziej szczegółowa ekspresowa wersja 4.x, która zapewnia wyświetlanie katalogów, kompresję, buforowanie i rejestrowanie żądań w minimalnej liczbie wierszy
źródło
Szalona liczba skomplikowanych odpowiedzi tutaj. Jeśli nie zamierzasz przetwarzać plików / bazy danych nodeJS, a chcesz tylko wyświetlać statyczny plik HTML / CSS / JS / Images, jak sugeruje twoje pytanie, po prostu zainstaluj serwer pushstate moduł lub podobny;
Oto „jeden liner”, który utworzy i uruchomi mini-stronę. Po prostu wklej cały blok do terminala w odpowiednim katalogu.
Otwórz przeglądarkę i przejdź do http: // localhost: 3000 . Gotowy.
Serwer użyje katalogu
app
jako katalogu głównego do udostępniania plików. Aby dodać dodatkowe zasoby, po prostu umieść je w tym katalogu.źródło
npm install pushstate-server --save; touch server.js; echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './' });" > server.js; node server.js
Istnieją już świetne rozwiązania proste
nodejs server
. Jest jeszcze jedno rozwiązanie, jeśli potrzebujesz,live-reloading
gdy wprowadzasz zmiany w swoich plikach.przeglądaj katalog i rób
otworzy dla ciebie przeglądarkę z przeładowaniem na żywo.
źródło
Funkcja ekspresowa sendFile wykonuje dokładnie to, czego potrzebujesz, a ponieważ chcesz funkcjonować jako serwer sieciowy z węzła, ekspres jest naturalnym wyborem, a następnie udostępnianie plików statycznych staje się tak proste, jak:
czytaj więcej tutaj: https://expressjs.com/en/api.html#res.sendFile
Mały przykład z ekspresowym serwerem WWW dla węzła:
uruchom to i przejdź do http: // localhost: 8080
Aby rozwinąć tę funkcję i umożliwić wyświetlanie plików statycznych, takich jak css i obrazy, oto inny przykład:
więc stwórz podfolder o nazwie css, umieść w nim zawartość statyczną, a będzie on dostępny dla twojego index.html dla łatwego odniesienia, np .:
Zwróć uwagę na względną ścieżkę w href!
voila!
źródło
Większość powyższych odpowiedzi bardzo ładnie opisuje, w jaki sposób podaje się treść. Dodatkowo szukałem dodatkowej listy katalogów, aby umożliwić przeglądanie innych treści katalogu. Oto moje rozwiązanie dla dalszych czytelników:
źródło
Jest to jedno z najszybszych rozwiązań, których używam do szybkiego przeglądania stron internetowych
Od tego momentu po prostu wpisz katalog swoich plików HTML i uruchom
następnie zmień urządzenie na Nexus 7 landscape.
źródło
Prostsza wersja, z którą się spotkałem, jest następująca. Do celów edukacyjnych najlepiej jest, ponieważ nie korzysta z żadnych bibliotek abstrakcyjnych.
Teraz przejdź do przeglądarki i otwórz następujące:
Tutaj
image.jpg
powinien znajdować się ten sam katalog co ten plik. Mam nadzieję, że to komuś pomoże :)źródło
Mogę również polecić SugoiJS, jest bardzo łatwy w konfiguracji i daje możliwość szybkiego pisania i ma świetne funkcje.
Zajrzyj tutaj, aby rozpocząć: http://demo.sugoijs.com/ , dokumentacja: https://wiki.sugoijs.com/
Ma dekoratory obsługi żądań, polityki żądań i dekoratorów zasad autoryzacji.
Na przykład:
źródło
To jest bardzo łatwe z mnóstwem bibliotek prezentowanych dzisiaj. Odpowiedzi tutaj są funkcjonalne. Jeśli chcesz mieć inną wersję, aby rozpocząć szybciej i łatwiej
Oczywiście najpierw zainstaluj node.js. Później:
Tutaj treść „ https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js ” (nie musisz go pobierać, opublikowałem, aby zrozumieć, jak to działa)
źródło