VirtualboxとVagrantとChef

    こんばんわ、加藤です。
    事情によりスライドシェアにまとめれませんでした。

    VirtualboxというOracle社が提供しているVirtualMachineのソフトウェアがあります。無料です。 https://www.virtualbox.org
    これがもう、まぁ〜便利で。21世紀すごいな!って思ってるわけですけれども。
    僕は会社にLINUXサーバを一本持っていて結構ショボめなので仮想化とかせずに各種確認環境をApacheのバーチャルホスト立てたりNGINXとかUnicornでポート変えてだしたりして作ってたんですけど、もうそういうぐちゃぐちゃした管理が必要ない!
    そもそもちょっとコード書き換えて確認するのにサーバにアップロードしてとか面倒くさい!
    ということでVirtualBoxです。
    手元で修正したファイルが、手元のマシンの中に構築されたUbuntu上で見れる。設定色々いじくりまくってわけわかんなくなったらさくっと削除してやり直し!(ロールバックもできます)
    フロントエンドの開発ならLiveReloadとかYoemanがいいかなーと思いますがバックエンド書くならVirtualboxです。(いや、まぁ世間的には当たり前に利用されているので今更ですけども)

    で、なんでこんなVirtualbox便利って思うかっていうと個人的には最近使い始めたVagrantの影響です。
    VagrantはVirtualboxのフロントエンドツールになっていてVirtualboxにインストールOSのイメージをBOXという形式で皆で共有してダウンロードしてインストールすることで手間を軽減し、更には自動化していこうというツールです。
    たとえば手元のMBPではVagrant自体はGEMSで配布されているので

    sudo gems install vagrant

    とかでインストールできます。その後は欲しいbox(http://www.vagrantbox.es)をvagrantupから探してきて

    sudo vagrant box add lucid64 http://files.vagrantup.com/lucid64.box

    な〜んてコマンドでboxをダウンロードして配置したら

    sudo vagrant init

    でまぁサーバがほぼ出来上がるという代物です。
    設定必要なんで

    vi Vagrantfile

    とかで編集してあげて

    利用するbox名や起動方法などを設定してあげるだけで出来上がりです!

    sudo vagrant up

    で仮想サーバが起動するので

    sudo vagrant ssh

    でシェルに入れるようになります。

    あとはChefとの連携もできるので

    knife cookbook create myrecipe -o cookbooks

    とかしてレシピをつくってレシピ流すとこまで自動化できちゃいます。
    これでチーム間での確認環境をそれぞれが持ちつつ、確認環境の違いで悩む。なんてことがなく進められます。これ地味に革命ですよね・・・
    もし万が一Xamppとかでやってる人はこっちに早めに鞍替えしたほうが依存関係の問題とかに頭悩ませるより早いと思うので良いと思います。
    Windowsでのやり方は知りません。


    関連記事

    • reactNativeを使ってアプリを作ってExpoで公開してみた

      ども 制作部夏目です。 今回のテーマは、reactNativeを使ってアプリを作ってExpoで公開してみたので、その紹介をします。 流れとしては、軽くreactNative,Expoの説明、最後にアプリの紹介でいきます。

      reactNative,Expoって何?

      reactNativeはfacebookが開発した統合環境ですが、開発環境としてはネイティブに関係するものが多く、エミュレータでは動作していても 実機デバッグをしようとした時に動かないといった問題が発生します。 この問題以外にもテスト用のプログラムを配布するには、iOSとAndroidでそれぞれ手間がかかり面倒です。 そこで登場したのが、Expoというサービスです。 ExpoはreactNativeに様々なライブラリを追加した環境を使った簡易的な アプリケーションの配布を可能とするツール群と、Expoで作成されたアプリケーションをexpo.ioから配布を可能にするサービスです。

      百聞は一見にしかず

      ここまで聞いてみたものの、自分が理解するには程遠いと思っているそこのあなた。 実際に動かしてみましょう。 reactNativeは、開発環境を整えなくても実行できるのです。 それがSnackと呼ばれるものです。 早速開いてみましょう。 すると 何やらゴニョゴニョと書いてありますね。 詳しくみていきましょう!!! まずimport〜 ですが、こちらは必要なモジュールやライブラリを読んでします。 次にexport〜ですが、こちらが表示部分を作っているところです。 最後のconst stylesはcssみたいな役目です。 exportで作った部分をどう見せるのか? スタイルを当て込むところです。 もう気づかれた方もいると思いますが、reactNativeはjava scriptを使って書かれています。 なので、java scriptをある程度書かれている方であれば、使いこなすのにさほど時間はかからないと思います。 実際に動かすには、 画面上部にある「▶︎Run」を押して、出てきたQRコードをお手持ちのスマートフォンで読み取ります。 動かすにはExpo Clientというアプリが必要になるのですが、ただアプリを動かすだけなら無料で使えますので、 インストールしてみてください m( _ _ )m iOSの方はこちら Androidの方はこちら さて、このReactNativeの何がすごいかというと、 iOSとAndroidの両方で動くアプリを作れるということ(クロスプラットフォームであるということ) 今まではiOSならswiftで、AndroidならJavaScriptもしくはGoで書いていましたが、 ReactNativeを使えば、AndroidもiOSもその垣根を関係なく、作れるということ。 今まで、iOSで実現できてたけど、Androidでは実装できない。なんてことがあったかもしれませんが、 reactNativeならそんなことはおきない(はず。。。😅)です。 長くなってしまいましたが、最後に今回作成したアプリの紹介をします。

      どんなアプリ?

      作成したアプリは、ぐるなびAPIを用いて、現在地付近のぐるなび掲載店を地図上に表示するアプリです。 何をいっているか、わからない方のために、実際に動かした画像をみてみましょう。 実装したのは、現在地検索機能、絞込み機能です。 苦労した点としては、既存のそれがそうであるように、地図上を移動した時に、その付近でもお店を検索できるようにしたこと、 現在地検索を押した時に現在地を中心にする処理です。 こちらは無料で公開していますので、下記URLからどしどしダウンロードしてみてください https://expo.io/@tnatsume/gurunavi これをAppStore、Google Play Storeでもダウンロードできるようにするのが次の目標です。 では、また次回の記事でいお会いしまShow🌟
      2019/10/22 技術 / デザイン / 制作