ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

【mac】MAMPのローカル環境でルートパスを使えるようにする方法

2017年5月10日
logo_mamp

MAMPを使うとローカルでPHPなどを仮想的に動かすことができ、サーバーにファイルをアップロードしなくてもプレビューできて便利ですが、デフォルトの状態だとルートパス「/」が使えず不便に感じることがあります。

静的なHTMLサイトであれば特に問題ありませんが、PHPやルートパス指定の「/」で弊害が出てきます。
ローカル用はパスを置換して対応することもできますが、本番アップする際に置換し直す際に事故も起きやすくなるので、MAMPでルートパスに対応する設定をしておきたいと思います。

バーチャルホストを使い、htdocsに入れたディレクトリをルート・ディレクトリにする(変更するファイル)

1
2
Applications/MAMP/conf/apache/httpd.conf
Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

スポンサードサーチ

httpd.confでバーチャルホストを有効にし、利用ポートを増やす

httpd-vhosts.conf ファイルを有効にする

httpd.conf ファイルの

XHTML
1
2
# Virtual hosts
# Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Virtual hosts の記述がある箇所までいき、

1
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

「#」を削除します。
デフォルトだとコメントアウトになっているので、シャープを削除して有効にします。

利用ポートを増やす(48行目あたり)

48行目あたりに、Listenの記述があるので、そこに下記のように追加します。

Listen 8001
を追加(複数追加可、8001は任意)
※他のアプリケーションでポート番号を使用していることもあるので確認が必要。

httpd-vhosts.confで作業中のディレクトリにポートを割り振る

ファイル一番下に VirtualHost のポート番号を追加

httpd-vhosts.conf ファイルの一番下に下記を追加します。
※ここでは仮にsampleというフォルダにしています。

1
2
3
<VirtualHost *:8001>
    DocumentRoot "/Applications/MAMP/htdocs/sample"
</VirtualHost>

以上の設定で、
http://localhost:8001/sample/ を
http://localhost:8001/
で読み込むことができるようになっているはずです。

ちなみに、MAMPインストール後の初期設定で指定したポートは添付のようになっています。

mamp_ports
【参考サイト】
http://pecoegg.com/website-145.html

関連記事

  • VirtualBoxを使ってmacに Internet Explorer (IE8,9,10,11,Edge)環境を構築する方法2017年5月28日 VirtualBoxを使ってmacに Internet Explorer (IE8,9,10,11,Edge)環境を構築する方法
  • 【mac】PC画面を録画してサイトに埋め込む方法 – QuickTimePlayer2017年10月29日 【mac】PC画面を録画してサイトに埋め込む方法 – QuickTimePlayer
  • 【mac】.gitattributes ファイルが何処にあるか分からない、を解決する方法2017年5月29日 【mac】.gitattributes ファイルが何処にあるか分からない、を解決する方法
  • 【mac】テキストエディタとブラウザを交互に操作すると入力モードが勝手に切り替わる!? そんな時の対処法2017年9月3日 【mac】テキストエディタとブラウザを交互に操作すると入力モードが勝手に切り替わる!? そんな時の対処法
  • 【mac】IPアドレスを使って他のデバイスからlocalhost内のURLにアクセスする方法2017年10月19日 【mac】IPアドレスを使って他のデバイスからlocalhost内のURLにアクセスする方法

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.