[Chromeos]localhost:portをCrostini VMのIP:portにフォワードする方法


Crostiniがstableにきた!と思ってbetaからstableに変更したらLinuxVMが無くなりました。気をつけてください。。
stableに変更したのが理由なのかわかりませんが、socatでcrostiniのlocalhostのポートへのマッピングがうまくいかなくなりました。
例えば、開発時にlocalhost:3000をcrostini vm上で立ててもホストのchromeosのchromeからアクセスできなくなりました。

下記のようなエラーでうまくいきません。

解決方法をさがしているとRedditで同じようなことを聞いている人がいました。

Connection Fowarderdというextensionを入れ、forwardingを設定します。

ifconfigでVMのIPを調べてDestinationを適宜変更してください。


AWS Ruby SDKでCost Exploreの情報を取得する方法


aws-sdk version3での話です。

1. aws-sdkのCost Exploreのモジュールを読み込む

2. IAMユーザに請求情報のアクセス権を与える

上部のナビバーのアカウントをクリックして、請求情報のアクセスのeditをクリックしてIAMアクセスのアクティブ化をチェックして保存。

3. IAMユーザに必要なロールを設定して追加する

下記のロールを作成し(今回はGEtCostAndUsageのみ)、該当ユーザでロールを追加する

4. REPLでテスト

Rails cでコンソールを呼び出しテスト。各キーは設定済みとする。

初期化。us-east-1でのみ提供されている

BlendedCostとUnblendedCostの差がわかりづらい。Unblendedの方が割引などを除いた実際の数値に近いという理解で良いのか。

ドキュメントを読み試行錯誤の結果、タグに紐づいたコストを引くことができた。

注意

Cost ExploreのAPIリクエストにはお金がかかりそう。。


localhostにPublic IPをマップして、リモートでの開発をあたかもローカルで開発してるようにする方法


ずっと知りたかったlocalhostへのマッピング方法がやっとわかった。

例えば、リモートホスト上(IP 111.111.111.111)で rails s -p 32884 -b 0.0.0.0で開発していた場合、普段は問題ないのだが、OAuthのログインのリダイレクト/コールバック先がlocalhost:3000で決め打ちされている場合、ユーザ認証が失敗してしまう。ユーザアカウントのroleをうまく変更して対処するしかなかった。それが下記のようにSSHでポートフォワーディングすると、

もしくは通信の暗号化を気にしないならsocat でもできる。

ローカルの開発機のブラウザでloalhost:3000をたたくとサーバ側の開発ポートにマッピングされる。これでOAuthのリダイレクトも問題なくなりリモートホストを意識しないで開発できる。

これ絶対探してる人多いはず。

参考:https://blog.trackets.com/2014/05/17/ssh-tunnel-local-and-remote-port-forwarding-explained-with-examples.html


[Cloud IDE] Codenvy ファーストインプレッション


redhatが買収したCodenvyです。Eclipse Cheを利用したIDEでEcliseユーザに馴染み深いものになっているのではないでしょうか。

一言でまとめるなら、”2018年だったらCodenvy使うよね”という感じです。程よくインフラが抽象化されていて開発環境を提供するという目的に則していると思います。

スクショで見ていきます。

Socialボタンによるサインアップ・ログインを完備

Email/passだけではなく、githubログインなどがあるのは良いですね。

今回はgithubログインを選択。ユーザデータ、sshキー、レポジトリへのアクセスが取られます。githubを利用した開発フローならば後で必要になると思うので許可します。

プロフィールを設定してサインアップ終了

3GのRAMが無料で使える!

太っ腹ですね。

Workspace毎にVMが立ち上がる

Cloud9などのサービスだと開発するサーバを意識して作らないといけませんが、workspaceという名前になっていてサーバ側を意識しない環境になっています。

ワークスペースの設置でどの開発環境で行うか選べる。

Herokuみたいに環境をぽちぽち選べる。これはすごい。Railsもありました。

選べるstack。

Dockerによる開発環境提供

作成するとdockerのイメージが立ち上がる。30秒ぐらいで立ち上がります。

開発環境はUbuntu

4Gストレージ付き

10分使用しないと停止設定

