ゆずめも

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

dockerでフロントの開発環境を作ろうとした話

javascript Docker

こんにちは、ソウルジェムが日々濁っているゆずです

タイトル通り今回は開発環境をdocker化しようとした話なんだけど結果的に実現できず妥協したので、いい方法知ってる人はtwitterなりで教えていただけると嬉しいです

tl;dr

  • ローカルでyarn installして、ビルド自体はdocker上でやるようにした
  • ローカルでyarn installしとかないとエディタが型解決したりできない
  • ビルドした成果物だけが欲しい時はdockerさえあれば成果物だけ取得できる

動機

本番は使わせてもらえなさそうなので、開発環境ならdocker化しても文句言われないしぼっちプロジェクトチームなのでバレないだろうと思いたち、とりあえず手元にあったフロントのプロジェクトをdocker化にチャレンジしてみた

実現したいこと

docker-compose up -dしたら開発に参加できる*1

やったこと

とりあえずdocker-compose.yml書く

既に1000000煎じくらいなので誰かがやってるだろと、検索したらこれだよみたいなの見つけた

qiita.com

これを参考にdocker-compose.yml書いた

version: "3"
services:
  build:
    image: node:10
    working_dir: /app
    restart: always
    command: yarn run watch:dev # yarn install && webpack -d -w
    volumes:
      - .:/app
      - node_modules:/app/node_modules
volumes:
  node_modules:
    driver: local

これでいいかーという感じだったが、これだとエディタ（例えばVSCodeとか）がimport解決できないし、git cloneした時にnode_modulesがdocker権限でできてしまいyarn installできなくなってしまう

結局

.gitkeepみたいなの置くのは嫌だったので、結局volumesにnode_modules以外のビルドに必要なファイルを個別で指定するようにした

version: "3"
services:
  build:
    image: node:10
    working_dir: /app
    restart: always
    command: yarn run watch:dev # yarn install && webpack -d -w
    volumes:
      - ./public:/app/public
      - ./src:/app/src
      - ./package.json:/app/package.json
      - ./tsconfig.json:/app/tsconfig.json
      - ./webpack.config.js:/app/webpack.config.js
      - ./yarn.lock:/app/yarn.lock
      - node_modules:/app/node_modules
volumes:
  node_modules:
    driver: local

基本的にはsrc以下が増えていくはずなので、volumesを変更することって無いだろうなということで、これで少しの間開発していこうと思ってる

これで一応docker-compose up -dとかして、手元でyarn installすれば開発できる*2

*1:結果的には妥協した

*2:この2度手間感なんとかしたい…

react-chartjs-2の線の太さを変更する

javascript

なんかドキュメントとして載っている箇所を見つけられなかった*1

github.com

これをダウンロードしてnpm run examplesを実行した結果で動作を確認する

変更方法

examples/src/components/line.jsの中の、datasetsプロパティの中にborderWidthを設定して値を変更すると線の太さを変更できる

borderWidth: 1

f:id:yuzu441:20180711110413p:plain

borderWidth: 30

f:id:yuzu441:20180711110730p:plain

これで変更できることは確認できたんだけど

表の上の項目名？の所まで線が太くなってしまった…
ただここまで太くすることも無いだろうし、基本は困らないかなと考えてる

*1:wrapperなのでchartjsの方見てって事なのか？

CognitoをNode.jsから使ってTokenを手に入れる

aws

AWS勉強しといて（自腹）という死ぬほど雑な指示を会社から受けて、数日が経ちました
どうも、6月の請求額が0円で安心したゆずです

cognitoとは

Amazon Web Serviceが提供する認証サービス

モバイルだったりWebサービスだったり色々なもので使えるもので ユーザー名／メールアドレス＆パスワードの認証のみならず、Google, Facebookなどのログインもやってくれるすごいやつ*1

MAUが50,000までは無料なので、気軽に試せますね

実は認証以外にもユーザーデータの端末間同期取ってくれる機能とかあるっぽいですがそこらへんは別の機会に*2

今回のゴール

ユーザー名・パスワードで認証してJsonWebTokenを取得する

