ついんてっく

双子のエンジニア(兄:web、弟：インフラ)が気になること、今やってるプロジェクトとかについて書きます。ぶっちゃけ１人でやって続かなかったから監視体制を置いたのが強いサボりん坊や

弟のブログの更新方針について

どうも、弟です。

数回にわたってAWS関連の記事を投稿していたのですが、
今後どのような指針でブログを更新していくかを定めましたので、
ここに記載したいと思います。

弟のブログの更新方針

以下の３本柱で更新をしていければと思っています。

  • 1.仮想サーバ
  • 2.仮想化支援ツール
  • 3.Infrastructure as Code

1.仮想サーバについて

仮想サーバは、主にAWSを想定しています。
AWSのEC2構築手順や利用していこうと思います。
また、他の仮想サーバ(Virtual BoxやAzure等)との違いやメリット・デメリットもまとめていければと考えています。

2.仮想化支援ツール

仮想化支援ツールは、Vagrant、Dockerを想定しています。
Vagrant、Dockerの構築手順、メリット・デメリット等をまとめていければと考えています。

3.Infrastructure as Code

現時点で一番未知の分野です。(笑)
chefを使用する予定ですが、ansible、pappetについても勉強し、違いやメリット・デメリットをまとめたいと考えています。

かっこいいと思っている目指すべき姿

最終的に、
・AWS EC2で仮想サーバを構築し、
・Vagrant、DockerでOS、アプリを構成管理し、
・Chefで設定を自動化
 する環境を作成し、それを紹介していければと考えています。

以降はこの柱を元に、勉強、記事化していきます。

それでは

React Native ~ Reduxの概念 ~

兄 React Native redux flux 記事

react-nativeとの出会い

どうも、兄です。

今回はreact-nativeのreduxを記事にしたいと思います。 react-native開発をしてて、ところどころで感じたのが、

なんじゃこれ！？redux超便利！！！

です。笑

ずっとお伝えしたかったのですが、僕の知識不足でうまく説明できずに後回しになっていました。

実装した中での私感を踏まえてお伝えできればと思います。

続きを書きました。

twins-tech.hatenablog.com

Web開発が主なので、MVCまんせー(backboneとかangluerとか)で、デザインパターンなしでプログラム組むとか不慣れ過ぎてヤベー。しかも、androidとswiftのmvc frameworkとか知らねーぜ。２つ覚えんといかんのか、ヤベー。と思っているところに、fluxを知り、それを使っているreact-nativeに出会いました。

fluxと呼ばれるものは、概念を良く聞きかなり興味があった + react.jsの勉強にもなるとうことでreact-nativeを選択したというのがはじめの流れです。

開発を進める上で感じた利点としては、以下があると思います。

  • react.js、react-native共通で使える。
  • iOS、Android両方同じパターンが使える。
  • 従来のModelを沢山作るのではなく、アプリケーション全体のstate(状態)として管理でデータの所在がわかりやすい。
  • データの流れが一方行で、アプリのスケールがしやすい。

reduxを学ぶ前に元となるfluxを知ろう

reduxを学ぶ前に拡張解釈の元となるfluxと、その歴史を見ていきます。

fluxは偉大なる先人の方々が、めちゃくちゃわかりやすく紹介いただいてるので、引用させて頂きます。

speakerdeck.com fluxって何？ってのを凄く丁寧にわかりやすくまとめてくれてる、且つ面白い超良スライドです。何度読み返しをしたことか。。。

qiita.com react.jsの特徴。魅力。virtualDOMを紹介しながら、なぜパラダイム的なのかを丁寧に解説してくれています。

medium.com facebookの歴史からなぜfluxが生まれたかを説明してくれてます。

要は、1つのviewに1つのModelのような小さいアプリだといいけど、facebookみたいにModel同士が密に絡みあってる場合は動きが予測しづらいよね。デザインパターンを再設計しましょう。原理に立ち帰りましょう。という流れだと認識しています。

その過程で双方向バインディングも排除されています。

これは、Virtual DOMが成せる業だと思っていて、その結果シンプルな考えに立ち帰っていることができるのでしょう。

※ react-nativeはvirtualDOMじゃないという認識なんですが、実行速度には問題ないのはreact-nativeでもComponent同士で比較してるからなのかな？keyが存在するし。。。教えていただけると幸いです。

reduxを学ぶ

実はflux、reduxという概念をすぐに理解できたわけではありませんでした。 今までのMVCをゴリゴリ使って、使う時、Model newして、双方向バインディング便利！ってなってたので。。。

そう思うと、 ( V <-> M ) で、Modelからajaxしてjsonデータを取得してModelに反映するのが最近の実装だったなぁw ちょ、Controllerどこいったwww(遠い目・・・)

flux、reduxはつまるところ、データの流れ一方行に限定させた、アプリケーション全体のstate(状態)管理のパターンという認識で今は落ち着いてます。まだまだ勉強中の身なのでご指摘いただけると助かります。

reduxを学ぶ時は次のドキュメントが公式文書です。全て英語なので辛いところですが、Sampleが豊富なので動かしながら学んでいくことができると思います。

