読者です 読者をやめる 読者になる 読者になる

ここにタイトルが入ります

デザイン&プログラミングのことも書くし、それ以外のことも書く。

【Webデザイン/フロントエンド開発】作成したWebサイトをローカルで確認するのにWebサーバーが必要? →Anvil使うがよいよ

web design Rails dev-tips mac

結構前からあるみたいなのに知らなかったMac用アプリのAnvil
開発中のローカルサイトに簡単にアクセスできるようにしてくれます。
(バーチャルホストを簡単に用意できるというか)

Rack(Rails等)アプリだけでなく静的サイトの確認なんかにも使いやすいので
デザイナー(フロントエンドエンジニア)の方にもおすすめ!


Webサイト開発でデザイン〜フロント部分の実装(html,css等)を行った際、
デザインを確認したりメンバーに共有したりするために
静的サイト?をよくローカルマシンで立ち上げています。

apatchなりnginxををインストールして、
公開するサイトごとにバーチャルホストの設定をして…


少し設定ファイルをいじるだけではあるものの、
サイトが増えるたびに設定いじったりしてちょっとめんどくさい。


なんてことを思っていたときに、簡単にローカルで
サイトを立ち上げられるAnvilを知りました。
超便利!(*´∀`)

Anvil

〜お世話になってます!〜
Anvil for Mac - Run your sites locally

これ、サイトのルートディレクトリを指定するだけで
すぐにサイトを見れる状態にしてくれます(ドメインを割り当ててくれる)。

ダウンロード〜設定

サイトからダウンロードしてきて解凍すれば
すぐに使えます。

起動すると、メニューバーにアイコンが表示されているはず。

AnvilはPowというRack用アプリケーションサーバー?を使っているので、
(説明は割愛…)
Powがインストールされていない場合は
アイコンをクリックするとインストールを促されます。


f:id:blog_711fumi:20140624003918p:plain


ボタンを押すとコンソールが立ち上がって自動でPowをインストールしてくれます。
※途中でパスワード求められることがあります。

インストールが完了したあとは、アイコンをクリックして
サイトのルートディレクトリを設定するだけ。

デフォルトではルートディレクトリの名前に.devがついたドメイン
割り当てられます。


f:id:blog_711fumi:20140624004723p:plain


クリックするとディレクトリ名.devでローカルのファイルが
見えることが確認できると思います。
なんて楽!(;゚∀゚)


ローカルネットワークの他のマシンから確認

ローカルネットワークで繋がっている他のマシンからもアクセスできます。

コンテキストメニュー(右クリック)で表示される、〜.xip.ioというアドレスで
他のマシンから見ることができます。
f:id:blog_711fumi:20140624010137p:plain

メンバーにちょっと確認してほしい時なんかに便利ですよね。

Railsアプリなんかももちろん見える

PowはRackサーバーですからRailsアプリももちろん立ち上げられます(Sinatraとかも)。
Railsプロジェクトのディレクトリを指定するだけ!

注意点

他のWebサーバーなどを使っている場合に、Powが邪魔をする場合があるので
(ポート被るとか)
その辺は気をつけてください。

〜Powを停止して共存:参考になりました!〜
Rails 用に pow を入れていると Apache を邪魔して困るから powder で解決した - yukku++


Powの操作について補足

直接は関係ないですがPowの使い方に関して
わかりやすい説明があったので何かあった時のために。

〜参考になりました!〜
開発サーバをThinからPowに切り替えて開発効率アップ! (Mac限定) - 酒と泪とRubyとRailsと

※Powのユーザーズマニュアル
Pow User's Manual



MacにはあってもWindowsにない、というAnvilのような便利アプリみたいなのたくさんあるので
そういった面でもMacのほうが開発に有利な気がしますよね。