初めに
普段HTML(Markdown)をプレビューするとき、VSCodeの拡張機能を利用している。
他の方法(Pythonnなど)でのプレビューと違いがあるか気になったので調べた。
Live Serve
VSCodeの拡張機能であるLive Serverを用いる方法。
インストール後、右下のShow Previewをクリックすることで、VSCodeがローカルサーバーを開き127.0.0.1上でプレビューされる。
特徴
- 自動リロード
- ディレクトリごとサーバー化
Python
標準ライブラリを用いてプレビューできる。
ただファイルを開きたいだけの時に便利かも。
import webbrowser
import os
# HTMLファイルのパスを指定
file_path = 'your_file.html'
full_path = 'file://' + os.path.realpath(file_path)
webbrowser.open(full_path)
特徴
- サーバ-がない
- CORSやパスの挙動確認には不向き
Docker
今回はnginxを使ってプレビューする。
docker run -it --rm -p 8080:80 \
-v $(pwd):/usr/share/nginx/html \
nginx
特徴
- 本番に近い Web サーバー環境 で確認できる
- nginx の挙動も含めてテスト可能
ブラウザ
最もシンプルで原始的な方法：
HTML をダブルクリックしてブラウザで開く。
特徴
- ローカルの
file://スキームで開く - セキュリティ制約で
JSが動かない場合あり - CORS 関連の動作チェックには不向き
まとめ
| 方法 | 仕組み | 自動リロード | サーバー挙動 | 難易度 |
|---|---|---|---|---|
| Live Server | VSCode がローカルサーバー | ◯ | ◯ | 低 |
| Python | ブラウザでローカルファイルを開く | ✕ | ✕ | 低 |
| Docker | nginx など本番用サーバーを用意 | △ | ◎ | 高 |
| ブラウザ直接 | ダブルクリック | ✕ | ✕ | 最低 |
終わりに
Live Serverがお手軽かな
~Thank you for reading~