はてなブックマーク

AppSync は AWS が提供するマネージド GraphQL サービスです。Amplify と統合することにより、スキーマさえ宣言すれば GraphQL の Query, Mutation, Subscription コードを自動生成します。バックエンド GraphQL エンドポイントやデータソースを構築し、即座に動く環境が手に入ります。 こちら は過去の記事ですが、リアルタイム掲示板アプリの主要機能を 15 分で作った例を紹介しています。 PoC のように使用する分には Amplify CLI を使用してサクッと開発してしまう方法が効果的ですが、実際のプロダクト開発ではそれだけでは不十分な場合が多いでしょう。複数環境へのデプロイの戦略、テストをどうするか、マイクロサービスバックエンドと接続するにはどのようなパッケージ構成にするべきかなど、課題が山積します。 本記事では AppSync

AWS Cognito は認証・認可を提供している AWS のサービスです。Amplify と統合することで、超高速に構築できます。Cognito を使用することで、API Gateway や S3 など他の AWS サービスとの統合がより簡単にできるようになります。 本記事では、Cognito を使用した React アプリケーションの実装例を紹介します。Cognito へのアクセスには amplify-js というライブラリを使用します。さらに React の Context.Provider という機能を使うことで認証に関連する処理をカスタムフックに集約する方法を考察します。 本記事で実装されたアプリケーションは以下のような動作をします。ログイン、ログアウト、サインアップ、確認メールなど。 本アプリケーションは Vercel にデプロイされています。 https://task-app

Auth0 は認証・認可サービスをクラウドで提供している SaaS ベンダーです。 「認証」という機能はどのアプリケーションにも求められる重要な要件ですが、プロダクトの本質的なビジネス価値を持たない場合が多いでしょう。Auth0 を使用することで、この「認証」機能という Undifferentiated Heavy Lifting な作業を排除できます。 本記事では、簡単な React アプリケーションを作成して Auth0 を使用した認証機能を実装します。また、作成したアプリケーションを Vercel（旧 Zeit now）にデプロイする方法を解説します。ユーザのサインアップ後の確認メールなどは SendGrid から送信されます。 以下は、本記事で紹介するアプリケーションの簡単な構成図です。また、本記事で実装されたアプリケーションは Vercel にデプロイしています。こちらからアクセ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? セッション管理について誤った認識を持っていたり、サーバのスケーラビリティを考慮しないままアプリケーションの開発を進めてはいけません。開発の終盤でサーバの負荷分散ができない、なんということになりかねません。 本記事では、Web 初心者向けにセッション管理の主要な２種類の方法について説明します。具体的な実装例として、Web サーバに express を使用しますが、基本的な考え方はどの言語、どの Web サーバでも同じです。 セッション管理とは そもそも、セッション管理とは何でしょうか。 ブラウザから Web サーバへの通信は HTTP で

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Serverless.inc 社より、Serverless Components がついに GA されました。 近年のアプリケーション開発では、いくつかの SaaS を組み合わせることで超高速に開発を行うことができます。例えば「認証は Auth0、ホスティングは Netlify、バックエンド API は AWS Lambda を使用する」といった具合です。このように複数のサービスを組み合わせることで、Undifferentiated Heavy Lifting な作業を排除できます。開発者は価値を生み出すビジネスロジックにのみ集中できる

GraphQL Mesh とは The Guild から GraphQL Mesh が発表されました。 🚀 GraphQL Mesh - Query Anything, Run Anywhere 🚀https://t.co/PlZpAC9b54 🎉 I'm very proud to announce our new open source library - GraphQL Mesh! Use #GraphQL to query: 🔹 openapi/Swagger 🔹 gRPC 🔹 SOAP 🔹 SQL 🔹 GraphQL 🔹 More! Without changing the source! Thread 1/5 pic.twitter.com/xo0G5smUwp — Urigo (@UriGoldshtein) March 23, 2020 GraphQL M

Artillery は yaml ファイルに宣言的にシナリオを記述し、シンプルなインタフェースで負荷をかけることができる Nodejs 製の負荷テストツールです。 本記事では Artillery を使用して簡単に WebSocket サーバの負荷テストを実行する方法を紹介します。 最小構成の WebSocket サーバ まずはじめに WebSocket サーバを実装しましょう。今回は Node.js を使用します。 必要最小限の機能だけを提供します。ws ライブラリを使用して簡単に実装しましょう。 const WebSocket = require("ws"); const wss = new WebSocket.Server({ port: 3000 }, () => { console.log("server is now listening localhost:3000"); });

