1 - 15 件 / 15件
GraphQL スターターパック | Prisma + NestJS + Next.JS製 個人ブログサイトをCloud Runで運用しよう 「GraphQLの仕様はなんとなく知っているけど、それを使ってどうアプリを作るのかいまいちイメージがわかない」 この本はそんなスキマを埋めるべく書きました。 近年ではReactをはじめフロントエンドの選択肢が豊富になっており、フロントエンドとバックエンド間のやりとりにはより汎用的かつ効率的な方法が求められます。 GraphQLはその選択肢のひとつです。本書では NestJS で GraphQLバックエンドを実装し、それをNext.jsから利用して、個人ブログサイトを構築してみます。 GraphQL開発の流れを体験し、ご自身のアプリ開発に役立ててください。 v1.10 refactor github deploy
はじめに 仕事で使用することになった NestJS について、公式の NestJS Fundamentals Course やドキュメントなどで勉強を進めているのですが、新しい概念が次々と現れるため消化しきれなくなってきました。そこで、まず全体の俯瞰図をしっかりと頭に入れるために、公式ドキュメントの Overview に出てくる範囲の概念を図解して整理し、また各々の役割やプロジェクト内のどこにどのように設定していくかについてまとめることにしました (逆に、大枠とは関係ない部分については大胆に省きました)。 対象読者としては、簡単な CRUD アプリケーションなどを NestJS によって作成したことがあり、基礎的な概念や構成要素について何となくは把握したものの、どうもスッキリとは理解できていない気がする、というような方を想定しています。 この記事が自分のような NestJS 入門者のお役に
今回は、fragmentを活用するためにパターンCを採用しており、厳密には、以下のように方針を定めています。 SSR時のクエリ発行: ページコンポーネント単位 CSR時のクエリ発行: CSRが必要なコンポーネント単位 この際、取得したqueryの結果をどのようにfragmentへ変換するかというのがポイントです。 そこで、graphql-anywhereの filter メソッドを用いることで、クエリ結果をfragmentへ変換します。 以下は、簡略化されたクーポンページの実装例です。 type DetailPageProps = { // GraphQLクエリの結果 data: Query } const DetailPage: FunctionComponent<DetailPageProps> = ({ data }) => { // couponはGraphQLのCouponスキー
ソウゾウの Software Engineer をやっています、@mookjp です。 8/10 の記事「メルカリShopsの技術スタックと、その選定理由」では、メルカリ Shops のアーキテクチャについて、その全体像を紹介しました。 この記事では、そのうちの BFF(Backend for Frontend) レイヤとして用意した GraphQL サーバについて、NestJS を使った実装例を交えて紹介します。 GraphQL とは GraphQL サーバ周辺の構成 NestJS とは GraphQL Module NestJS で Code First なスキーマ定義をする Object types の定義 Query と Mutation の定義 GraphQL スキーマの生成 スキーマの Breaking Change (破壊的変更)を防ぐ DataLoader を使って Bat
はじめに はじめまして、ユーフォリア開発部エンジニアの山本未知彦です! このたび、ユーフォリアではJRFU(日本ラグビーフットボール協会)協力のもと、ラグビー選手の育成・強化のためのフィジカルデータベースシステムSCOTのリリースを行いました。(詳しくはこちらのプレスリリースをご覧下さい) 本記事では、SCOTのWebアプリケーション部分のアーキテクチャ紹介について、その技術選定理由と実際に開発してみて感じた良い点・気になった点をご紹介したいと思います。 SCOTのアーキテクチャ選定 まず技術選定の話をするに際して前提となるユーフォリア開発部の体制を説明します。当時、開発部にはエンジニアが2名しか在籍しておらず、SCOT開発に際しては業務委託の方々に協力いただいての開発となりました。そのため、技術選定においてはコードのレビューのしやすさと、仮にプロジェクト途中で人員の入れ替えが発生した場合
経緯 ここ6,7年くらいはバックエンドに関してはRails + EC2/ECSあたりのAWS環境を中心に過ごしてきたが、昨今はフロントエンドでReact/Vue + TypeScriptを書く機会も増えている。なのでこの際NestJS等でバックエンドを書けるようになれば言語のコンテキストスイッチの切り替えが容易になりそうと思った(ちなみにモバイルアプリはFlutterで書くのでDartだが、ではDartでバックエンドを書くかと言われると一人でそんな勇気はないわ...となるのでひとまず置いておく) 最近はinputとoutputを型注釈によって守れたりすることの主に開発体験方面への恩恵が個人的に大きくて、Rails以外で安住の地を見つけたいとは予々思っていた。なので先に挙げたNestJSに全ベットするわけではないにしろ何かしらフレームワークは試していきたい。 AppEngineは大昔に少し触
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? サービスについて Skillfulsというプログラマのスキルのレベルを記録して、その情報を元にスキルマップを簡単に作ることができるWebサービスです。作ったきかけは、僕自身が様々な技術を扱ってきて、自分のどのスキルがどのくらいできるのだろう?という疑問を可視化して解決できないかと思ったことです。 また、個人のスキルをデータとして蓄積すると、それを活用して開発チームのメンバーのスキルマップを簡単に作れると気づき、スキルマップ作成機能もつけてみました。 スキルマップはチーム内で技術の得意、不得意を一覧で見ることができ、技術選定の参考や特定の
import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (error) return <div>failed to load</div> if (isLoading) return <div>loading...</div> return <div>hello {data.name}!</div> } この例では、useSWR フックは key 文字列と fetcher 関数を受け取ります。 key はデータの一意な識別子(通常は API の URL)で、fetcher に渡されます。 fetcher はデータを返す任意の非同期関数で、ネイティブの fetch や Axios のようなツールを使うことができます。 このフッ
この記事はUbie Engineering Advent Calendar 2023の一日目です。よろしくお願いします。 背景 ユビーのシステムは言語が多様化してきたことにより、認知負荷の増加や運用負荷の増加、開発支援に仕組みづくりかけるコストの増加などの問題が発生していました。この課題を解決するためにNode.jsとGoに言語を絞っていくという意思決定をしたのが昨年です。これについては以下の記事で詳しく解説しています。 ちょうど去年のアドベントカレンダーの記事なのでこれから一年経ちました。ここでは以下のように述べられています。 Server-Side Kotlin などで書かれている既存サービスを、この技術選定の文脈でリプレイスすることは今のところ考えていません。 ただし、多くの既存サービスはドメインたくさん抱えすぎ問題があったり、色々とレガシーだったりして、徐々に別サービスに切り出して
こんにちは。ROBOT PAYMENTでエンジニアをやっております 牧野です。 今回は新規プロダクトの立ち上げに伴い開発言語からインフラ設計まで0→1でサービスリリースするのに必要な技術選定を行いました。 その際の選定理由や、実際に開発を進めていて得た所感などを書いてみたいと思います。 私は主にバックエンド(フロントエンド以外)を中心に技術選定を行っためそちらを中心に書かせていただきます。 チーム規模 選定技術 TypeScript NestJS GraphQL PostgreSQL AWS App Runner まとめ チーム規模 バックエンドエンジニア2人 フロントエンドエンジニア1人 PM 1人 デザイナー1人 上記を1チームとして最短距離でリリースすべくスクラム開発を行なっています。 既存の請求管理ロボ開発においては、厳密ではないですがコンテナ運用や監視ツール、CICDなど機能開発
ここ数年まともにサーバーサイドをやっていないなぁとかおもいつつなんやかんやあってNestJSを数日ほど触ったりドキュメントを読んだりしてたので初心を忘れないようにメモ。 いちおうTypeORMだけは出始めにちょっと使ってた。 理解度が高まったら気分が変わるかもしれないです。そしたらもっかい日記書きます。 てか全体的に難易度高くないこのフレームワーク?求められるリテラシー高くない? お気持ち表明 前提なんですが、僕はこのフレームワークのことをまだあまり好きになれていません。オブラートを外してのべると、すでに半分くらい嫌いです。 良いとおもったところ 色々なライブラリをつけ外しして使える つまりNestJS自体が提供している機能はそれほど多くないと言う意味ですね。 そこそこ柔軟に書ける ↑で述べているように、プラガブルなんで例えばORMだってTypeORM使ってもいいしPrisma使ってもいい
今作ってるAPIでは初めてNest.jsを使ってるんだけど、認可処理をどうしようかと考えたのでそのメモ。 ちなみにこの投稿では簡単な定義として認証(Authentication)とは利用者の本人確認、つまり通信の相手が誰であるかの確認とする。一方、認可(Authorization)とは利用者がシステム内、サービス内で実行できる操作の権限とする。 前提 TypeScript Nest.js Prisma Firebase Authentication 認証自体はFirebase Authenticationを使っているので、認可をどうするかが話の主眼。 なお、前提として認証はクライアントサイドでFirebase Authenticationが認証時に発行するJWTのトークンを取得してAuthorizationヘッダにBearerトークンとして渡すよくあるやつで対応しますが、ここに関しては本投
はじめに NestJS はサーバーサイド TypeScript のフレームワークとして注目しています。手元で試すべく触っているうちに、せっかくならデプロイしたいという気持ちになりました。デプロイ先の選択肢はいろいろとありますが、最近は Google Cloud を触っていることもあり Cloud Run へデプロイしてみることに。この記事にデプロイした記録を残します。 結論的な意見 NestJS(というかNode.jsアプリ)を Cloud Run へデプロイするためには以下の選択肢があります。 ソースコードのみ用意して gcloud run deploy で全部おまかせ ソースコードとDockerfileを用意してあとは gcloud run deploy でおまかせ ソースコードとDockerfile、Cloud Build トリガーを定義して Artifact Registry から
はじめにNestJSを1年ほど使っている。未経験の状態からすぐに高い生産性を発揮してくれた、素晴らしいフレームワークだ。 様々な機能を持つが、中でも特徴的なのはモジュールシステムだろう。 Documentation | NestJS - A progressive Node.js frameworkNest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScr...This helps us manage complexity and develop with SOLID principles, especially as the size of the applicatio
I'm experimenting with Nestjs by trying to implement a clean-architecture structure and I'd like to validate my solution because I'm not sure I understand the best way to do it. Please note that the example is almost pseudo-code and a lot of types are missing or generic because they're not the focus of the discussion. Starting from my domain logic, I might want to implement it in a class like the
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く