はじめに

こんにちは、エンジニアの遠藤です。

静的コンテンツを作った（もしくは作ってもらった）けど、 index.html をそのままブラウザで開くと、なんか表示がおかしい、といったことはないですか？（私は良くある。）
例えば、内部のリンクのパスが絶対パスで書かれていたりすると、

<link rel="stylesheet" href="/style.css">

Chromeだと file:///style.css にアクセスしにいってしまい、上手く参照できなかったり。

<!--#include virtual=~ -->

なんて書かれていたりして、あれ、表示されない！みたいなケースもありますよね。（ない？）

ちょっと動きを確認したり、cssの調整をしたいだけなのに、パスを全部書き換えて、includeしてるところを全部置換して...なんてやってられない！
と、困った時は、ローカルにサーバを立ててしまうのがおすすめです。

手順

環境

OS macOS Catalina

Catalina...? 今どき Catalina かよ！ という盛大なツッコミを受けてしまったので、 弊社の優秀な若手社員が、 macOS Big Sur でも検証したよっていう アンサーソングを書いてくれることを期待していたり。。

表示したいファイルを以下のディレクトリに置く

/Library/WebServer/Documents/

$ sudo cp -rf your-directory/* /Library/WebServer/Documents/

Apacheを起動する

$ sudo apachectl start

ブラウザでアクセスして動作確認

http://localhost:80

Apacheを止める

$ sudo apachectl stop

以上です。簡単ですね。
と思ったら、pythonとかphpとかnodeの方が圧倒的に簡単でした。（後述）

設定変更

以下設定ファイルを書き換えると、挙動を変えることが可能です。
いくつか代表的な設定を見ておきます。

/etc/apache2/httpd.conf

何かあったら怖いので、変更前にバックアップは取りましょう。

$ sudo cp /etc/apache2/httpd.conf /etc/apache2/httpd.conf.bk

ポートを変更するには

Listen 80 の部分を変更すると反映されます。

/etc/apache2/httpd.conf

<IfDefine SERVER_APP_HAS_DEFAULT_PORTS>
    Listen 8080
</IfDefine>
<IfDefine !SERVER_APP_HAS_DEFAULT_PORTS>
    Listen 80 # ← こっちを修正する
</IfDefine>

（余談）
IfDefine の部分ですが、

Define SERVER_APP_HAS_DEFAULT_PORTS # ←追加する
<IfDefine SERVER_APP_HAS_DEFAULT_PORTS>
    Listen 8080 # ← こっちが有効になる
</IfDefine>
<IfDefine !SERVER_APP_HAS_DEFAULT_PORTS>
    Listen 80
</IfDefine>

などと書くと、 Listen 8080 が有効になりました。
昔は存在していなかった定義のようで、調べてみても全然情報が出てきませんでした。
きっと何かに使えるのでしょう。

ドキュメントルートを変更するには

以下設定ファイルのDocumentRootを変更すれば変わります。

/etc/apache2/httpd.conf

・・・
DocumentRoot "/Library/WebServer/Documents"
<Directory "/Library/WebServer/Documents">
・・・

ただし、ドキュメントルートまでの全てのディレクトリに実行権限を付けないと、 403 になってしまいます。

例えば、ドキュメントルートを /var/www に設定した場合、以下が設定されている必要があります。

$ sudo chmod o+x /var
$ sudo chmod o+x /var/www

Apacheの再起動

設定を変更した際は再起動が必要になります。

$ sudo apachectl restart

個人的にはApacheの挙動を知っておくと、色々と勉強になると思っているので
今後Webサーバとかも勉強したいなーという方は、Apacheの設定をいじり倒すと楽しいかもしれません。
（というかMacに標準でApacheが入っていることを知らなかった。）

参考

以下のモジュールのどれかが、インストール済みの場合、Apacheよりも手順が簡単です。
いずれも、ポート 8080 で起動します。
http://localhost:8080

python 2系

$ cd yourdirectory
$ python -m SimpleHTTPServer 8080

python 3系

$ cd yourdirectory
$ python -m http.server 8080

php

$ cd yourdirectory
$ php -S localhost:8080

ruby

$ cd yourdirectory
$ ruby -run -e httpd ./ -p 8080

node

$ cd yourdirectory
$ npm install -g http-server
$ http-server .