前提（今までの振り返りと、設定への希望）

自分のPCだけで作業するローカルでパーソナルな環境です。

ローカル環境について

今まで、windows/xampp環境１つの中に全プロジェクトを入れてました。
（サーバー設定やデータベースをいじることがなかったので、大丈夫だったのです。）

- xampp　-　htdocs
    └ myProject1
    └ myProject2
    └ myProject3

で、おうちPCをmacに買い換えたついでに、片耳になんとなく聞いたことがある気がするvagrantを入れてみようとなりました。

エディタ環境について

html + sass + js（＋フレームワーク）を主に使います。
（※だったらサーバーいらなくないか？と思うのですが、jsのフレームワークの都合上、欲しいのです。）

今までは[sublime textでエディット→preprosで自動コンパイル]の流れでした。が、sublime textだけでいけるはず。
windows→macになったことにより、rubyをインストールするハードルが無くなったので、その設定もすることにしましょう。

アップロード環境について

今まで、xamppのhtdocs内のファイルを直にsublimeのプロジェクトに突っ込んでいたので、macで環境作った後に、そういったお触りができないことに、おののいてしまいました。

サーバー環境(localhost)構築にやったこと

基本的に、ドットインストールを見ながらやったのですが、以下は頭の整理含めてメモメモ。

VirtualBox と　vagrant　をインストール

・インストール元
[VirtualBox]https://www.virtualbox.org/
[Vagrant]https://www.vagrantup.com/

複数の仮想マシンを作るためのディレクトリを作る

ざっくり言うと、vagrant動かすための場所はここだよ、と言うディレクトリを作る。
↓の構成にしました。

- [user]
    └ myVagrant  //仮想マシンを動かす場所

プロジェクト/サイト用のディレクトリを作る

以前の環境では、1つの仮想マシンにいろんなプロジェクトをぶっこんでましたが、それぞれのプロジェクト用の仮想マシンを立てることができるように、それぞれのプロジェクト用の場所を作ります。

まずは、お試し用に[myCentOS]を作成。

- [user]
    └ myVagrant  //仮想マシンの場所
        └ myCentOS

サーバーの設定

vagrantfileの作成

[user]/myVagrant/myCentOS （先ほど作成したディレクトリ）に移動して

$ vagrant init bento/centos-6.8

IPアドレスを設定（192.168.33.10の場合）

先ほどできた[vagrantfile]の記述を変更

テキストエディタで

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

もしくは、ターミナルで

sed -i '' -e 's/# config.vm.network "private_network", ip: "192.168.33.10"/config.vm.network "private_network", ip: "192.168.33.10"/' Vagrantfile

仮想マシン起動、セットアップ。

ドットインストールそのままですが...

$ vagrant up

↑いろいろインストールされます。時間かかります。

$ vagrant ssh

※以下は、[vagrant@~]でコマンド入力。

sudo yum -y update

↑続：時間かかります。

sudo yum -y install git

git clone https://github.com/dotinstallres/centos6.git

cd centos6

./run.sh

↑続：時間かかります。

exec $SHELL -l

エディタ構築環境でやったこと

sublime text 3を使います。

なにはともあれインストール＆下準備

▼インストール元
https://www.sublimetext.com/

▼パッケージコントロール有効化
こちらにあるコードをコンソールにコピペ。
https://packagecontrol.io/installation

パッケージのインストール

いろいろ必要なパッケージをインストールしていくわけですが、
SCSSのコンパイル＆その自動化についてのみ記載。

インストールするパッケージ
- SASS Build
- Compass
- SublimeOnSaveBuild

compassの設定ファイルの設置

多分コマンドでいけるのですが、今回はお手製で。
サイトパス（homeなindex.htmlの場所）に「config.rb」を作成。

http_path = "/"   //config.rbから見たサイトのパス
css_dir = "css"   //cssファイルを書き出す場所
sass_dir = "scss"   //scssファイルを置く場所
images_dir = "/"   //画像ファイルを置く場所
javascripts_dir = "js"   //JavaScriptファイルを置く場所
output_style = :expanded   //cssへの書き出し設定。以下4種類のどれかを設定

　　　　　　　　:expanded　→　{}で改行。cssをベタで書くときの感じ。
　　　　　　　　:nested　→　scssのネストを引き継いだ形。
　　　　　　　　:compact　→　セレクタと属性を1行にまとめて出力。
　　　　　　　　:compressed　→　圧縮して出力

line_comments = false   //cssにscssでの行番号を出力するかどうか(true/false)

参照：https://wp-d.org/2013/01/03/1732/

これで自動化OK...のはずがしかし！！！？？？

なぜか、scssファイルと同じディレクトリにcssができあがってくる。

なぜなんだ〜〜〜