おそらくこれが課金ポイントでしょう。10分なんてロジックを考えてたり、同僚とdiscussionしてたら過ぎてしまいますしね。それ毎に30秒待つの苦しい。

Projectを作って開始

残念なのはRailsのプロジェクトがない。。Eclipse開発系多めという印象でしょうか。

まとめ

  • クレジットカードを入れることなく始められる
  • 3GRAMまで無料で利用できる(2018年8月時点)
  • 環境設定を一からやる必要のないStackという概念
  • インフラ(サーバー)を意識しない設計
  • Eclipse好きな人には良さそう

[Cloud IDE] Koding ファーストインプレッション


Koding – Modern Dev Environment Delivered

Cloud9との比較で引用されるKodingです。彼らのポジションとしてはCloud IDEでないと言っていますが、ユーザの主はそれで流入しているのではないでしょうか。

Koding is not an Online IDE. … Koding provisions development environments, makes them accessible locally.

from koding blog

“チーム開発を主体とした開発環境を提供する”ことを目標にしている。スタックを自分で作るなど、面倒な部分があります。

スクショで見ていきましょう。

ユーザ登録にクレジットカードが必要

このステップはAWSを使うときにも必要ですが、Amazonほど大きくない会社にいきなりクレジットカードを預けるのは少し心配な気がします。あまり、中身を見ないでdeveloper soloを選択しました。(これが原因かあとでチームで新しいアカウントを作成してもスタックを選ばないと進めない状況になりました。。)

emailとチーム名を入力

ユーザ・パスワードを入力

クレジットカード情報を入力

チームのサブドメインを作成

Stack(接続するサーバー)を作る必要がある

Dveloper soloを選択したのが理由かわかりませんが(あとでチームも作成しましたが同じでした),スタックを選ぶところから始まります。 AWS, Vagrant, Google Cloud Platform, Digital Ocean, Azure, Marathon, softlayerが2018年8月時点で選べるようです。つまり、開発者が開発するサーバを決めなければなりません。

AWSのAPIキーを入力し、Credentialを作成

AWSのstackを利用するにはAPIキーが必要

AWSを触ったかとがある人ならIAMでユーザを作って始めればいいとわかりますが、初心者には大変かもしれません。

stackを作成

Ace Editorを利用したコーディング

Cloud9と同じAce Editorのエディタを利用しているようです。 設定はCloud9の方が細かく設定できそうです。

まとめ

  • UIがCool&可愛いので好感がもてる
  • クレジットカードを最初に入れるのはハードルが高い
  • 一人で開発するにはあまり利点がなさそう。逆にチームでの機能が充実している?(試してません)
  • Stack(Server)は自分で設定するのである程度インフラの知識が必要
  • 一人でAWSをStackに使うならCloud9の方が良さそう

[Cloud IDE] AWS Cloud9ファーストインプレッション


Cloud9

一番有名どころのCloud IDEです。 AWSに買収されてAWSのファミリーとしてCloud9を利用することができます。
今から登録するとAWSに統合されたCloud9にリダイレクトされますが、買収前のCloud9も依然として利用することができます。(会社の一人の開発者も前のCloud9を利用中です)

一言でまとめると”EC2インスタンスについたIDEの皮”だと思います。

EC2を利用していた人にはとっつきやすいですが、設定時にAWSワードがでてくるので知らない人は勉強する必要があります。将来的に知っておいて損はないのでここから始めるのも手だと思います。これがAmazonが買収した意図かもしれません。

スクショでみていきましょう。

Tokyoリージョンは選べない

3ステップの環境設定

セカンドステップでAWS用語のec2やt2.microなどがでてくる。プログラムを書くという目的のためにインフラを知る必要があるのかどうかは疑問だ。逆に知っている人はサクサクいける。t2.microの1Gメモリじゃアプリ乗ってもスワップしまくって作業にならないとか。



初期起動は2,3分ぐらいかかる

ec2インスタンスだしそのぐらいかかるよね。

デフォルトでEC2インスタンスに直接sshは不可

普通のt2.microインスタンスです。セキュリティグループであるサブネットのsshしかデフォルトオープンしてない。そして、keyが設定されてないのでCloud9のインスタンスの直接サーバ化には、インスタンス自体のsshサーバの設定を変更して、sshをパブリックにオープンする必要がありそう。


