３つの方法で簡単Webサーバ構築（ローカル環境）

# サマリ
ApacheやNginxを使わない３つ（厳密には４つ）の方法で、
ローカル環境にてWebサーバ構築をやってみました。

# 背景
ある日、ふらふらネットの波に乗っていたら、
簡単にローカル環境でWebサーバを構築する手順が紹介されていたので
自分でもやってみようと思った次第です。


https://snowsystem.net/development/web-server-simple-launch/

# ゴール
ApacheやNginxなどのいわゆるWebサーバソフトを使わない方法で
Webサーバ構築しローカル環境にてWebページを表示する

# 対象読者
- 自分（備忘のため）
- 簡易的にWebサーバ構築をしたい人

# 前提
- 必須：MacやWindowsなどのPCがあること
- 推奨：Node.js, Python, VSCodeがインストールされていること
（インストール済みが望ましいですが、必要に応じて入れていただければと思います）
- 推奨：Webサーバについて簡単なイメージが掴めていること
- 推奨：コマンドについての初歩的な理解があること
（手順に沿って実行するだけなので、特に深い理解は不要）

# 環境
- PC：Mac Book Air（２０１８年モデル）
- OS：MacOS Monterey 12.1

# 手順
繰り返しになりますが、今回は冒頭に貼り付けた以下の記事を自分でやってみよう、
というものです。
（素晴らしい記事をありがとうございます。）

https://snowsystem.net/development/web-server-simple-launch/


大きく３つ（厳密には４つ）方法があるので、それぞれやってみました。

### 手順1-1（Node:http-server）
node.jsが入っている場合は、こちらの方法が取れるみたいです。
ちなみに自分は過去に入れたのかnode.jsもnpmコマンドも入っていました。

node.js:v10.15.0
npm:6.4.1

早速http-serverをインストールしようとすると、以下のようなエラーが・・・


![スクリーンショット 2022-12-31 14.42.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/19cbabab-a6c4-a594-4894-65b0819f6b4a.png)

permission deniedになっているので、権限系のエラーみたいですね。。
ちょっと調べると以下の記事が見つかりました。

https://zenn.dev/ikeo/articles/8d0c88dcedf256b09f73

公式のページにも以下の通りの記載があり、

> since the Node installation process installs npm in a directory with local permissions and can cause permissions errors when you run npm packages globally.

（Webページからインストーラをダウンロードすると）
ローカル権限を持つディレクトリにnpmがインストールされると
パッケージをグローバルに実行しようとするときパーミッションエラーが起こる可能性があるとのことです。

記事の通り手動でnpmのデフォルトディレクトリを設定し直す方法でやろうと思ったのですが、改めて[公式のページ](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally)を覗いてみると、
nvmなどによるノードバージョンマネージャーを使ってのパッケージのインストールを**強く**お薦めする(strongly recommend)と書いてあるので、
渋々（なんでやねん）従うことにしました。


![スクリーンショット 2022-12-31 14.52.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/1aadb17c-4a4c-9003-34da-91f224d7a4d3.png)