と思ったら、sublime textの「メニュー→ツール→ビルドシステム」がsassになってました。
こちらをcompassに変更すると、思っている通りcssフォルダ内にできました。

めでたしめでたし。

サイトをブラウザで見たい

取り急ぎ、index.htmlなど作れるようになったのですが、まだブラウザでは（サーバーを通して）見れません。

ターミナルに持ち替えて

ー上記の作業のまま、[vagrant@~]
仮想マシン(作業するvagrant)設置場所に移動

$ cd myVagrant/myCentOS
(※今いる場所と、行きたい場所に応じて、内容は変更)

$ vagrant up
$ vagrant ssh

※おまけ：終了コマンド

(※[vagrant@~]で)
exit

vagrant suspend

webサーバーの起動

※vagrantログインで
php -S 192.168.33.10:8000
(※IPはvagrantfileで設定したもの)

※おまけ：終了コマンド

ctrl + C

これで、ブラウザのアドレスに「192.168.33.10:8000」と入れると、サーバー経由で見れるようになりました。

※ファイル入れてないじゃん、って言うツッコミは、↓で解決。

ファイルの同期

さて、このままでは、いちいち「ファイルを作る→アップロード→アクセス→確認」
となって、どんなにとりつくろってもメンドクサイです。

config.vm.synced_folderの設定

「vagrantfile」の中に↑の項目がありました。
こちらを設定すると、ローカルのファイルと仮想マシンのファイルに同期が取れるとのことで、早速設定です。

macPCのディレクトリ構成は↓にしようと思います。

- [user]
    └ myVagrant  //仮想マシンの場所
        └ myCentOS
        └ projectA
    └ mySites  //サイト構築ファイル設置場所
        └ myCentOS
        └ projectA

設定の箇所の書き方は↓

config.vm.synced_folder "host_path", "guest_path", options...

パスの書き方は、[vagrantfile]から見た相対位置。
※理解が追いつかないのと、個人でやってるパーソナルな構築なのもあり、オプションについては一旦無視します。

myVagrant/myCentOS/vagrantfile
に記載をするので、こうなりますかね↓

config.vm.synced_folder "../../mySites/MyCentOS", "/home/vagrant"

参照：https://qiita.com/tbpgr/items/67125ea883409ae5fd51

さて、

$ vagrant reload

$ vagrant ssh

・・・ちょっと思うのところがあるのですが、後述(その１)とすることにしまして・・・。

ブラウザで「192.168.33.10:8000」→思っているindex.htmlを見ることができました！

・試しに...

--mySitesフォルダ側を編集→ブラウザリロード

→変更されてます！

--複数の同期設定をしたい

↓のように、列挙すれば良いようです。

config.vm.synced_folder "同期箇所A", "同期マシンA"
config.vm.synced_folder "同期箇所B", "同期マシンA", オプションA
config.vm.synced_folder "同期箇所B", "同期マシンA", オプションB

こんなことしてみました。（本編とは関係ありません。）

- [user]
    └ myVagrant  //仮想マシンの場所
        └ Vagrantfile
        └ myCentOS
        └ testSite
    └ Documents  //俗に言う「書類」
        └ testFolder

 config.vm.synced_folder "../Documents/testFolder", "/home/vagrant/testFolder"
 config.vm.synced_folder "./", "/home/vagrant"

- /home/vagrant
    └ Vagrantfile
    └ myCentOS
    └ testSite
    └ testFolder

- [user]
    └ myVagrant  //仮想マシンの場所
        └ Vagrantfile
        └ myCentOS
        └ testSite
        └ testFolder ← なんかできてる！（中身は空）
    └ Documents  //俗に言う「書類」
        └ testFolder

後述。ーこれから解決したい疑問

後述(その１)ファイル同期に伴って。

最初設定した時

vagrantログアウトせず(?ちょっと定かじゃない。。。)、色々設定して見て、同期されてるの確認
↓
その日の作業終了＆OSアップロードとか、FTP系使わなくなって捨てたりとか
↓
次の日PC起動/vagrat 起動（vagrant ssh）
↓
パスワードきかれる
↓
パニックを起こす

をやらかしました。
改めて一気通貫、全然別のフォルダ作って見たところ、やはり同期設定をしたところでパスワード聞かれるようになったので、それが原因のようです。
パスワード、聞かれるの無くせるのでしょうかね〜？？
とりま、こまごまと入力し無くてはいけない訳ではないので、良いのですが。

言い訳

色々、やって見てはエラー出したり、うまく行かなくて、、な箇所をちょこちょこ直しながらやったので、この通りにやるとうまくいくのか自信がない箇所があります。
が、自分の忘備録として暖かい目で読んでいただけると幸いです。
雑筆にて失礼しました！