scss
MacOSX
localhost
vagrant
SublimeText3

環境構築さっぱりなフロントデザイン/エンジニアがmacに乗り換えたついでに制作環境を作ったときにやったこと[vagrant/sublime]

More than 1 year has passed since last update.

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

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

ローカル環境について

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

ディレクトリ
- 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]の記述を変更

テキストエディタで

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@~]でコマンド入力。

OSを最新状態にアップデート
sudo yum -y update

↑続:時間かかります。

gitをインストール
sudo yum -y install git
gitでアプリケーション設定ダウンロード
git clone https://github.com/dotinstallres/centos6.git
OSなディレクトリに移動
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」を作成。

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起動/ログイン
$ vagrant up
$ vagrant ssh

※おまけ:終了コマンド

vagrantログアウト
(※[vagrant@~]で)
exit
vagrant停止
vagrant suspend

webサーバーの起動

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

※おまけ:終了コマンド

webサーバー(php)
ctrl + C

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

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

ファイルの同期

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

config.vm.synced_folderの設定

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

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

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

設定の箇所の書き方は↓

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

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

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

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

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

さて、

いったん再読み込み
$ vagrant reload
起動
$ vagrant ssh

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

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

・試しに...

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

→変更されてます!

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

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

vagrantfile
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
vagrantfile
 config.vm.synced_folder "../Documents/testFolder", "/home/vagrant/testFolder"
 config.vm.synced_folder "./", "/home/vagrant"
結果-仮想マシン
- /home/vagrant
    └ Vagrantfile
    └ myCentOS
    └ testSite
    └ testFolder
結果-PC
- [user]
    └ myVagrant  //仮想マシンの場所
        └ Vagrantfile
        └ myCentOS
        └ testSite
        └ testFolder ← なんかできてる!(中身は空)
    └ Documents  //俗に言う「書類」
        └ testFolder

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

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

最初設定した時

vagrantログアウトせず(?ちょっと定かじゃない。。。)、色々設定して見て、同期されてるの確認

その日の作業終了&OSアップロードとか、FTP系使わなくなって捨てたりとか

次の日PC起動/vagrat 起動(vagrant ssh)

パスワードきかれる

パニックを起こす

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

言い訳

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