美しいUIと多岐にわたる設定

ACE editor。オープンソースのAceエディタにはドキュメントがあまりなくここまで綺麗にするには独自のノウハウor凄まじい時間をかけてアダプトしたのか(戦々恐々)。Ace editorのテーマはサポートされていてそれにあうUIも良い感じ。これを使いこなすのはまた別途勉強が必要。プラグイン機構がなさげなのが残念。

再開時に30秒ほどかかる

30分利用しない(デフォルトが30分。変更可能)とEC2インスタンスが停止し、課金が止まる。したがって、停止から再開に30-40秒ほどかかる。

まとめ

  • ブラウザ一つで開発が進められる。
  • UIは美しく、もっさり感もあまりない。しかし、IDEの設定が沢山ある。
  • 停止から再開に30-40秒ほどかかるので少し待つ必要がある
  • Tokyoリージョンで使えない。しかし、シンガポールでも遅延は気にならない。
  • 下記のような良心的な価格設定から始められる。 大規模なRailsアプリなどは1Gじゃ足りないので他のインスタンスを使う必要あり。価格帯は教育用途には合っているように思う。


[AWS][Ruby] EC2インスタンスなどのリソースにtagを追加する方法


AWSのRuby SDK version3での話。

Gemfileに下記を追加して、

create_tag methodを呼べば良い。Resouceで各リソースのID系を入れればうまくやってくれそう。


Redux + immutable.js + Reselectでredux reducerを安全かつ簡潔にする


日本語の技術ブログを読んでいるとImmutable.jsでmodelを作り、そこにロジックを入れる方法が書かれてるものが多いですが、英語の情報をまでみてみると、それはどちらかというと特殊な方法で多くのところでReduxのReducerに導入しています。

今回は、後者の方法を説明していきます。

Immutable.js

Reduxのstateはimmutableで操作すべきであり、そのためObject.assign()slice等を駆使してReducerを書いていきます。問題はその方法が冗長であり、人によってES6を使わないなど書き方も違うのでコードが見にくくなります。これを解決するのがImuutable.jsになります。ドキュメントを見ると(Typescript前提で書かれてるドキュメントなので、知らないと非常に読み難い…)、便利な関数が沢山生えてます。setInなどの関数を使えば、Nestされているオブジェクトに一発でデータを挿入できたりします。そして、そのオブジェクトが常にImmutableであることを保証してくれます。

Immutablejsのreducerへの組み込み方は簡単で、InitialStateをimmutableJSで作れるだけです。

上記のstate.draft.standardsはImmutable.Mapオブジェクトとなります。問題はこれをtoJS,toArray, toObjectをコンポーネント内のRedux stateの呼び出しのmapStateToPropsで使うのがReduxのアンチパターンになっていることです。

This is a particular issue if you use toJS() in a wrapped component’s mapStateToProps function, as React-Redux shallowly compares each value in the returned props object. For example, the value referenced by the todos prop returned from mapStateToProps below will always be a different object, and so will fail a shallow equality check.

で、どうするか。ここで登場するのがReselectになります。

Reselect

Reselectは、キャッシュを持ち、変更があった場合だけ新しいオブジェクトを作成するような挙動を記述できます。これをmapStateToPropsに入れ込むことにより、アンチパターンを避けることができます。 具体的なコードは、

詳しくはREADMEや他の技術ブログを参考にしていただければと思いますが、標準の比較関数は単純なオブジェクト比較(===)を利用しているため、オブジェクトのkey/valueのペアまで比較できません。ここでlodashisEqualを使って、deep比較をすることにしている(今回の場合、shallowな比較(ネストされたものは比較しない)で十分ではあるがREADMEがそうなっているので))。createDeepEqualSelectorの最初の引数が、Input Selectorと呼ばれるもので、ここが以前のもの(キャッシュ)との比較対象です。isEqualコードを読んでいないが直感的にあまりnestしすぎない方が比較自体の計算量が少なくなって良さそうですね。

これをcomponentのmapStateToPropsで直に呼び出すのは、単純です。

これでreducer内でimmutablejsで快適にstateを操作できるようになりました!


Scroll to top