VeeValidateでデフォルト値検査を外す話

福岡開発センターの野田です。
年度末ということで忙しい日々を過ごしています。

弊社では、Vuejs/Nuxtjsを使った開発を行っています。フロントでの値検査を行う場面も増えてきたと思います。ある案件でフロントでの値検査にVeeValidateを利用していたのですが、カスタマイズした検査が有効にならず何でだろうと調べてみました。有効にならなかったのは、Inferred Rules というものが有効になっていてためであることが分かりました。

Inferred Rules

https://vee-validate.logaretm.com/v2/guide/inferred-rules.html#example

この Inferred Rules ですが、例えば type=”email” に対して VeeValidate をかけると何もしなくても email のバリデーションルールが適用されるというものになります。

対象となるinput属性と値は以下になります(上記サイトより抜粋)。

AttributevalueRule
type“email”
type“number”
type“date”
type“datetime-local”
type“time”  or   depending on the step value
type“week”
type“month
minval
maxval
patternrgx
requirednone
maxlength“val”
minlength“val”

これを無効化する方法は以下のコードとなります。useConstraintAttrs: false のオプションを指定することでInferred Rulesの設定を無効化することができます。Inferred Rulesはカスタムルールより優先度が高いため、結構扱いが難しいな、と感じています。どこでも使われるようなもののためそういう実装になっているのでしょうけど、メッセージをカスタマイズしたいときは足かせになりました。

[/crayon]

こういう設定調整ができるのは、しっかりポイントが抑えられていて人気のライブラリであることを感じます。また何かTipsが出てきたときは紹介したいと思います。

Chromeでカーソルが点滅?!

福岡の野田です。
久しぶりの投稿です。

Chromeを使っていて、ふと点滅するカーソルが表示されるようになったことに気づきました。これは何だろうと調べてみたところ、「カーソルブラウジング」にたどり着きました。カーソル位置を分かりやすくするため点滅を行うことができる機能となります。対応しているのは他にEdgeなどもあるようです。

設定・解除については、F7キーを押下することで切り替えることができます。最初みたときは、スタイルシートの設定でこのような機能が追加されたのか?とびっくりしましたがそんなことはなくブラウザの機能でした。誤操作を避けるためにキーバインドのカスタマイズでF7から設定を外したほうが良いかもしれません。

何気ない違和感から調べてみると新しい発見があって面白いですね。また何かありましたら報告しようと思います。

AWS Lambdaを使った外形監視

福岡拠点の野田です。
AWSを使ったサーバー構築が最近増えてきました。今回は、AWS Lambdaを使った外形監視の方法を紹介しようと思います。

AWS Lambdaは、軽量なアプリケーションを動作するときに活躍するサービスです。5分おきのバッチサービス、管理画面でのSSRサービスなど、 常に常駐しておく必要がないプログラムを動かすのに適しています。 今回紹介する監視系のバッチもLambdaと相性のよいアプリケーションの1つとして考えています。

AWS Lambdaを使った外形監視の作成を以下の手順ですすめていきます。

  1. 関数の作成
  2. 関数コードの作成
  3. トリガーの追加

関数の作成

「1から作成」を選択します。関数名は「check_http」のような名前を付けます。ランタイムは、javascriptサーバーの「node.js12.x」を選択して関数を作成します。

アクセス権限については、「基本的な Lambda アクセス権限で新しいロールを作成」を選ぶとAmazon CloudWatch Logsの権限が付与されるので、これを選びます。

関数コードの作成

index.jsに以下をコピペします。

[/crayon]

ページ末尾の環境変数に以下のような監視対象URLを指定します。

ENV_URL https://(監視対象URL)

トリガーの 追加

EventBridge(CloudWatchEvents)を追加します。
ルールは、新規ルールでルール名を「every5min」を指定します。ルールタイプはスケジュール式で以下を設定します。

説明: 5分毎
イベントバス: default
スケジュール式: cron(0/5 * * * ? *)

あとは、CloudWatch側で以下のようなアラートルールを設定することで監視完了です。

Lambdaはいろいろな使い方ができると思うので、引き続き使っていこうと思います。

S3+CloudFront+Route 53を使った静的コンテンツ配信 Part 2 (lambda@edge編)

福岡拠点の野田です。

前回、S3を使った静的コンテンツ配信を実現しましたが、ちょっとカッコ悪い点がありました。

ドメイン直下については、 Default Root Object 設定すると https://サイト名/でアクセスしたときindex.html を参照するようにできます。ただし、サブディレクトリ配下はDefault Root Objectの設定が効きません。サブディレクトリ配下で/news/とアクセスしたとき、/news/index.htmlを参照するためにはlambda@edgeを使う必要があります。