conitoの設定をする

ユーザープール作成

cognitoの設定画面に行って、「ユーザープール管理」から「ユーザープール作成」でユーザープールを作成。今回はデフォルト設定を基本そのまま使う。
パスワードの制約が面倒だったので、テスト用だしとポリシーページで自分は緩めました（画像はデフォで作った所の写真なので緩くなってません）

f:id:yuzu441:20180702144040p:plain

作成したら「プールID」というのを後で必要になるのでメモ帳か何かにメモっておいてください

ユーザー作成

「ユーザーとグループ」をクリックして、APIからもユーザーは作れるのですが面倒なので手動でユーザー作ります

f:id:yuzu441:20180702144626p:plain

f:id:yuzu441:20180705125344p:plain

アプリクライアントの発行

ユーザーの作成が完了したらアプリクライアントIDを発行します 左のメニューから「アプリクライアント」を選択して、「アプリクライアントを追加」するとアプリクライアントIDが発行されます

f:id:yuzu441:20180705132845p:plain

このアプリクライアントIDも後で使用するためメモ

フェデレーティッドアイデンティティの設定

フェデレーティッドアイデンティティの設定画面に移動し、IDプールを作成します

ここで認証プロパイダのCognitoタブに、メモしたプールIDとアプリクライアントIDを設定し「プール作成」を選択します

ロールの設定は今回は特に変更せず次へ

IDプールが作成されたら作成したIDプールを開き、右上の「IDプールの編集」をクリックし「IDプールのID」をメモします

認証が通ることを確認する

認証が通ることを確認するコードを書きます

aws-cognito-identity-js前はあったっぽいですが、今はAWS-Amplifyを使うべきみたいです

www.npmjs.com

コードを書く前に

書き始める前に以下の項目が必要です*3

  • identityPoolId
    • 作成したフェデレーティッドアイデンティティを開いて、右上の「IDのプールの編集」をクリックしたら出てくるページに書いてる
  • region
    • cognitoを作成したリージョン
  • userPoolId
    • 作成したユーザープールの全般設定の1番上に「プールID」として定義されている
  • userPoolWebClientId
    • 作成したユーザープールのアプリクライアントページに「アプリクライアントID」として定義されている

書いていく

AWS Amplifyに書いてるコードを使ってログインできることを確認する*4

yarn add aws-amplify isomorphic-fetch

isomorphioc-fetchはNodeで試したいため導入しています

以下はtokenが取れることを確認するためのサンプルコード （実際に使うときはusernameとか入力値使えばいい）

require("isomorphic-fetch")
const Amplify = require("aws-amplify")
Amplify.default.configure({
  Auth: { // 以下の項目にメモったものを書く
    identityPoolId: "",
    region: "",
    userPoolId: "",
    userPoolWebClientId: ""
  }
})

// 作成したユーザーのユーザーネーム
const userName = "nogi"
// パスワード
const pw = "hogehoge"

Amplify.Auth.signIn(userName, pw)
  .then(user => {
    // 初期ログインのユーザーはパスワードの変更を求められる
    if (user.challengeName === "NEW_PASSWORD_REQUIRED") {
      // パスワードの変更（今回は同じものを設定している）
      return Amplify.Auth.completeNewPassword(user, pw, {})
    }
    return user
  })
  .then(user => console.log(user.signInUserSession.idToken.jwtToken)) //tokenを表示
  .catch(e => console.error(e))

これでトークンが取得できて表示されるはず

まとめ

challengeNameにNEW_PASSWORD_REQUIREDと書かれていたので パスワードを変更しないと行けないのはわかったけど、completeNewPassword使うってのが気づけなくて大変だった

自分の探し方が下手なのかcognitoの使い方よくわからん問題 とりあえずログインできたので、次api gatewayあたりと連携して認証してるユーザーがapi叩けるみたいなのやる

*1:たぶんFirebase Authenticationとかが類似サービスです

*2:AWS Black Belt Online Seminar 2017 AWS Cognito

*3:https://aws.github.io/aws-amplify/media/authentication_guide#manual-setup

*4:AWS Amplify - Sign In