現代の Web アプリケーションにおいて、キャッシュはもはや不可欠と言っていいくらい需要な技術でしょう。アプリケーションの負荷を軽減し、ユーザーへのレスポンスを高めます。 本記事では Node.js (Typescript) を使用したバックエンド API を実装する際に、どのようなキャッシュのテクニックが使えるか解説します。 ※なお、説明の簡略化のためエラーハンドリングなどは省略しています。 Node.js を使用した非同期バッチパターンとキャッシュ機構 本章では以下の３つの実装パターンを比較し、Node.js を使用したキャッシュを実装していきます。 キャッシュのないサンプルアプリケーション 非同期バッチ処理パターン キャッシュパターン 1. キャッシュのないサンプルアプリケーション キャッシュの実装をする前に、簡単な Web API で提供されるアプリケーションを考えます。 例えば、

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? draw.io はブラウザを使用してフローチャート、プロセス図、組織図、UML 図、ER モデル、ネットワーク図などを作成できる優れたツールです。作成した図は xml ファイルとして保存でき、GitHub との連携もシームレスに行われます。3 年ほど愛用しているツールですが、隠された使い方がたくさんあります。すぐに忘れてしまうので取りまとめておきます。 「こんな使い方あるよ！オススメだよ！！」という方はぜひ編集リクエストをいただければ追記していく予定です 😊 ※ 主に参照している文献は以下、公式ブログは非常に分かりやすいのでオススメで

【動画付き】Next.js の Server Side Rendering (SSR) を理解する。create-react-app と比べてみた。JavaScriptNode.jsReactNOWNext.js Next.jsのサイト、かっこいいですよね 😊 クールで、パフォーマンスにも優れていてエンジニアを魅了します。 日本では Nuxt.js が人気のようですが、個人的には Next.js を推しています。 さて、先日 Next.js のチュートリアル を通してサーバサイドレンダリングについて考えさせられる機会がありました。本記事では、そもそもサーバサイドレンダリングのメリットとは？というところから初めて、create-react-app によって実装された SPA と、nextによって実装された SSR ではどのような違いがあるのかを検証してみました。 以下の動画は本記事のサマリ

負荷テストとサーバレス 負荷テストに対する考え方は時代とともに変化してきました。従来はサーバスペックやシステムの限界性能を測るという考え方でしたが、クラウドネイティブなシステムではそれに加えて、システムの弾力性（スケールアウトのしやすさ）も考慮する必要があります。 本記事では、負荷テストによるシステムの弾力性の評価と、改善する方法についてツールの具体的な使用方法やアプリケーションのチューニング Tips を交えて説明します。システムの弾力性を評価するために、プロダクション環境でのユーザからのリクエストを想定したロードテストを検討します。 ロードテストでは以下の項目を検証します。 ドリップテスト ドリップテストは通常、数日間にわたって行われます。通常のバックグラウンド負荷レベルをシミュレートします。遅延またはエラー率の増加が見られる処理を特定します。 スラムテスト スラムテストは、トラフィッ

本日の reinvent でのリリースで衝撃のアップデートがたくさん出ましたね。EKS on Fargate や SageMaker の大幅アップデートも魅力的ですが Lambda の常識をくつがえす RDS のプロキシ機能が登場しました 🎉 ついに出ました！これでLambdaからRDS使うの怖くなくなります。Lambdaからも使えるコネクションプールマネージャ。これでLambdaとRDBMSの相性問題は先日のVPCの改善と合わせて解消されますー。SQL最高！！ / “Using Amazon RDS Proxy with AWS Lambda | AWS Compute Blog” https://t.co/YWgIu19GoH — Keisuke69@AWS re:Invent (@Keisuke69) December 4, 2019 Lambda から RDS に対するアクセスは

NestJSは、TypeScriptで記述するバックエンドアプリケーションフレームワークです。デフォルトで DI(Dependency Injection) の仕組みをサポートしており、テスト可能な構成を簡単に作ることができる特徴があります。 今回の記事ではNestJSを使用して最もシンプルなGraphQLサーバを構築します。 ↓完成イメージ GraphQLの基本 GraphQLは、RESTエンドポイントのように煩雑に管理されたエンドポイントではなく、１つのエンドポイントに対して厳密に型指定されたスキーマとしてAPIを実行します。 GraphQLについて深くは解説しませんが、以下のリンクがとても参考になります。初学者は一読しておくことをオススメします。 公式 チュートリアル youtubeのチュートリアル NestJSでGraphQL NestJSを使用したGraphQLの開発には２つの方

