0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

http-serverで静的ファイル用のローカルサーバーを立てたい

Last updated at Posted at 2025-02-28

目的

復習システムを作成するために、忘却曲線に基づいて復習するものリストを表示するページを簡単に作りました。DBとかバックエンドを実装する時間(というか力)はなく、cookieでデータを保存しようと考えたので、ローカルサーバーを立ててる必要があったのですが、GPTに言われるがままに訳も分からず行ったので、後から調べている次第です。

必要な用語

1. HTTPサーバー(Webサーバー)とは?

HTTPサーバーは、ウェブサイトのファイル(HTML、CSS、画像など)をインターネットを通じて他の人に届けるコンピュータのことです。
例えば、作ったHTMLファイルをブラウザで見るためには、サーバーというコンピュータがそのファイルを「ここにありますよ!」と教えてくれなければなりません。

Webサーバーは、ファイルをインターネットを通じて提供するコンピュータです。
自分のPCでウェブサイトを試したいとき、「自分のPCでサーバーを立てる」ことで、インターネットを通じてウェブサイトを動かすことができます。

2. Node.jsのモジュールとは?

Node.jsは、JavaScriptを使ってサーバーサイドのプログラムを動かすための環境です。
モジュールは、Node.jsの中で使える「便利な機能の集まり」で、いろんなことを簡単にできるようにしてくれます。
http-serverは、Node.jsのモジュールの一つで、指定したフォルダ内のファイルを簡単にサーバーとして配信できるツールです。

やったこと

3. サーバーの立て方

npx http-server

コマンドの説明

このコマンドは、ローカルサーバーを立てるためのコマンドです。
npxは、Node.jsのツールを一時的に使いたいときに便利なコマンドです。
http-serverは、簡易的にファイルを配信するサーバーを立てるツールです。これを使うと、ファイルを簡単に配信できるサーバーが立ちます。

ポート番号の指定(-pオプション)

http-serverは、デフォルトでポート番号8080を使いますが、-p 8081と指定することで、8081番のポートを使うことができます。
ポート番号は、サーバーが動作する場所を示していて、8080や8081などの番号を使って、ネットワーク上でアクセスできる場所を指定します。

用語解説

静的ファイル

静的ファイルとは、内容が変わらない、ただのファイル(例えばHTMLファイルや画像ファイル)のことです。
サーバーはこれらのファイルをそのまま配信します。

クッキー

クッキーは、ウェブサイトでユーザーの情報を保存しておく仕組みです。
例えば、ログイン情報やサイト設定を保存するために使われます。

まとめ

  • HTTPサーバーは、インターネットで他の人にファイルを渡す役割を果たすコンピュータのこと。
  • Node.jsは、JavaScriptを使ってサーバーを動かす環境で、その中の便利な「モジュール」としてhttp-serverがあります。
  • npx http-serverコマンドで、ローカルのPCにサーバーを立てて、HTMLや画像ファイルを配信できるようにしました。
  • ポート番号で、サーバーの通信場所を指定できます。

このように、ローカルサーバーを立てることで、サイトのデータをクッキーに保存し、ブラウザで簡単にテストすることができました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?