Vue + AWS Amplify でFacebook認証する

Amplifyを使ってFacebook認証を設定します。 公式のドキュメントに従って進めていきます。

Amplify Authentication

amplifyの初期化については省略。 amplify add auth コマンドを実行すると以下のように認証するプロバイダについて聞かれるのでfacebookを選択。

Do you want to use the default authentication and security configuration? 
  Default configuration 
❯ Default configuration with Social Provider (Federation) 
  Manual configuration 
  I want to learn more.

このような感じになります。 サインイン・サインアウト時のコールバックURLはいずれもlocalhost:8080を指定。 この値は複数設定できるので開発用・本番用それぞれのURLを設定することができますね。

$ amplify add auth
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito.

 Do you want to use the default authentication and security configuration? Default configuration with Social Provider (Federation)
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? Email
 Do you want to configure advanced settings? No, I am done.
 What domain name prefix you want us to create for you? amplifyauthfacebook8xxxxxxx-8xxxxxxx
 Enter your redirect signin URI: http://localhost:8080/
? Do you want to add another redirect signin URI No
 Enter your redirect signout URI: http://localhost:8080/
? Do you want to add another redirect signout URI No
 Select the social providers you want to configure for your user pool: Facebook

 You've opted to allow users to authenticate via Facebook.  If you haven't already, you'll need to go to https://developers.facebook.com and create an App ID.

 Enter your Facebook App ID for your OAuth flow:  9xxxxxxxxxxxxxx
 Enter your Facebook App Secret for your OAuth flow:  953a071121d811c668d9d1ee006f5bed

Successfully added resource amplifyauthfacebook8xxxxxxx locally

VueアプリケーションにAmplifyのプラグインを組み込み。

npm install --save aws-amplify aws-amplify-vue

とりあえず認証ができればいいので、それ用のコンポーネントを作ってやります。

src/components/AuthPage.vue

<template>
  <div>
    <button @click="signin">SignIn with Facebook</button>
    <button @click="signout">SignOut</button>

    <div v-if="isAuthenticated">
      you signined with
      <strong>{{ userEmail }}</strong
      >.
    </div>
  </div>
</template>

<script lang="ts">
import Amplify, { Auth } from "aws-amplify";

export default {
  name: "auth",

  async created() {
    Auth.currentAuthenticatedUser()
      .then(user => {
        this.$store.commit("setUser", { user });
      })
      .catch(error => {
        console.warn(error);
      });
  },

  computed: {
    isAuthenticated() {
      return this.$store.state.user !== null;
    },
    userEmail() {
      if (!this.isAuthenticated) {
        return "";
      }

      return this.$store.state.user.attributes.email;
    }
  },

  methods: {
    signin() {
      Auth.federatedSignIn({ provider: "Facebook" });
    },
    signout() {
      Auth.signOut()
        .then(data => {
          this.$store.commit("removeUser");
        })
        .catch(err => console.log(err));
    }
  }
};
</script>

src/views/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <AuthPage></AuthPage>
  </div>
</template>

<script>
import AuthPage from "@/components/AuthPage.vue";
import { Auth } from "aws-amplify";

export default {
  name: "home",
  components: {
    AuthPage
  }
};
</script>

gyazo.com

これでfacebookによるログインができます、、、と言いつつ一つ解決できていない問題があって、 ログインしてリダイレクトされた戻ってきたときにAuth.currentAuthenticatedUser()で認証したユーザーが取得できない。 一度リロードすれば取れるのだけど。。

ということで引き続き調べます。 今回書いたコードはここに置きました。

github.com

Ergo42 Towel のキーキャップを変えた

f:id:jacoyutorius:20200109215733j:plain

 

TALP Keybord でセール価格になっていたので購入。

もともとは MDA BigBang を購入するつもりだったのでこれ幸い。

 

talpkeyboard.stores.jp

 

MDA BigBang 2.0 は色が好みじゃなかったんだけど、妻から「ガンダムみたい」と言われ、確かになーと思い直した。

Ergo42 Towel を作った

f:id:jacoyutorius:20191220230039j:plain

 

 Ergo42 Towel

Ergo42という自作キーボードキットを作った。

yushakobo.jp

 
制作時間はだいたい4時間くらい。
LEDを付けていないのでその分制作時間も少なく、トラブルも不具合も全くなかった。
 
前回Helixを作ったときはロープロファイルのほうが向いているかなと思ったのだけど、遊舎工房とか他の方のビルドログを見てるうちにこのErgo42のシンプルな四角形に心惹かれてしまった。
あと、Erogo42は横に一列多いので、キーマップを設定しやすいかなと思ったのもある。
 

キースイッチ

一般的な自作キーボードキットにはキースイッチとキーマップが付属していないので別途購入する必要がある。
 