[公式のGithubページ](https://github.com/nvm-sh/nvm)にもインストール方法は載っていますが、
こちらにも日本語でわかりやすくまとめていただいているので、参考にさせていただきました。

https://qiita.com/ffggss/items/94f1c4c5d311db2ec71a

記事の通りに実行していくと、
![スクリーンショット 2022-12-31 15.03.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/186d99d7-0b49-7924-7c3d-64c1f7e70d2a.png)


無事インストールできたっぽいです（npmのバージョンも9.2台、node.jsも18.12台にアップグレードされてますね）

記事の通りサンプルコードも作成して、問題なく"Hello, World"も表示されていること確認できました。


![スクリーンショット 2022-12-31 15.09.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/c34ed459-6bfd-51dd-08f1-31a7f0eaa4cb.png)

変なところで引っかかってしましましたが、
再度`npm install -g http-server`コマンドのトライ・・・！
問題なくhttp-serverがインストールできました。
キャプチャは割愛しますが、v14.1.1のバージョンのhttp-serverがインストールされました。

ちなみに、インストール時にfundingの文言があったので何かと思いましたが、
資金提供を呼びかけるURLが含まれている場合に表示されるみたいですね。


![スクリーンショット 2022-12-31 15.12.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/6100da43-6f14-485d-9bdd-de008c1f7e75.png)

https://motamemo.com/nodejs/nodejs-tips/nodejs-npm-fund/

特に提供予定もないのでスルーしました。（すみません）

`http-server`コマンドを打ちます。
以下のような結果が表示されました。

![スクリーンショット 2022-12-31 15.19.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/3212a3e8-2712-d256-45ce-5869927a78b7.png)

あとは[元記事](https://snowsystem.net/development/web-server-simple-launch/)の手順通りですが1点注意点で、
参考にした元記事では`http://127.0.0.1:8000`か`http://localhost:8000`と記載があるのですが、上で貼り付けたキャプチャ通り、ポートは**8080**が利用可能だよと書いてあるので、
`http://127.0.0.1:8080`か`http://192.168.0.5:8080`にアクセスすればいけました。
（もちろん、IPアドレス部分をlocalhostにしてもいけました）
コマンド実行した結果をよくみて注意しましょう・・・！

![スクリーンショット 2022-12-31 15.25.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/265f8e75-1665-061b-0937-35790ea4321e.png)

というわけで、思わぬところで引っかかりましたが、無事成功です！

終了の仕方は、`http-server`コマンド実行時にも書いていますが、
`ctrl+c`でできます。

### 手順1-2(Node:serve)
続いては、`npx serve`コマンドを打って、ローカルへのインストールなくサーバ構築する方法です。

早速コマンド実行。
すると、以下のメッセージが。

![スクリーンショット 2022-12-31 15.32.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/92925f91-ec8d-84bb-2dc5-c6d17e0b2bf7.png)

え、パッケージのインストールいるんかい！
と思いましたが、後々`npm ls -g`でインストール済みのパッケージ一覧表示しても、
http-serverは入っていますが、serveは入っていないので、確かにインストール不要で進められてはいるのかなと思いました。（違ったら申し訳ありません。。）

![スクリーンショット 2022-12-31 16.54.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/627917d9-72b1-67ed-2ca4-b03219bfe5d4.png)


自分の勉強が不足しているためこれはこれで調査をしたほうがいいかと思いますが、
問題なくserveコマンド実行できるようになったのと時間の都合上今回これ以上深掘りはしないことにしました。
（申し訳ありません）

ということで引き続き・・・
Ok to proceed? (y)に対してyで返してあげると、

![スクリーンショット 2022-12-31 15.34.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/7200125b-f36c-c4b0-86c1-755c1c759f4b.png)


キャプチャの通り、ポート3000番台でいける、とのことなので、
`http://localhost:3000`でアクセスしたら問題なく画面表示できました！
（わーい）

![スクリーンショット 2022-12-31 15.35.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/54209b60-e938-1fdf-0836-82496fc313f4.png)

終了する方法は先ほど同様`ctrl+c`です。


### 手順２（Python）
続いて、pythonが入っている場合のやり方です。
自分の環境ではpython3の3.9.0が入っていました。


ではコマンド実行。
（ちなみに、元記事では-mオプションが付いていますが、こちらはPythonのモジュールやパッケージを実行するときに[使うものらしい](https://yumarublog.com/python/python-m/#:~:text=%E7%92%B0%E5%A2%83%20%E2%80%94%20Python%20%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88-,%2Dm%20%E3%81%AE%E6%84%8F%E5%91%B3,%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A7%E3%81%99%E3%80%82&text=%E4%B8%8A%E8%A8%98%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E5%AE%9F%E8%A1%8C,%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%A8%E3%81%97%E3%81%A6%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%BE%E3%81%99%E3%80%82)です。
勉強になりました。。）

今回は8000番ポートを指定。
![スクリーンショット 2022-12-31 15.49.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/74a8965f-42c5-80ce-2196-78bb847a1041.png)

無事画面表示できました！


![スクリーンショット 2022-12-31 15.53.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/e3d68f76-00cc-82a5-ea5b-9e0728323ff7.png)

終了する方法は今まで同様`ctrl+c`です。

### 手順３（VSCode）

VSCodeの拡張機能を使う方法です。

![スクリーンショット 2022-12-31 15.55.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/a02234e6-3c8b-96d3-a362-1edaf42768c1.png)

画面左にあるこの一番下の変なマーク（失礼）ですね。

Liveと打っただけでもう一番上に来ていますね。
(自分は日本語で表示されるようにしているので、環境によっては少し画面表示は異なるかもしれません)
![スクリーンショット 2022-12-31 15.56.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/69983764-fd5a-0158-bf5c-1fa34f15cc16.png)



デフォルトではEdgeで表示されるみたいなので、chromeに変更しました。

![スクリーンショット 2022-12-31 16.01.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/bee40ee9-7f34-c1e8-ee9b-877f4434d596.png)


そしていざ実行しようとするも、右下に表示されるはずのGo Liveが出ない・・・
なぜか調べると、表示したいファイルを直接開くと出ないということがわかりました。
（=フォルダを開く必要がある）

https://jyu2log.com/vscode-liveserver-nodisp

ファイル->開く->ファイルがある**フォルダ**を選択
すると、右下に出ました！
（わーい）

![スクリーンショット 2022-12-31 16.07.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/a5312c14-3eb9-eaf9-8773-fd01a34479af.png)

Go Liveをクリックすると、自動でポート5500番台でchromeで表示してくれました。

![スクリーンショット 2022-12-31 16.09.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/a9088a9e-88f0-6816-184a-f789aedbfda9.png)

調べる中で判明したのですが、なんとこのLive Server、
Liveと名のついている通りリアルタイムでhtmlファイルの更新内容を反映してくれるみたいです。
（無知すぎて知りませんでした）
自分でページの更新をせずとも、ファイルを更新したら勝手に画面に反映されていました、便利すぎる・・・

終了の仕方は、VSCode画面右下にある「Port 5500」をクリックすればOKです。

![スクリーンショット 2022-12-31 16.12.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/85bdac66-e8f1-b107-0c2b-91821e7ac55b.png)


# 結果
それぞれ問題なくWebページの表示ができました！
（よ、よかった〜）
それぞれ試しにやっただけで実際がっつり使ったわけではないですが、
個人的にはVSCodeが便利そうな感じがしました。

# まとめ
HTMLの画面を見るだけであればブラウザに貼り付けるだけでもいけることは知っていましたが、
いざWebサーバたてて・・・となるとApacheかNginxをインストールする方法しか知らなかったのでめちゃくちゃ勉強になりました。
フロント系の技術は普段使うことがないので、こうやって興味のあること・できそうなことから少しずつ食らいついていきたいと思います。。
今後はngrokなど（やり方はいくらでもあると思いますが）でローカル環境を外部に公開すれば、
簡単環境で外部公開も可能かと思うのでやってみたいと思います（実運用というよりは開発環境としてお試しで使うような形になるかと思いますが）