やること
dockerでnginxコンテナ使ってローカルサーバー立てて静的サイトのテスト環境を作ります
説明
html/CSSのテストをするだけならローカルフォルダに置いてブラウザで開けば良いんですが、JavaScriptからファイルを読んで何かするようなサイトはローカルにファイルを置いてあると動きません。これはサイト運営側やサイトを乗っ取った攻撃者がJavaScriptを使ってユーザーPCのローカルファイルを盗み取るのに使えないようにブラウザが設計されているからですが、動かないと開発出来ないのでちょっと困ります。
対処方法としてブラウザの設定をいじってローカルファイルを読むようにするというのも紹介されていますが、これだと開発PCでうっかり攻撃サイトを踏んだらローカルファイルを盗まれ放題なので、やはりサーバーを立ててるのが良いと思います。
ローカルにサーバーを立てる方法はたくさんありますが、ここではdockerを使ってnginxサーバーを立ててみたいと思います。
1. コンテナの準備
nginxコンテナをdocker hubからダウンロードして起動します
8080番ポートにサーバーを待機します
docker run --name hogehoge -d -p 8080:80 nginx
ちゃんと動いているようです
ポートに待機させておくと後で邪魔になるのでコンテナを終了しておきます
docker stop hogehoge
2. 自作のhtmlファイルを表示する
適当なhtmlファイルをつくります。置き場所はどこでも大丈夫です。
<!DOCTYPE html>
<html>
<body>
<h1>hugahuga</h1>
<p>husahusa</p>
</body>
</html>
-vオプションでローカルフォルダをバインドマウントして、それをnginxが表示するようにしてやります。先程と同じnginxイメージを使いますが、バインドマウントしたコンテナを新たに作ってやります。
docker run --name fugafuga -v /home/html/:/usr/share/nginx/html:ro -d -p 8080:80 nginx
このやり方でやればコンテナ起動時にフォルダを指定するだけで手元の任意のフォルダのhtmlファイルを表示することができて便利です。マウントされた結果、どういうフォルダ構造になっているか調べたいときは以下でbashを開いて確認することが出来ます。
docker exec -it fugafuga bash