【初心者向け】JavaScriptの非同期処理を理解する　callback、Promiseそしてasync/awaitへJavaScriptNode.js初心者向け 非同期処理は最近のフロントエンド開発において、もはや必須ともいえるようになってきました。 WebAPIに対して問い合わせる際や、ファイルを読み込む処理などJavaScriptではいたるところで非同期処理を実装する機会があります。非同期処理にすることでパフォーマンスを向上するようにNode.jsが設計されていることもあるのですが、同期的な処理を得意とする言語ばかり書いてきた人からするとどうしてもJavaScriptの非同期処理は受け入れづらいところがあるようです。 今回はJavaScriptの非同期処理として実装される３パターンを理解してみましょう。 コールバックによる実装とその地獄 コールバック地獄を解決するPromiseによ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに 本日からAPIGatewayでWebSocket APIを構築することができるようになりました！！ 従来、WebSocket通信ができるアプリケーションやAPIを構築するためにはWebsocket通信の接続を管理するホストとなるサーバを立てておく必要がありました。 よくやる構成としては以下のようなものだったのではないでしょうか？ アクセスはALBで負荷分散したいが、EC2にステートを持たせられないのでWebSocket通信の接続情報はElasticCacheなどに退避させておくことでスケールする環境をなんとか作るといった具合でしょうか。 この構成は安定した作りではあるものの、個人的には の３重苦で、あまり好きではないです。昔苦労したなぁ・・・ そこで待望のAPIGatewayがWebSocketをサポートした（2018年12月19日から）とのことらしいので早速使ってみようと思いま

$ aws ec2 describe-instances { "Reservations": [ { "Instances": [ { "Monitoring": { "State": "disabled" }, "PublicDnsName": "ec2-54-165-183-11.compute-1.amazonaws.com", "State": { "Code": 0, "Name": "pending" }, "EbsOptimized": false, "LaunchTime": "2018-07-07T09:45:37.000Z", "PublicIpAddress": "54.165.183.11", "PrivateIpAddress": "172.31.26.36", "ProductCodes": [], "VpcId": "vpc-42cd1e3b", "State

はじめに 社内で週１の機械学習の勉強会を主催しています。G-awaです。 勉強会は👇の本を輪読しながら、プログラムも書いていく方式で進めています。 プログラムも書きながら勉強会を進行していますし、 毎回いろんな人が参加するので、いちいちその人に合わせて開発環境をととのえるのが面倒でした。 それに、実行した履歴をどう残して振り返ろうかと考えていたのですが、とてもいい方法がありました。 それが**Jupyter Notebook**です。 Jupyter Notebookとは Jupyter Notebookは Webページ上でPythonのコードを実行して、 それを履歴（ノート）として保存できるツールです。 さらにWebページとして、Markdown形式でのコメントの記述にも対応しているので 勉強会メンバーに共有する際にはもってこいのツールなんです。 こちらをみればJupyter Note

AWS LambdaとAPI Gatewayを使いこなすためにいい練習になるかなと思って SlackからLambdaをキックしたり、起動したLambda functionのログとかをSlackに通知するような仕組みを作ってみる。 構成はこんな感じ この構成ができれば、いわゆるサーバレスアーキテクチャが出来るってことになるのでなかなかアツい。 Lambdaが出来てからサーバレスアプリケーションが最近注目を集めてますよね。 それにbotのためにサーバー（コンテナ）を立てる必要もなくなるのでエコな構成になるんじゃないだろうか。 それではさっそくチャレンジしてみる。 AWS Lambdaについて Lambdaを触ったことがないって人にはこの記事がおすすめ。細かく丁寧に説明されています。 http://qiita.com/s_s_k/items/b584435120e99d63975b Lambda

久しぶりの投稿です。G-awaです。 今日は久しぶりにRailsとかアプリの話をしようと思います。 0. レビューと一緒に動作確認もしたい！ みなさんはGithubでPullRequest(以下PR)をレビューしていて、他の人のソースコードを読んでいるとき 「あー少し動かして見たいなぁ」とか「画面のイメージはどんな感じなのかな？」とか思ったりすることはありませんか？ 実は自分もこんなことを思っていまして GithubのPRが上がるごとにそれをwookしてきて、jenkinsがdocker立ち上げて…ビルドして…みたいな構成を描いていました。よし作ってみよう！と思って、ちょっとググっていたら実はサービスとしてもうすでにあるんですね、みんな同じことを考えているものですね そのサービスというのがHeroku Review Appsです。HerokuはRailsチュートリアルをやったことある人なら