MacでWebサーバーを起動する簡単な方法（Apache）

javascriptの勉強をしていてローカルのhtmlからjsファイルをインポートする際にエラーが出てしまいました。
どうやらwebサーバー上でないとCORSエラーが発生してimportしたファイルがみえないエラーが出てしまいます。

Uncaught SyntaxError: Cannot use import statement outside a module

なのでMacについている標準のWebサーバー（Apache)を起動できないか試行錯誤したので記録します。

もっと簡単なのはMAMPというソフトを入れることです。
PHPで開発している人には馴染み深い統合環境ですよね。難しいことをしたくない方はこちらをインストールしてみてください。

MAMPについてはまた別の機会に。

Mac標準のApacheを確認する

まず私の僕のMac環境ですが、macBook Pro 2017モデル
OSは11.5です。

Apacheはどうやら2.4.46というバージョンが既に入っているようです。
MAMPをインストールすると、標準のものとMAMPのものと二重になるのがモヤっていたので今回はこちらの標準サーバーを使ってみるテストです。

MacのApacheを起動

何も考えずにApacheを起動してみましょう。

sudo apachectl start

次にWebブラウザで「http://localhost/」を打ち込んでアクセスします。

なにやら表示されました。
どうやら、/Library/WebServer/Documents/index.html.en　が表示されてるみたい。
ここは権限がないと使いづらいので、ユーザーディレクトリを設定します。

Apacheのユーザーディレクトリの設定

/etc/apache2/httpd.conf　を設定します。

sudo vi /etc/apache2/httpd.conf

sudo権限で開いてください。

#LoadModule userdir_module libexec/apache2/mod_userdir.so

#Include /private/etc/apache2/extra/httpd-userdir.conf

上記二行をさがしてそれぞれ#を外してください。
コメントが解除されて有効化されます。

つづいてhttpd-userdir.confを編集します。

sudo vi /etc/apache2/extra/httpd-userdir.conf

開いたら、以下の行を有効化します。

Include /private/etc/apache2/users/*.conf

設定はもうちょっとです。
次にユーザ用のconfファイルを作ります。

sudo vi /etc/apache2/users/[ユーザ名].conf

以下をコピペしてください。（ユーザー名はご自身のものに変更してください。

<Directory "/Users/[ユーザ名]/Sites/">
    AllowOverride All
    Options Indexes MultiViews
    Options +FollowSymLinks
    Require all granted
</Directory>

Apacheのその他の操作

サーバーをストップさせるには

sudo apachectl stop

再起動をするには

sudo apachectl restart

HTMLを表示する

それでは先程作成したSitesディレクトリに適当なHTMLをおいて表示を確認しましょう。
僕の場合はちょうどUdemyで学習中のJS関連のものを置いて確認しました。
HTMLをおいたら先程のコマンドでapacheをrestartしてください。