/で終わるuriの場合に/index.htmlを参照する設定について、今回は以下の流れで設定を行います。

  1. lambdaを追加
  2. CloudFrontで使えるようにIAMを修正
  3. lambdaにトリガーを追加し、CloudFrontと関連付け

lambdaを追加

リージョンus-east-1のlambda画面から関数を追加します。ほかのリージョンではCloudFrontへのトリガーを作成できないため、正しいリージョンが選択されているか確認してください。

https://console.aws.amazon.com/lambda/home?region=us-east-1

lambdaは1から作る形で進めます。

・関数名:subdir-redirect (適宜適当な名前を設定してください)
・ランタイム:nodejs (バージョンはデフォルトでOK)
・アクセス権限:AWSポリシーテンプレートから新しいロールを作成
・ロール名:cloudfront-lambda (適宜適当な名前を設定してください)
・ポリシーテンプレート:基本的なlambda@edgeのアクセス権限

関数詳細ページが表示されるので、関数コードに以下を追加します。

[/crayon]

画面右上の「保存」を押下してコードを保存します。

CloudFrontで使えるようにIAMを修正

そのままでは使うことができないため、関数詳細ページ「アクセス権限」のタブを選択します。実行ロール「 cloudfront-lambda 」を編集し、末尾の「 IAM コンソールで cloudfront-lambda ロールを表示します。」のリンクをクリックします。

ロールの詳細ページから「信頼関係」のタブをクリックします。「信頼関係の編集」ボタンを押下して、以下のようにedgelambdaの設定を追加します。

[/crayon]

これにより信頼されたエンティティにedgelambdaが追加されます。

信頼されたエンティティ
ID プロバイダー lambda.amazonaws.com
ID プロバイダー edgelambda.amazonaws.com

続いて「アクセス権限」のタブに再度戻ります。+インラインポリシーの追加から以下のポリシーを追加します。

  • Lambda: GetFunction, EnableReplication (対象リソースは、先ほど登録したsubdir-redirect lambda のARNを指定)
  • IAM: CreateServiceLinkedRole(対象リソースはすべて)
  • CloudFront: UpdateDistribution(対象リソースは、展開するCloudFrontのARNを指定)

ここまでやってようやくlambda@edgeが使えるようになります。

lambdaにトリガーを追加し、CloudFrontと関連付け

仕上げにlambdaの関数詳細画面に戻ります。画面上の「アクション」から新しいバージョンを発行します。コメントは必要あれば適宜入力してください。

そののちにデザイナーから「トリガー」を追加します。トリガーの種類は、CloudFrontを選択します。ここでCloudFrontが選択できない場合はlambdaのリージョンが間違っていますので、最初からやり直してください。設定はデフォルトのままで以下のチェックボックスにチェックを入れます。

[/crayon]

追加ボタンを押下するとCloudFrontへの更新が入ります。Distributionの更新が終わるまでしばし待つと、晴れてサブディレクトリのリダイレクト処理を利用することができるようになります。

まとめ

lambdaというと単機能のAPIや軽量サーバーとして使うイメージが強いですが、実はいろいろなところに組み込めます。lambda@edgeを利用することでCloudFrontに対してヘッダーのカスタマイズ、 BASIC認証など多岐にわたって処理を組み込むことができます。静的コンテンツに対してちょっとした動的処理を行いたいな、というときはlambda@edgeの出番です。是非ご活用いただければと思います。

面倒なところもありますが、ひと手間かけるといろいろなことができるのがAWSの良いところ。いろいろエンジニアとしていろいろHackしていければと思います。

S3+CloudFront+Route 53を使った静的コンテンツ配信

福岡拠点の野田です。

WordPressで運用していた個人サイトをメンテしなくなったので、S3とCloudFrontとRoute 53を使って静的コンテンツ配信方式に切り替えてみました。手順の大きな流れは以下のようになります。

  1. S3にコンテンツを配置
  2. CloudFrontを設定
  3. Route53でCloudFrontへ振り分け

S3 にコンテンツを配置

まずは、wget で既存サイトを取得します。

[/crayon]

日本向けに配信することを考え、 S3 の東京リージョンにて新規バケットを作成して、上記取得したファイルを配置します。

S3における設定ですが、アクセス権限の設定を行います。静的コンテンツとして公開するため、以下のバケットポリシーのブロックをオフにすることで外部からのアクセスを行えるようにします。

  • 新規のパブリックバケットポリシーまたはアクセスポイントポリシーを介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックするオフ
  • 任意のパブリックバケットポリシーまたはアクセスポイントポリシーを介したバケットとオブジェクトへのパブリックアクセスとクロスアカウントアクセスをブロックするオフ