仕事の都合で東京に行く機会があり、たまたま時間が取れたので遊舎工房の実店舗に行って購入した。 
キースイッチは本当に実物で試して良かった。
買ったのはSakuriosというスイッチ。展示してあったキーボードを幾つか触ってみて、一番打ち心地が気に入ったキーボードで使っているスイッチを教えてもらったのがこれ。

f:id:jacoyutorius:20191220202034j:plain

 
あと、Artisanキーキャップというものを買った。
Artisanキーキャップとは手作りのデザイン性の高いキーキャップのこと。
↑の画像だとわかりづらいかもしれないけど、中にシャチが入っている。
手作りのため、それなりにお値段するのだけど、遊舎工房実店舗にこれてテンション上がっていたので財布の紐が緩んでしまった。
 

制作の様子など

f:id:jacoyutorius:20191220132544j:plain

ダイオードを折り曲げてはんだ付けしていく。

 

f:id:jacoyutorius:20191220135319j:plain

ダイオードのはんだ付けが終わった状態。

 

f:id:jacoyutorius:20191220141757j:plain

基盤にProMicroを取り付ける。


 

f:id:jacoyutorius:20191220202654j:plain

キースイッチをアクリルプレートにはめ込む。 

 

f:id:jacoyutorius:20191220215804j:plain

上面プレートをキースイッチと基盤で挟むかたち。あとは基盤の裏からキースイッチをはんだ付けすればほぼ完成。

 

f:id:jacoyutorius:20191220221956j:plain

キースイッチの取り付けが終わったら一度PCに繋いで全部のキーが動作するか確認する。
 

f:id:jacoyutorius:20191220223528j:plain

最後にキーキャップを取り付ける。とりあえずで以前作ったMint60で使ったキーキャップを取り付けた。いずれ別のキャップに変えたいと思ってる。
 

f:id:jacoyutorius:20191220223735j:plain

ArtisanキーキャップはESCキーの位置に取り付けた。
 
 
ということで完成したやつがこれ。
 
 

f:id:jacoyutorius:20191220223530j:plain

あとはキーマップの設定が必要な感じ。
このような文章を書くぶんにはいいのだけど、プログラムを書くには記号の位置をもっと使いやすく調整したい。
 
ということでこの記事はErgo42で書いています。

CloudFormation でECSEventsを作成すると CloudWatch Events IAM ロールが登録されないっぽい

Fargate 使っててなんだかよくわからん現象に遭遇したので改めて検証してみた次第。
 
何が起こったか
とりあえず箇条書きで。
  • Fargateで起動するECSイベントをCloudFormationで作成
  • しかし、指定時間になっても処理が実行されない
  • CloudWatchLogsを見ると、呼び出しに失敗している様子
  • 登録したECSEventsをManagement Consoleからみると、CloudWatch Events IAMロールが未設定("新しいロールの作成”)のまま
  • ECSEventsの編集ページにて、何も変更せずに更新するとCloudWatch Events IAMロールが(ecsEventsRole)が登録された
  • CloudWatch Events IAMロールが登録されて以降はEventsの実行に成功するようになった
 
検証
  1. ECSクラスタを作成する
  2. 1で作ったECSクラスタにECSEventsを登録するCloudFormationを実行する
  3. 2で作成されたECSEventsが正常に実行されるか確認する
(ちなみに2で登録するECSEventsでは適当にAPIリクエストを発行して取得した結果を標準出力する、というようなコードを適当に用意した。)
 
1
検証用のECSクラスタは流行りの AWS CDK の "aws-ecs-patterns"を使った。これを実行するとVPC, Subnet, ECSクラスタなどが一括して作成される。便利。
import cdk = require("@aws-cdk/core");
import ecs = require("@aws-cdk/aws-ecs");
import ecsPatterns = require("@aws-cdk/aws-ecs-patterns");
 
export class AppEcsVpcStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);
 
    const cluster = new ecs.Cluster(this, "AppCluster", {
      clusterName: "AppCluster"
    });
  }
}
 