redux.js.org

github.com ※ react.jsとreact-nativeはreduxの繋ぎ方が違うだけで、考え方は同じです。

実装を繰り返したり、ドキュメントを読む過程で脳のスイッチが切り替わったとうことでしょうか。 ですので、次は、react-nativeにreduxの導入の方法をやっていきたいと思います。

それでは！

AWS仮想サーバ構築ーVPCの作成②

どうも、弟です。

前回はVPC作成の記事を書きました。

twins-tech.hatenablog.com

今回は、サブネットを作成し、前回作成したVPCをサブネット分割していこうと思います。

サブネット分割の理由

サブネット分割とは、作成したネットワークをさらに細かく分割する技術のことです。
IPアドレスの後ろについている「/16」や「/24」がサブネット(サブネットマスク)であり、 「/24」の場合は、「IPアドレス32bitのうち、前詰め24bitはサブネットである」ことを意味しています。
この場合、端末を区別するための割り振りは、残り8bitで行うこととなります。
そのため、「/24」で分割されたネットワークでは、「10.0.1.1」と「10.0.2.1」は別ネットワークとなり、ルータ等のネットワーク機器を介さなければ 通信することができないということです。

サブネット分割を行う理由としては大きく以下の理由と考えます。

例えば、ネットワークの管理についてですが、一つの組織の中で複数の部署A、B、Cが存在し、 部署Aの人間だけが閲覧できる資料が存在するとします。
端末のIPアドレスをキーに、閲覧制限をかけることも可能ですが、人数の増減に 合わせて対応が必要となってくるため、あまり柔軟ではありません。
そこで、ネットワークをサブネット分割し、特定のアドレス帯を部署Aに割り与えることで、 部署Aで人数の変動があったとしても問題なくネットワークの制限をかけることができるというわけです。

サブネットの作成

それでは、AWSで実際にサブネットを作成していきます。

1.VPCダッシュボードからサブネットを選択します。
f:id:twins_tech:20160618120056p:plain

2.サブネットのコンソール上部から、サブネットの作成を選択します。
f:id:twins_tech:20160618120124p:plain

3.サブネットの作成画面にて、必要な情報を入力し、作成をクリックします。
f:id:twins_tech:20160618120233p:plain
・ネームタグ・・・サブネットの名称
・VPC・・・どのVPCを対象とするかの選択。作成したVPCがプルダウンで選択可能
・アベイラビリティゾーン・・・アベイラビリティゾーンを選択※
・CIDRブロック・・・サブネットに割り当てるネットワークを指定
※アベイラビリティゾーンはどこのデータセンターでAWSを利用するかのことです。
　特にこだわりがなければ東京(ap-northeast)で問題ありません。

以上でサブネットの作成は完了です。
次回はAWSのルーティングを設定していきます。
では、また

AWS仮想サーバ構築ーVPCの作成①

どうも、弟です。

今回からAWSでEC2(Amazon Elastic Compute Cloud)、いわゆる仮想サーバを構築していきたいと思います。

AWSはEC2を構築する前準備として、VPC(Amazon Virtual Private Cloud)を準備する必要があります。 VPCは、いわゆる仮想IPのネットワークのことで、EC2構築の際、どのVPCにサーバを割り当てるかを選択する 必要があるため、まずVPCを構築した後、EC2を構築するという手順になります。

VPCでできること

VPCでは、主に以下の設定が可能となります。

  • 1.仮想ネットワークアドレスの構築
  • 2.仮想ネットワークのサブネット分割
  • 3.ルーティング
  • 4.セキュリティ設定による通信可・不可の選定

オンプレミスでネットワーク構築をする場合、少なくともルータ、Ｌ３スイッチが必要となりますし、 セキュリティ設定をする場合はファイアウオール等のセキュリティソフトが必要となることを考えると、 機器導入の必要がないことがメリットと考えます。
また、VPCはAWSで用意されたGUIベースで感覚的に構築ができ、学習コストが抑えられることもメリットですね！

VPCネットワーク作成の手順

それでは、実際にVPCネットワークを作成していきます。

1.AWSのアイコン画面から、VPCを選択します。
f:id:twins_tech:20160607235118p:plain

2.VPCダッシュボートにて、VPCを選択します。
f:id:twins_tech:20160614064113p:plain

3.コンソール上部の「VPC作成」を選択します。
f:id:twins_tech:20160614064242p:plain

4.VPCの作成画面にて、設定値を入力し、作成を選択します。
　ネームタグ：VPC名
　CIDRブロック：IPアドレス/サブネット分割単位
　テナンシー：デフォルト、ハードウェア専用が選択可能
　　　　　　　デフォルト・・・ネットワークを他のハードウェアと共有する
　　　　　　　ハードウェア専用・・・ネットワークを占有する
f:id:twins_tech:20160614064701p:plain
※テンナシーのハードウェア専用は別途料金が発生するため、要件がなければデフォルトで問題ありません。

5.VPCが作成できたことを確認します。
f:id:twins_tech:20160614065836p:plain