バケットポリシーは、以下のようなCloudFrontからの接続を許可する設定を行いますが、CloudFront側から設定ができるため、ひとまずスキップで大丈夫です。

[/crayon]

CloudFrontを設定

Create DistributionでCDNを新規作成します。

  1. Web/RTMPの選択でWebを選択
  2. Origin Domain NameにS3のバケットを選択
  3. Origin Pathは空欄でOK
  4. Origin IDは任意のIDを設定(S3-バケット名みたいな感じで設定しました)
  5. Restrict Bucket Accessは、YES
  6. Origin Access Identityは、 Create a New Identity。
  7. Grant Read Permissions on Bucketは Yes, Update Bucket Policy (これが先ほどのS3バケットポリシーに反映されますので、一応S3側でも設定されているか確認)
  8. Viewer Protocol Policyは、Redirect HTTP to HTTPS (httpからhttpsリダイレクト)
  9. Allowed HTTP Methodsは、GET/HEADのみで対応(CORSを考えるとOPTIONSまでやってもいいかもしれません)
  10. Compress Objects Automaticallyは、true(圧縮化。転送量削減)
  11. Price Classはベストパフォーマンス
  12. AWS WAF Web ACLは、None
  13. Alternate Domain Namesは割り当てるドメイン名を改行区切りで入力。
  14. 証明書については、独自ドメインで割り当てる場合、ACMに登録したものを選択。
  15. 残りはデフォルトで登録

Distribution作成後、 GeneralタブでEditボタンを押下して、以下を設定します。

  1. Default Root Objectにindex.htmlを設定

続いて Restrictionsタブを選択して、GeoRestrictionをEditします。

今回は、日本のみを対象とします。全世界を対象とするとコストと直結します。1日1000円以上かかってもいい!どんな攻撃もどんとこい!という方以外は、対象を絞ったほうが良いと思います(私もこれで当初1日放置して1000円かかってしまい冷や汗、急遽制限を追加しました)。

Route53でCloudFrontへ振り分け

仕上げにRoute53からCloudFrontへ振り分けします。A(IPv4アドレス)およびAAAA(IPv6アドレス)のエイリアス指定でCloudFrontにつなげることができます。

まとめ

Cloudは設定をミスると高額な請求が発生してしまうリスクはありますが、うまく使えば個人で使っても安く運用することができます。最近では予算設定や請求が高額になりそうなときにアラートも出せる機能もありますので、そうしたものを組み合わせて、安全に運用すると良いと思います。先月からの運用の感じだとアクセス数次第なところがありますが、100円~300円/月ぐらいで運用できそうな感じでした。

初心者にはおすすめはしませんが、興味ある方は是非チャレンジしてみてください。

Swagger-PHPでOA\PathItem()エラー

福岡拠点の野田です。
OpenAPI(Swagger)の仕様書を使っていますか?

PHPでは、アノテーションでOpenAPIを定義できるSwagger-PHPというものがあります。使うためには以下を実行します。

[/crayon]

対象のコントローラーを指定するとアノテーションで記載したコメントがAPI仕様書になるという素晴らしいライブラリです。swagger.ymlの書き出し方は、以下。

[/crayon]

ここで少しはまりどころがあります。
OA\Infoを定義したクラスには必ずOA\GetやOA\PutといったAPIをセットで定義しなければなりません。それをしないと以下のエラーで怒られます。

[/crayon]

ちょー分かりにくいエラーなので、私もはまりました。そんなときは汎用エラーレスポンスでも定義してしのぎましょう。

[/crayon]

これはライブラリ側でなんとかしてほしかったところではありますが、めげずにswaggerを使っていきましょう。

それでは、また!

nuxt.js環境を構築する

福岡拠点の野田です。

サーバーサイドでレンダリングするSSR(Server Side Rendering)を次の案件で使うことにしました。API側は慣れ親しんだLaravel。

最初に悩むのが環境構築。
どうしようか、というところで参考にしたのが、次の記事。

LaravelとNuxt.jsを同一レポジトリで管理するときの構成https://www.wantedly.com/companies/roxx/post_articles/84615

client フォルダ以下に環境を作る例ですが、とても参考になりました。以下おっかけになりますが手順になります。

[/crayon]

nuxtは起動フォルダ配下に.nuxtという一時ファイルを作成します。このため設定ファイルをclient以下に配置して、このフォルダを起動フォルダとします。

設定ファイル (nuxt.config.js)

[/crayon]

起動シェル(再起動シェル)は以下のような感じで作ります。

[/crayon]

ちなみにecho “” | はjenkinsから呼び出したとき、標準入力を要求されたので、それ対策で入れています。