CloudFormationのテンプレートは以下の通り。
Ref`で参照しているところは既に登録済みのリソースIDとかarnをセットしている。
(ところで、CFnに設定する値って、リソースIDの場合とArnの場合があって非常にわかりづらい。ドキュメントにも「〜の値」くらいにしか書いてないし。)
 
Resources:
  CloudWatchEvent:
    Type: AWS::Events::Rule
    Properties:
      Name: rubyapp-event
      Description: run ruby code
      ScheduleExpression: rate(10 minutes)
      State: ENABLED
      Targets:
        - Arn: !Ref ECSClusterArn
          RoleArn: !Ref ECSTaskRoleArn
          Id: rubyapp
          EcsParameters:
            LaunchType: "FARGATE"
            TaskCount: 1
            TaskDefinitionArn: !Ref ECSTaskDefinitionArn
            PlatformVersion: "LATEST"
            NetworkConfiguration:
              AwsVpcConfiguration:
                AssignPublicIp: ENABLED
                SecurityGroups:
                  - !Ref SecurityGroup
                Subnets:
                  - !Ref Subnet
 
3
それでCloudFormationを実行した結果。
 
やっぱり「CloudWatch Events IAMロール」が登録されていない。
この状態で何も変更せずに更新ボタンを押したところ、 `ecsEventsRole`がセットされた。
更新をフックに何も指定されていなければ`ecsEventsRole`をセットするような仕様になっているのかもしれない。 で、CFnの場合はそれが漏れていたって感じではなかろうか。
ecsEventsRoleが登録されて以降はECSEventsは正常終了になりました。
 
(追記)
この件についてAWSサポートに問い合わせた。
 
  • CFnからのECSEvents登録ではCloudWatch IAM ロールは自動作成されない。CFnで登録する場合は CloudWatch IAM ロールもCFnで登録してからRoleArnで指定する
  • CloudWatch IAMロールは CFnの`RoleArn`で登録する(ここは僕の設定値が間違っていた)
Resources:
  CloudWatchEvent:
    Type: AWS::Events::Rule
    Properties:
        ~
      Targets:
        - Arn: !Ref ECSClusterArn
          RoleArn: !Ref ECSTaskRoleArn
 
RoleArn に`ecsEventsRole`のArnを指定したところうまくいった。
 
うーん。
ちょっと悔しい気分なのは、
 
> RoleArn
> ターゲットの呼び出しに使用されるロールの Amazon リソースネーム (ARN)
 
ドキュメントにはこのように記載されているのだけど、
この説明文とconsole上のラベルの「CloudWatch IAM ロール」が同じだとはなかなか気づかないよ。。

Khruangbinが良い

先日フジロック2019の配信をYouTubeでぼけっと眺めていたのだけど、

21時頃に出演したKhuruangbin(クルアンビンと読むらしい。タイ語で"飛行機"の意味とのこと) がすごく良かった。

 

3人組のバンドで、ベーシストがクレオパトラみたいなおかっぱ頭のセクシーなお姉さんなのだけど、

ノリノリでフェンダージャズベースを弾く姿が連綿と続く女性ロックベーシストの系譜に連なる立ち振る舞いでめちゃくちゃカッコいい。

その割にしょっちゅうビビリ音を鳴らしてたり、およそ弦楽器プレイヤーと思えない長い爪をしていたりしててよくわからない。

ギターの兄ちゃんとステージアクションがシンクロしてたり、バンドメンバー以上の親密さを醸していたり(ホワイト・ストライプスみたいな、お前ら絶対何かあるだろ!っていう感じの)まぁとにかく目が離せない感じ。

 

浜松駅から10分くらい歩いたところに ZOOT HORN ROLLOという名前の、最適化されていない街の断片のようなライブバーがあるのだけれど、いつかそこで流してもらおうと企んでいる。

 

僕は August Twelve と Evan Finds the Third Room がお気に入り。

 

www.youtube.com

CSVファイルを読み込むだけのVueコンポーネントをnpmに公開しました


www.npmjs.com

 

こんな感じですね。

データを<table> に描画している部分はこのコンポーネント外での実装です。

 

https://i.gyazo.com/338e9c39b1fee39db63343c586b392b7.gif

 

https://www.npmjs.com/package/vue-csv-loader

 

 

 CSVファイルを選択後するとファイルを読み込んでヘッダ部分と実データ部分の2つの配列を作成します。

f:id:jacoyutorius:20190814113801p:plain

 

`loadSuccess`というイベント名で$emitされるので、親コンポーネント側で`loadSuccess` を定義してそこで読み込まれたデータを受け取ることができます。

f:id:jacoyutorius:20190814114039p:plain

 

propsなどはこのようになっています。

f:id:jacoyutorius:20190814114027p:plain

 

近々作らなくてはいけないアプリケーションのためにnpmパッケージとして切り出した感じなので、使い勝手とかエンコードとかあまり考慮されていませんがとりあえずということでー。

 

AWS CDK でVPCを作ってタグを付ける

仕事でECS使ってるんですけど、リソースタグ毎のタグ設定の仕方がよくわからなくて手元の環境でテストしてみよと思い立ったところ。

docs.aws.amazon.com

 

ところがこのチュートリアルやる前に

との記述があるではないか。

じゃあサクッと作っちゃいますか、と思ったものの、「コンソールから作るのもアレだし(アレってなんだ)せっかくだからAWS CDKでやっちゃおう」と思い至ったのでした。こういうのが良くない。

 

ということで CDKでVPCを作ってタグを付けたやつです。

 

f:id:jacoyutorius:20190723232209p:plain

 

タグの付け方はここに書いてあります。

docs.aws.amazon.com

 

f:id:jacoyutorius:20190723231844j:plain