LoginSignup
0
4

More than 5 years have passed since last update.

超初心者がWindows10でphpのローカル開発環境を構築したときのまとめ

Last updated at Posted at 2017-08-15

タイトルの通り、超初心者がWindows10でphpのローカル開発環境を構築した際のまとめを書いてみた。

素人のメモなので、
明らかな誤りや、「こうしたほうがいいよ!」ということがあれば、
教えていただけるとうれしいです。

環境

Windows10Home 64bit
Creators Update(バージョン1703、ビルド15063)適用済

やりたかったこと

  • ローカルでphpを動かしたい。
  • ローカルで開発したものをGithubに置きたい。 (Cloud9で作ったものをGithub経由でcloneしてローカルで同期を取りたい) (初心者なのでぶっちゃけCloud9で十分なんだけど、ブラウザ上だと画面がせまいのが気になった。)
  • 作業場所は、Dドライブ上に置きたい
  • (Vagrantとか使ってみたい)

ディレクトリ構成について

参考にしたサイト

Windows7 搭載マシンを買ってきてやったことまとめ - IT戦記
http://d.hatena.ne.jp/amachang/20111226/1324874731

上記を参考に下記のような感じで、まずドライブごとの用途を決める
C:\ (OS・インストーラ付アプリ・ユーザーフォルダ)
D:\ (インストーラの無いアプリ・仕事で使うファイル等)
E:\ (動画等、趣味でつかうファイル等)

特に、ポイントになるDドライブの構成はこんな感じ
D:\
- 00inbox:デスクトップフォルダとして使用
- Apps:インストーラの無いアプリや設定ファイル等の置き場所
- Dev:システム開発時の作業フォルダ
- Projects:仕事のドキュメント等の管理フォルダ

で、D:\DevをGitHubに同期したり、仮想環境の共有フォルダに設定するのが思ったより手間だったので、
(検索力の低い)自分の備忘録がてら、まとまった情報を記述しておきたい
というのが本エントリでやりたいことです。
前置きおわりっ。

VirtualBoxとVagrantを使って仮想環境を構築する

参考にしたサイト

ローカル開発環境の構築 Windows編
http://dotinstall.com/lessons/basic_localdev_win_v2

こんなの動画付きで解説してもらえるなんて、とってもいい時代。

作業の概要

  • VirtualBoxをインストールする
  • Vagrantをインストールする
  • 仮想環境を作成する
  • (Puttyをインストール)
  • 仮想環境上にアプリケーションを入れる
  • (Cyberduckをインストール)
  • フォルダ共有設定する

実際の作業

VirtualBoxをインストールする

Oracle VM VirtualBox - Downloads | Oracle Technology Network | Oracle
http://www.oracle.com/technetwork/server-storage/virtualbox/downloads/index.html?ssSourceSiteId=otnjp

ここからインストーラーを入手。
現在は32bitも64bitも同じインストーラーなのかな。

インストールは、インストーラーに沿っていくだけなので割愛。

インストールが完了したら、デフォルトの仮想マシンフォルダをD:\Dev上に変更しておく。

VirtualBox>設定

Vagrantをインストールする

ここで少しハマった。
なんかエラーが出て先に進めなくなった。

直接の原因じゃないかもだけど、
ひとつ前のバージョンの1.9.6をインストールしたらうまく動いた。
(2017/8現在の最新は、1.9.7)

参考にしたサイト

[メモ]Windows7にvagrant 1.9.7 を入れても反応しなかった - Qiita >http://qiita.com/wakamidori/items/a04f8fabf70e5279a77a

わりと最近の記事で情報があったので助かった。
これがなければ、今でもまだ詰まっていたかもしれない。

Vagrant v1.9.6 Binaries | HashiCorp Releases >https://releases.hashicorp.com/vagrant/1.9.6/

あとは、Dドライブで動かしたかったので、Windowsの環境変数を追加。(Cortanaから「環境変数」で検索すると表示される)

ユーザー環境変数
変数名:VAGRANT_HOME
変数値:D:\Dev\vagrant_home
参考にしたサイト

WindowsでVagrant環境を作ろう!容量足りない場合は作業フォルダ変更で対応 | サイト構築日記
http://memories.zal.jp/WP/blog/20160214_2707.html

仮想環境を作成する

ここまできたら、
D:\Dev以下を指定して、仮想マシン設定用のVagrantfileを作れば良い。

が、ここで問題発生

WindowsPowerShellについて

ん?ホームディレクトリがC:\Users\user ってなってるけどどうやってDドライブ上のフォルダを指定するんだろう。。。ってなった。

d: 

上記コマンドで解決した。(cd d:ではない)

参考にしたサイト

cdコマンドでDドライブへ移動 | Remember TheTime
http://www.remember-the-time.xyz/2016/01/cd-d-drive-move.html

vagrant init

ここで改めて下記コマンド。

PS D:\dev\test> vagrant init bento/centos-6.8

無事Vagrantfileが生成された。

仮想マシンのIPアドレス設定

Vagrantfile上の下記のコメントアウトを外す。

  config.vm.network "private_network", ip: "192.168.33.10"

これで準備OK

Puttyをインストール

ドットインストールの講座に従い、Puttyをインストールする

PuTTY: a free SSH and Telnet client
https://www.chiark.greenend.org.uk/~sgtatham/putty/

~ macならターミナル上でいじれば済むのに。。。 ~

仮想環境上にアプリケーションを入れる

08 仮想マシンの設定をしよう | ローカル開発環境の構築 [Windows編]
http://dotinstall.com/lessons/basic_localdev_win_v2/38608

上記の動画の通りに実行
これで一通りのアプリが入る。(至れり尽くせりで感謝しかない)
今度は自力でLaravelを入れるところまでできるようになりたい。

Cyberduckをインストール

ドットインストールの講座に従い、Cyberduckをインストールする。
UIがFFFTPよりおされ。

Cyberduck | Libre FTP, SFTP, WebDAV, S3, Backblaze B2 & OpenStack Swift browser for Mac and Windows
https://cyberduck.io/index.ja.html?l=ja

Cyberduckの外部エディタ設定
編集>環境設定>ブラウザ>一般

'.'で始まるファイルを表示
ダブルクリックしたファイルを外部エディタで開く

上記にチェックを入れる。

編集>環境設定>外部エディタ

Atomを選択する。
あ、申し遅れましたがAtomを使ってます。

フォルダ共有設定

Vagrantfileを修正すれば良いはずだけど、なんかうまく動かず苦戦した。

  config.vm.synced_folder "./test", "/home/vagrant/test", owner: "vagrant", group: "vagrant"

Vagrantfile上のファイルは上記のようにした。
どちらというと、Vagrantfileと同じ場所に共有フォルダを置くために
ここまでやってきた作業が大変だった。

参考にしたサイト

Vagrantで共有フォルダを設定してみる - Qiita
http://qiita.com/okoi/items/8fbf87772217c1b1ffb7

できたー!

まとめ

まとめるとあっさりだけど、ちょいちょい中断とハマりを繰り返しながら
2日がかりで環境構築ができた。
(vagrant使っても、筋の悪い初心者だとこのくらいかかるんだよ)

インターネット上の善意に感謝しつつ、次のステップに進みたい。

0
4
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
0
4