直感的でわかりやすかったのではないでしょうか？

次回は、作成したVPCをサブネット分割していきます。

では、また

React Native Iconとrnpm

React Native 兄 開発日記

どうも、兄です。 前回、react nativeのroutingを記事にし、タブを実装したました。 その際、タブボタンがテキストだったのでいい感じのアイコンに変えていきたいと思います。

twins-tech.hatenablog.com

強い味方、react-native-vector-icons

webでもネイティブでも、アイコンを使うケースは多いと思います。 webの場合、bootstrapを始めとしライブラリからすぐ使えるケースが多いですね。

react-nativeの場合はどうでしょうか？ starなど標準で用意されているアイコンもありますが、数が少なく実装には耐えれません。

そこで、強い味方が『react-native-vector-icons』です。

f:id:twins_tech:20160607093432p:plain

ドキュメントに記載通り、このIconsetの中から自由に組み合わせて使うことができます。

僕のオススメはIoniconsです。iOS、android両方のデザインが揃っているの使い勝手が良いです。

続きを読む

React Native Routing について

React Native 開発日記 兄

React NativeのRouting

どうも兄です。 ネイティブ開発を行う上で最初にぶち当たるのがRoutingだと思います。 React Show Caseの開発を通じてRoutingを説明できればと思います。

ネイティブの画面遷移

ネイティブの画面遷移はWebのRoutingと異なり、Sceneという画面を積み上げていく形です。

http://blog.paracode.com/images/routing/navigation.png

Routing and Navigation in React Native - Dotan Nahum

僕が経験した中で幾つか挙げられますが、ネイティブ開発を行う時躓く所の一つは画面遷移だと思います。 Web -> ネイティブで勝手が違うので特にでしょう。

  • Android、iOSで画面遷移の制御が異なる。(IntentとStoryboard)
  • 一目でどの画面に遷移するかフローがわからない。
  • Tabbar、Navbar、などネイティブ特有の機能の実装が各OSで異なり。手間取る。

React Nativeの画面遷移とは？

では、React Nativeの画面遷移はどうでしょう。 Android、iOSで画面遷移の制御が異なる。がNavigatorというComponentにより解消され、学習コストが下がっていると感じます。

facebook.github.io

続きを読む

AWSの概要とサービスの種類

仮想サーバ 記事

どうも、弟です。

前回の記事で、仮想サーバとは何かを説明しました。

twins-tech.hatenablog.com

今回は仮想サーバの中でも、現在勉強している「AWS(Amazon Web Services」の概要と主なサービスの種類について説明しようと思います。

AWSとは

AWS(Amazon Web Services)とは、Amazon社が提供するクラウドサービスのことです。
ネットワーク経由で、仮想コンピュータやストレージをはじめとする様々なサービスが提供されています。
現在は30種類以上のサービスが存在し、クラウドサービスとしては最大規模を誇ります。

クラウドとは

クラウドとは、クラウドコンピューティングの略で、ハードウェアやミドルウェア、アプリケーションを ネットワーク経由で提供するサービス形態になります。
クラウドサービスは、主に以下に分類されます。

  • インフラストラクチャサービス(IaaS)
    　仮想サーバやストレージ等、ハードウェアを
    　インターネット経由で提供するサービス
  • プラットフォームサービス(PaaS)
    　データベースやアプリケーションサーバ等のミドルウェアを
    　インターネット経由で提供するサービス
  • アプリケーションサービス(SaaS)
    　ソフトウェア等のアプリケーションをインターネット経由で
    　提供するサービス

AWSの主なサービス

AWSにはいくつものサービスが提供されており、私自身まだまだすべてのサービスを 理解できているわけではありません。
ただし、仮想サーバを構築していく上で、このサービスは必要だと考えるものはいくつかありますので、 今回はそちらを紹介していきます。

Amazon Elastic Compute Cloud(EC2)

EC2は、いわゆる仮想サーバのことです。
上記分類ではIaaSに相当します。
RedHat、Ubuntu、CentOS、WindowsServerなどのOSで仮想サーバを構築できます。
また、用途に応じて複数の仮想サーバを構築することができ、必要なリソースを割り当てることができます。

Amazon Virtual Private Cloud(VPC)

VPCは、いわゆる仮想ネットワーク構築サービスのことです。
上記分類ではIaaSに相当します。
任意のプライベートアドレスでサブネット分割を指定する、またインターネット用のゲートウェイを
設定するなど、VPNを構築することができます。

Amazon Simple Storage Service(S3)

S3は、いわゆるオンラインストレージのことです。
上記分類では、IaaSに相当します。
データやログの保管目的として使用可能で、無制限にデータを保存することができます。

Amazon Relational Database Service(RDS)

RDSは、いわゆるリレーショナルデータベースのことです。
上記分類では、PaaSに相当します。
MySQL、Oracle、SQLServer、PostgreSQLの商用DBを利用することができます。




今回は、AWSの概要とサービスのいくつかを説明しました。
次回からは、今回紹介したサービスを用いて、実際に仮想サーバを作成していきたいと思います。