Amazonチャージで1000円ゲットキャンペーン!

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

3 min 63 views

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してください。

JSお勉強中のindex.htmlが表示できました。

Udemyについて

ここで一旦CMです。

フロントエンドのプログラムに弱い僕は、プログラミングスクールに通うほどの余裕もないためUdemyで学び直しをしています。
めちゃんこおおい講座の中から自分が学びたいものを選んで受講するスタイル。
講座によっては隙間時間や聞き流しできるものもあります。
プログラミングだけではなくAIや機械学習、IoT、TOEICに至るまで幅広く受講ができます。
よくセールしているのでそういうときにまとめて購入するのもありですね。

会社の人たちにちょっと差をつけるために自由学習はどうですか?

サトシ

サトシ

Macブロガー
幼少の頃からMac中心の生活。
MacやiPhoneなどApple関連とガジェットレビュー中心に情報発信します。
あなたの身近なところをサポート

カテゴリー:
関連記事