このシェルを実行することでnuxt.jsサーバーが起動します。

nuxtは素のvueでやるよりも以下の点で優れていると思います。

  • 自動でルーティングしてくれる。
  • レイアウト機構を持っている。
  • API連携の仕組みも実装しやすい形で持っている。

VueやReactやAngularは、マイクロサービスをつなげる糊の役割をしているフレームワークだと思います。これからもっと深く使っていきたいと思います。

JQコマンドをおぼえた

福岡拠点の野田です。久しぶりの投稿です。

ある案件でAWSを扱っており、ELBからインスタンスが切り離されたか確認してほしいと連絡がありました。生憎、AWS Consoleへの接続アカウントをもらっていない状態で調べられない…と思ったのですが、aws-cliがインストールされてあるサーバーがあることに気づき、そちらで確認してみました。

ELBの一覧を表示するコマンドは以下のようなものになります。

[/crayon]

けれども、awsのコマンドで出てくる内容はjsonで縦に長い!必要な情報だけに整理したいときに役立つのがjq(恐らくjson queryの略)コマンドになります。jsonの中からDNSNameと紐づくインスタンスを見たい場合は、以下のようなクエリをjqに投げます。

[/crayon]

jqコマンドの基本は、配列のフィルターと生成。.から始まる要素がフィルターされる内容になります。{}や[]で配列を再構築します。詳しいやり方は以下をご参考ください。

https://dev.classmethod.jp/tool/jq-manual-japanese-translation-roughly/

すぐれものなのは、jsonからcsvを作れること。以下のような感じでフィルターと配列の再構築を利用すれば、@csvでcsvの作成も楽々です。

[/crayon]

zabbixと連携させたりとか、 レポート出力を簡易化できないかとか夢が広がりますよね?是非、jqを使ってより良いjsonライフを!

Jmeterログを攻略する

福岡拠点の野田です。
最近ひさしぶりにJmeterを使って負荷テストをしました。

Jmeterから実行結果をログに出力することができますが、XMLかCSVかjmeter.propertiesで選ぶことができます。

XMLは、ページアクセスに起因する問合せをすべて記録することができます。一方、CSVにおいては、画像、CSS、JSなど付随情報は、明示してシナリオを作成していない限りログに記録することができません。そのため、出力はXMLで出力していたほうが広くログを残すことができます。ここは迷わずXMLを指定してください。

付随する関連ログをすべて残すためには、以下のsubresultsをtrueで指定します。

実行コマンドの例を提示します。

HTMLのみのログに残すためには以下のような処理で加工することができます。

※個別ログのtestResult+必要なXMLタグで含まれる範囲で絞り込み。その後、css/jpg/png/js/svg/gif/icoを排除。

ここまでは、XML最高!なのですが、実は大きな欠点があります。実は、XMLログからはHTMLレポートが作成できません。

そんなときどうしたらいいか。

XMLからCSVを作ればオッケーです。そこで使えるのが、XSLT。

jmeter_xml2csv.xslt

XMLからCSVを変換するコマンド例は以下。

XMLからCSVに変換したファイルを使って、以下のコマンドで晴れてレポートを作れるようになりました。

他にもコマンドラインからプラグインを呼び出すことも簡単にできます。
元のログから集計結果を得たいときは以下。

※利用にあたって、標準プラグインと呼ばれるjarライブラリをlib/ext 以下に配置する必要があります。
https://jmeter-plugins.org/downloads/old/

こちらもご参考まで。

[Go] Go言語はじめました (#1):インストール

福岡拠点野田です。
気が付けば涼しい季節になりましたが、いかがお過ごしでしょうか。

Go 言語について動けていなかったため、重い腰を上げて取り組みたいと思います。Go言語でよく使われているのは、WebAPIやメール送信・集計などのバッチ処理だと思います。javaも高速に処理ができますが重量級なイメージがあります。起動もすばやく、軽量で高速に並列処理ができるのは大きな魅力があります。

第1回目となる今回はインストールを行います。

インストール

https://golang.org/dl/

インストールは至って簡単。ダウンロードしたファイルを解凍して配置するだけ。

.bash_profileなどにパスを追加してもらえればOKです。

GOROOT というのがダウンロードして配置したGo自体のインストール先になります。

GOPATH というのが各プロジェクトフォルダに相当します。ここで開発モジュールの配置先となり、コンパイルしてできた実行ファイルが $GOPATH/bin 以下に配置されます。

Go言語初心者に向けてどのように開発を進めていくのがよいかについて深堀していこうと思います。

ちなみに go get してエラーがでるときは OS のモジュールバージョンが古い可能性が高いです。yum upgrade してすべてのモジュールを更新しておきましょう。