ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

AWSを触り始めた

世間はAWS Summit Tokyoで盛り上がってますが、大阪の真ん中らへんで日報と戦っていますゆずです。

会社から「AWSとAzure両方できるやつがほしい」と言われ AzureかAWSならAWSかなーコミュニティ楽しそうだしって感覚でGCP派ですがAWS始めました。 (GCPっていうかFirebaseなんですけど、クレカとか登録せず無料枠で遊べるのめっちゃ良い)

アカウント作ってEC2のインスタンス立てる前までに何をしたかをメモ的に書く
その設定やべぇよってのがあったらtwitterとかで教えていただけると助かります

tl;dr

特に中身ない、アカウント作ってちょっと設定したよってだけの記事です

想定読者は自分と同じ今更AWS登録してるような人です
あと初心者はこんな気持ちでやってんのかみたいな気持ちで読める広い心を持つ人

アカウント作った

なにはともあれアカウント作りました。
これでクラウド破産に怯える生活のスタートです。

必要だったもの

  • クレカ
  • 携帯電話(電話認証があった)

特に手順とか無く項目入れて次へをやっていくだけ

唯一ハマったというかハメられたのは「住所」とか日本語で書いてんのに「Osaka」とか英語で書かないと行けなかった所

2FA設定した

アカウント作れたので、ガンガンGPUぶん回してIoTでAIが世界をブロックチェーンする予定もなかったんですが
AWSの資料*1にルートアカウント使うなとか書いてあったので2段階認証設定して糞長いパスワード設定して封印しました

2段階認証の設定についてはIAMのページに行って 「ルートアカウントのMFAを有効日」→「MFA管理」で設定できたはず

設定金額超えそうになると通知来るように

$30超えそうになったらメールで教えてくれるように、CloudWatchに設定した

papix.hatenablog.com

支払い通過を日本円に

適当にいじって眺めてたら円請求にできるっぽかったので円請求にした

dev.classmethod.jp

IAMユーザー発行した

ルートアカウント封印したのでadminアカウント作りました

IAMのページで「ユーザーを追加」して適当に入力していきます。
アクセスの種類は両方チェック、パスワードはどうせ変えるから自動生成にしました。

アクセス権

アクセス権はグループを作ってそれに付与するらしい(Linuxのgroupsみたいなもんかな?)
グループの作成して、適当に名前つけて「AdministratorAccess」を作ったグループに付与しました

地味にハマった点

アカウント作れたのにIAMユーザーのログイン方法がわからんくて唸ってた

IAMのユーザーページから作ったユーザークリックして認証情報開くと書いてた

  • コンソールのログインリン
    • https://xxxxxxx.signin.aws.amazon.com/consoleこんな感じのやつ

あとは上のアドレスにアクセスして
ユーザー名とアカウント作った時に出てたパスワードを入力するとログインできる

まとめ

AWSは人口が多いので、大概ググると出てくるし、最悪twitterで聞けば誰かしら教えてくれるのでよかった

ただ貧乏人かつ小心者としてはクラウド破産が怖いので、設定した値段超えたら全サービス落としてくれる悪魔的機能が欲しい。。自分でAPI叩くようにすればいいらしいけどまだそこまで手が。。。

redux始めました

最近ちょっと時間ができたのでreact context api触ってみたり、MobX触ってみたりしてます。

しかし会社ではreact + reduxで作られているプロジェクトがあるので、ちょっと勉強しとくかって感じで勉強したメモ

ちなみに見てたのはreduxの公式 https://redux.js.org/

reduxパーツ

Action

Plain Javascript Objectで定義され、TypeとValueを持つ 説明が面倒なのでメモはredux公式に習ってるけど、基本的にはflux-standard-action等に従うべきだと思う

github.com

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こんな感じでstateactionを渡すと、新しい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は1つ。createStoreの時点でreducerを引数に取る

ReduxのStoreは以下の3つのメソッドを持つ

  • getState
    • Storeが持つstateを取得する
  • dispatch
    • actionを一つ引数に取り、内部でreducerによってstateが変更された時に呼ばれる
  • subscribe
    • stateが変更された時にこのコールバックが呼ばれる

まとめ

とりあえずactionとか完全に従って置いた方がいいんじゃないかなーくらいに思っただけで、特に根拠がないので後々裏付けしたいとは思ってる

あとまだreact-reduxについては全く触ってないので明日とかにちょこちょこ見ていく予定

browsersyncを使ってみたら思った以上に便利だった

browsersync使ってますか?死ぬ程今更ですが、使ってみたら思ってた以上のことをしてくれた

browsersync.io

最初は更新してくれるだけだと思ってた

最初はファイルの変更検知してブラウザリロードしてくれるだけでしょと思ってたら、リロードしてくれる以上のことができた

何をしてくれたのか

  • 同じページ開いてるブラウザを全部リロード(1個だけだと思ってた)
  • 操作を同期してくれる

操作を動悸してくれるとは

例えばBrowser Aでbutton要素をclickすると、Browser Bでも要素をclickしてくれる

使い方

適当にインストールする

yarn add -D browser-sync

あとはserverオプションでルートディレクトリを指定して、filesオプションで監視する対象のファイルパスを指定する

例えばpublicディレクトリをルートに、public以下が変更されたらブラウザを更新する

npx browser-sync start --server 'public' --files 'public/**/*'

これでファイルを変更するとブラウザが更新され、ブラウザ操作もそれぞれに反映してくれた🎉