1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

初学者がMAMPでPHPローカル開発環境構築した備蓄録【2021/4】

Last updated at Posted at 2021-04-23

###プロゲート等で基礎文法を学んで、次にPCにローカル開発環境構築をした人の備蓄録

↑youtuber福さんの動画が大変参考になりました。再生リストごとに内容がまとめてあるのでおすすめです。
で、今回はその中のPHPを学ばさせて頂きましたので実際に記事に残そうと思います。※動画だと後追いが難しい為

筆者環境
・MacOS Catalina 10.15.7
・PHP 7.3.11
・テキストエディタ VScode

基本、画像+画像の下に説明文の流れで書いていきます。
内容不十分なところあると思うので参考程度に!

福さんの動画を見れば一発で理解できるかと。

#前置き...MAMPってなに?
PC上にローカル開発環境一式をインストールできるツール。

略称らしい
M: Macintosh PC パソコン本体のこと
A: Apache WEBサーバーのこと
M: MySQL データベースのこと
P: PHP プログラミング言語

覚えやすいですね!

補足...Webサイトが表示される仕組みは?

WEBブラウザ
「このドメイン(https://~~~~~.com など)のページ表示してくれ!」

DNSサーバー
「ちょっとそのドメインのIPアドレス調べるわ!まってて!」
DNSの中でキャッシュサーバーだったりルートDNSだったり権威DNSサーバ...様々なサーバーを介して
やっとドメインからIPアドレス(172.16.254.1 など※これはIPv4)に変換される。
「IPアドレスはこれだったわ!!」

WEBブラウザ※chromeなど
「このIPアドレスのWEBページ表示してくれませんか?DNSさんが頑張って見つけてくれました。」

WEBサーバー※Apacheなど
「ご苦労!そのIPアドレスのページはこれじゃ!」

WEBブラウザ
「ひょ...表示された...」

こんな感じらしいです。
もっと詳しくするともっと細かい工程があるそうです。奥深いですよね。
日常生活では一瞬で表示されているだけに見えるネットがこんなにも複雑なんて。
これもネット上に良い記事たくさんあります。

##MAMPをつかえばWEBサーバー側の環境がローカルで実現できる!
ほぼインストールするだけで開発環境が整うのは素晴らしいですね。

ではインストールしていきます。
MacOSです。

#本題...MAMPのインストール

にアクセスします。

スクリーンショット_2021-04-23_10_57_36.png

MacOSなので、MAMP&MAMP PRO 6.3をクリック。
するとダウンロード開始されます。

スクリーンショット 2021-04-23 11.02.09.png

ダウンロードされたらファイルを開きます。

スクリーンショット 2021-04-23 11.02.55.png

インストール画面になるので、手順通りに進めます。
途中パスワードの入力があると思います。

スクリーンショット 2021-04-23 11.06.18.png

インストール完了すれば、アプリケーション内にMAMPがあるのでクリック。

スクリーンショット 2021-04-23 11.07.16.png

更にその中のMAMPをクリック。
※Launchpadからでもいいと思います。

スクリーンショット 2021-04-23 11.11.04.png

起動画面はこんな感じ。使うところだけ軽く説明します。

Document root= 表示したいファイルを置く場所
「Applications ▹ MAMP ▹ htdocs」つまり「htdocs」に表示したいファイルを置く場所です。

Preferences=設定
Port番号等の設定ができます。
Apacheのデフォルトは8888なので http://localhost:8888 
をブラウザで開けば「htdocs」に置いたファイルがブラウザで表示されます。

Start=サーバースタート
このボタンひとつで
Webサーバー,DBサーバーがスタートされます。

#実際に表示させていく

スクリーンショット 2021-04-23 11.25.12.png

VScode等で適当なhtmlやphpファイルを作成します。

スクリーンショット 2021-04-23 11.28.27.png  スクリーンショット 2021-04-23 11.28.55.png スクリーンショット 2021-04-23 11.29.40.png

「Applications ▹ MAMP ▹ htdocs」に表示したいファイルを格納。

スクリーンショット_2021-04-23_11_33_41.png

MAMP起動画面のStartを押します。

スクリーンショット 2021-04-23 11.35.23.png

STartStopに変わりました。サーバーが無事スタートできたようです。

スクリーンショット 2021-04-23 11.35.53.png

するとWEBブラウザにこんな画面が開かれると思います。
URLはhttp://localhost:8888/MAMP/?language=English
さっきのApacheのPort番号ですねー。

スクリーンショット_2021-04-23_11_39_21.png スクリーンショット_2021-04-23_11_39_35.png

http://localhost:8888/のうしろにhtdocsにいれたファイル名を入力すればブラウザで表示されます。

はい!ローカルでの開発環境構築ができました!!

逆にサーバーを止めるときはMAMP起動画面のStopを押せばサーバーを止められます。

最後にMAMP PROの削除方法

インストール時にMAMP PROがくっついてきたのでそれをアンインストールします。

スクリーンショット 2021-04-23 11.45.00.png

アプリケーション内にMAMP PROがあるで、右クリックパッケージの内容を表示クリック

スクリーンショット 2021-04-23 11.46.19.png スクリーンショット 2021-04-23 11.46.36.png スクリーンショット 2021-04-23 11.46.50.png

ContentsMacOSMAMP PRO Uninstallerをクリック

スクリーンショット 2021-04-23 11.47.01.png

Uninstallをクリック
※パスワード入力あります。

で、アンインストール完了です!

##以上です

RubyとRailsは参考書とか買ったりして学習していましたが、youtubeだったりでも有料級の情報が溢れているので
自分で見定めて学習していければなと思います。

そのときはバージョンとかもろもろ注意ですね。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?