AWSを触り始めた
世間はAWS Summit Tokyoで盛り上がってますが、大阪の真ん中らへんで日報と戦っていますゆずです。
会社から「AWSとAzure両方できるやつがほしい」と言われ AzureかAWSならAWSかなーコミュニティ楽しそうだしって感覚でGCP派ですがAWS始めました。 （GCPっていうかFirebaseなんですけど、クレカとか登録せず無料枠で遊べるのめっちゃ良い）
AWSデビューしてしまった
— ゆず🍔 (@yuzu_441) 2018年5月29日
アカウント作ってEC2のインスタンス立てる前までに何をしたかをメモ的に書く
その設定やべぇよってのがあったらtwitterとかで教えていただけると助かります
tl;dr
特に中身ない、アカウント作ってちょっと設定したよってだけの記事です
想定読者は自分と同じ今更AWS登録してるような人です
あと初心者はこんな気持ちでやってんのかみたいな気持ちで読める広い心を持つ人
アカウント作った
なにはともあれアカウント作りました。
これでクラウド破産に怯える生活のスタートです。
必要だったもの
- クレカ
- 携帯電話(電話認証があった)
特に手順とか無く項目入れて次へをやっていくだけ
唯一ハマったというかハメられたのは「住所」とか日本語で書いてんのに「Osaka」とか英語で書かないと行けなかった所
2FA設定した
アカウント作れたので、ガンガンGPUぶん回してIoTでAIが世界をブロックチェーンする予定もなかったんですが
AWSの資料*1にルートアカウント使うなとか書いてあったので2段階認証設定して糞長いパスワード設定して封印しました
２段階認証の設定についてはIAMのページに行って 「ルートアカウントのMFAを有効日」→「MFA管理」で設定できたはず
設定金額超えそうになると通知来るように
$30超えそうになったらメールで教えてくれるように、CloudWatchに設定した
支払い通過を日本円に
適当にいじって眺めてたら円請求にできるっぽかったので円請求にした
IAMユーザー発行した
ルートアカウント封印したのでadminアカウント作りました
IAMのページで「ユーザーを追加」して適当に入力していきます。
アクセスの種類は両方チェック、パスワードはどうせ変えるから自動生成にしました。
アクセス権
アクセス権はグループを作ってそれに付与するらしい（Linuxのgroupsみたいなもんかな？）
グループの作成して、適当に名前つけて「AdministratorAccess」を作ったグループに付与しました
地味にハマった点
アカウント作れたのにIAMユーザーのログイン方法がわからんくて唸ってた
IAMのユーザーページから作ったユーザークリックして認証情報開くと書いてた
- コンソールのログインリンク
https://xxxxxxx.signin.aws.amazon.com/consoleこんな感じのやつ
あとは上のアドレスにアクセスして
ユーザー名とアカウント作った時に出てたパスワードを入力するとログインできる
まとめ
AWSは人口が多いので、大概ググると出てくるし、最悪twitterで聞けば誰かしら教えてくれるのでよかった
ただ貧乏人かつ小心者としてはクラウド破産が怖いので、設定した値段超えたら全サービス落としてくれる悪魔的機能が欲しい。。自分でAPI叩くようにすればいいらしいけどまだそこまで手が。。。
redux始めました
最近ちょっと時間ができたのでreact context api触ってみたり、MobX触ってみたりしてます。
ちゃんと書くとMobXか
— ゆず🍔 (@yuzu_441) 2018年5月15日
隙間時間でちょこちょこやってたけど、decorator使えるならめっちゃ楽
しかし会社ではreact + reduxで作られているプロジェクトがあるので、ちょっと勉強しとくかって感じで勉強したメモ
ちなみに見てたのはreduxの公式 https://redux.js.org/
reduxパーツ
Action
Plain Javascript Objectで定義され、TypeとValueを持つ 説明が面倒なのでメモはredux公式に習ってるけど、基本的にはflux-standard-action等に従うべきだと思う
interface Action { type: string; // Action Type payload: any; // errorがtrueならErrorオブジェクト error: boolean; meta: any; // payloadとは別の追加情報などを設定する }
Action Creators
Action CreatorsはActionを返すただの関数
function addTodo(text) { return { type: ADD_TODO, text } }
facebook/fluxだとaddTodoWithDispatchのようにActionを作成しつつdispatchするが
reduxのAction CreatorsはActionを返す
// wrong addTodo() // => 内部でdispatch // good dispatch(addTodo(text))
dispatchしてActionを実行するものをBound Action Creatorというらしい
const boundAddTodo = text => dispatch(addTodo(text))
reduxのbindActionCreatorsを使うと上のやつが簡単に作れるっぽい
const actions = bindActionCreators(actionCreators, dispatch)
Reducers
Storeに渡されたアクションによってstateがどのように変化するのかを定義する
雑にまとめると(prevState, action) => newStateこんな感じでstateとactionを渡すと、新しいstateを返すやつ
reducerは副作用が無いようにしなければならない
function todoApp(state = initialState, action) { switch (action.type) { case HOGE: return Object.assign({}, state, {hoge: true}) case FUGA: return Object.assign() default: return state
reducerが大きくなってくると分割して、reduxのcombineReducersを使用してreducerをまとめる
Store
アプリケーションのstateを持ってる
reduxの思想的に「Single source of truth」なのでStoreは１つ。createStoreの時点でreducerを引数に取る
ReduxのStoreは以下の3つのメソッドを持つ
- getState
- Storeが持つstateを取得する
- dispatch
- actionを一つ引数に取り、内部でreducerによってstateが変更された時に呼ばれる
- subscribe
- stateが変更された時にこのコールバックが呼ばれる
まとめ
とりあえずactionとか完全に従って置いた方がいいんじゃないかなーくらいに思っただけで、特に根拠がないので後々裏付けしたいとは思ってる
あとまだreact-reduxについては全く触ってないので明日とかにちょこちょこ見ていく予定
browsersyncを使ってみたら思った以上に便利だった
browsersync使ってますか？死ぬ程今更ですが、使ってみたら思ってた以上のことをしてくれた
最初は更新してくれるだけだと思ってた
最初はファイルの変更検知してブラウザリロードしてくれるだけでしょと思ってたら、リロードしてくれる以上のことができた
何をしてくれたのか
- 同じページ開いてるブラウザを全部リロード（１個だけだと思ってた）
- 操作を同期してくれる
操作を同期してくれるとは
例えばBrowser Aでbutton要素をclickすると、Browser Bでも要素をclickしてくれる
使い方
適当にインストールする
yarn add -D browser-sync
あとはserverオプションでルートディレクトリを指定して、filesオプションで監視する対象のファイルパスを指定する
例えばpublicディレクトリをルートに、public以下が変更されたらブラウザを更新する
npx browser-sync start --server 'public' --files 'public/**/*'
これでファイルを変更するとブラウザが更新され、ブラウザ操作もそれぞれに反映してくれた🎉
