バックエンドエンジニアがNext.jsのApp Directoryに夢を見る - ぷらすのブログ
こんにちは、@p1assです。 最近、Next.js 13 から beta で導入されている App Directory を趣味で触っているのですが、今まで SPA を採用しづらかった事業領域でも React のエコシステムを使えるようになりそうな予感がして、ワクワクしています。 このブログでは、今までどういった課題があり、Next.js の App Directory がそれをどのように解決するのかを紹介します。 なお、内容はあくまで考察であり、実際に運用をしているわけでない点に注意してください。 これは「夢」なのです。 SPA に移行しづらいシステムたち レンダリングの移り変わり Angular や React、Vue.js が登場する前、HTML のレンダリングの多くはテンプレートエンジンを介して行われていました。 Rails や Spring、Django といったフルスタックフレ
フロントエンドとSPA職人の目指したものの歴史と概略
年末年始にフロントエンド論みたいな記事をいくつか見たが、僕ら古のSPA職人がやってきたフロントエンドという職域と目指していたものが失伝しかけている気がするので、ここに時代ごとに何を考えていたか、雑に書き殴る。 注意点として、 2004から始まるが、自分がプログラミングを始めたのが2010, 業務としてコードを書き始めたのが 2012 なので、解像度が高いのはそれ以降になる。 tl;dr 2004: 動き出す HTML 2011: 構造化のはじまり 2015: 贅沢品としてのSPAとコミュニティ分化 2017: 貧者のSPA 2019: 守破離としてのパフォーマンス 2004: 動きだす HTML AJAX の時代。要は XMLHTTPRequest で取得したコンテンツに応じて、動的書き換えをDOM書き換えを行うこと。今では名付けるほどでもない操作だが、HTMLが静的なものをやめたことは、
GraphQL で REST API を作る - 技術的な挑戦と、それを支える文化の話 - LayerX エンジニアブログ
バクラク事業部の Product Enabling Team でソフトウェアエンジニアをしている @izumin5210 です。 この記事は LayerXアドベントカレンダー(概念) の54日目の記事です。 バクラクのリソースを提供する REST API を開発するにあたり、その基盤を GraphQL をベースに実装する、ということをしました。 なかなかにチャレンジングな選定であり、これを入社してすぐ作っているという背景も含めておもしろい話だと思うので、技術的な話と文化的な話をあわせて紹介させてください。 「GraphQL で REST API を作る」とは？ まず「GraphQL で REST API を作る」というのが見慣れない文字列なのではないでしょうか？ 前提を揃えるために目指す形を明確にしておくと、だいたい以下のようなものです。 外から見た API は REST に従っており、H
僕らを縛る Node.js という呪いについて
これ僕らの物語であり、僕と君の物語であるかもしれない。 数日前、友人が言った。「久しぶりに Rails を書いたけれど、Node.js の良さに敵わない」と。 その言葉に同意しながらも、他方で少し不思議に思う。 いつから僕らは Node.js しか使わなくなったのか。あれだけ話していた Rails などの多くの Web 技術にときめかなくなったのか。と。 もちろん、使えないというわけではない。寧ろ今現役で十分な活躍をしているフロントエンドの人間は、等しく皆「主役であるバックエンドのサブとして存在するフロントエンド」を経験してきている。 書こうと思えば書ける。だがその中で、敢えてフロントエンドとその技術を選んできた。 だけど今はどうだろう。フロントエンドエンジニアはもはや「JavaScript を扱うソフトウェアエンジニア」となり、一般的なバックエンドは勿論、Node.jsが一級市民として存
SPAはコストが高いのか | foo-x
なぜ僕が「SPAはコストが高い」と考えているのか を読みました。 「反論お待ちしています」とのことなので、書いてみます。 結論としては、 コストが低いのは慣れているほうだよ。 どっちも使えるならSPAのほうが低いよ。 です。 前提 元記事で挙げられている前提をまとめます。 用語 SPAとは、クライアント側でビューを構築する方式を指す MPAとは、サーバ側でビューを構築する方式を指す 背景 エンジニアのスキルはあまり高くない 開発期間は1.5年未満 PMFを意識したフェーズであり、チャレンジを繰り返す ログイン機能が存在するサービスを作る コストの定義 エンジニアの採用のしやすさ サービス開発の 初速 サービス開発の 継続性 分業のしやすさ、手伝ってもらいやすさ web標準の挙動の実現のしやすさ セキュアなデータを流出する可能性の高低 バグがあった時の気づきやすさ / 対応のしやすさ ドキュ
ランニングコストほぼゼロから始めるスケーラブルな本番環境
はじめに 私は個人開発で一山当てたいと常々思っていて、そのためにいくつかヒットしそうなサービスのアイデアがあります。エンジニアであればアイデアを具現化することに躊躇してはいけないと思うわけですが、一度リリースしてしまうとランニングコストが発生するわけで、仮に全く人気がでなかったとしたらランニングコスト分の赤字を垂れ流すことになります。 一方、個人開発者というのはおそらく誰しも夢見がちなので、リリース後バズったりしてユーザーが大量に押し寄せてきてしまってサーバーダウンする可能性も考えてしまいます。 その結果、「全く誰も来なくてランニングコストが赤字になったらどうしよう」という不安と「めちゃくちゃバズってしまってサーバーダウンしてチャンスを逃したらどうしよう」という不安が、心の中でせめぎ合うことになります。 そこで、今回はその2つの不安を一気に解消する「使われなければランニングコストが限りなく
仕事でSendGridの安いEssentialsプランを使うのは辞めよう - Qiita
ある日突然メールが送れなくなることがあります。 Microsoft Azureからメール送りたい Microsoft Azureには、何故かメール関連のリソースが全く存在しません。 メールサーバみたいなサービスはありませんし、自力でのSMTP設置も非推奨です。 公式にもSendGridを使えという立場みたいです。 SendGridとは SendGridはメール送信サービスです。 適当にPOSTするだけで、それをメールにして送ってくれるというナイスなサービスです。 curl --request POST \ --url https://api.sendgrid.com/v3/mail/send \ --header "Authorization: Bearer $SENDGRID_API_KEY" \ --header 'Content-Type: application/json' \ -
WebアプリケーションでJWTをセッションに使う際の保存先は（自分なりに説明できれば）どちらでもよいと思います - 日々量産
以下のツイートを読んで気持ちが昂ったので。 みんな、もうSNSでいがみ合うのはやめよう。 平和に好きなJWTの話でもしようよ。 JWTの格納場所はlocalStorageとCookieのどっちが好き？— 徳丸 浩 (@ockeghem) 2022年2月11日 というのも、JWTをセッションに使うときに保存先含めて一時期悩んでいたので、その時の自分の解。 ただ、考えるたびに変化しているので、変わるのかもしれない。 要約 タイトル。 あとは優秀な方々が既に色々考えておられるのでそちらを読むとよいでしょう。 SPAセキュリティ入門～PHP Conference Japan 2021 JWT カテゴリーの記事一覧 - r-weblife どうしてリスクアセスメントせずに JWT をセッションに使っちゃうわけ？ - co3k.org JWT形式を採用したChatWorkのアクセストークンについて -
プロダクトにNext.jsとGoを採用した理由と背景 - ANDPAD Tech Blog
はじめに こんにちは！エンジニアの柿森です。新規プロジェクトを担当しております。 ANDPADではマイクロサービス開発を推進しており、新規プロジェクトは個別に技術選定を行い、既存システムとAPI経由で連携します。 また、マイクロサービス基盤はk8sで構築されており、死活監視やログ収集もよしなにやってくれる環境が整っております。 新規プロジェクトを立ち上げで、k8s上に乗せることを前提に技術選定を行いました。 技術選定を行うにあたって検討したポイントと、採用した技術について話していきたいと思います。(あくまで筆者個人の考えです。) 採用した技術スタックの概要 フロントエンドはBlitz-jsを参考にNext.jsを採用。 バックエンドはGo + gRPCを採用。 技術選定の方針 大きな方針としては一般的な考えを踏襲しています。 ドキュメントがしっかりしており、GitHubのStarがそれなり
私がサーバレスに全面移行した理由はセキュリティです。セキュリティパッチも当てず放置してしまっていました。
私がサーバレスに全面移行した理由はセキュリティです。セキュリティパッチも当てず放置してしまっていました。 本記事は「サーバを一度構築したら、正常にレスポンスがあるうちは放置する」ような運用をしている方に向けた記事です。 私は学生時代に、「パーツあげるからサーバつくって運用してみなよ！！」と仲のよかった教授がいってくれたことでサーバ構築をはじめました。CentOS入れて、Apache入れて、よくわからないけどiptablesをoffにしたらすごい公開できた！！という体験はとてもよかったです。 その後、アプリをつくるようになって、レンタルサーバではスペックが足りなくなったので、お名前ドットコムでVPSを借りて、AWSが登場したら「すごい！構築したインスタンスをそのままスケールアップできる！！」と勢いのままEC2に移りました。Ansibleで構築自動化のレシピをつくって構築して、運用という名の
知っておきたかったLinuxサーバ設計、構築、運用知識まとめ - hiroportation
サーバ業務周りの管理、運用について役に立ちそうなナレッジをまとめました。 長期的に書いているため用語に統一性がなかったり、不足分など随時修正したいと思います。 1. サーバ設計 サーバスペックはどうするべき？ 使用するOSは？ CentOS開発終了について MWは何を使うべきか Webサーバ構築にはどちらを使うべき？Apache？Nginx？ サーバセキュリティで最低限押さえておきたいことは？ listenするポートは最小限にしましょう ファイアウォール設定で送受信IPアドレス、ポートの通信制御はしておきましょう 外部に出る際にはプロキシサーバを経由するようにする 随時パッチを当てるようにする linuxでのアンチウイルスソフトの検討 個人アカウントで変更系コマンドは実行させないようにする ログについて考えること ストレージ容量には気をつける データベースはどう決めたら良いか MySQLか
Zennで発生した障害の原因と行なった対策のまとめ
2021/02/24の11時頃〜1時間ほどzenn.devにアクセスしづらい・アクセスできない問題が発生していました。その後も3時間ほど一部のページへのアクセスができない状況となっていました。Zennに投稿してくれた方、見に来てくれた方、ご迷惑をおかけしてすみませんでした。 今回の障害は学びが多かったので、個人の記事として残しておくことにします。 原因 今回の障害は、使用しているクラウドサービスではなく、Zenn自体に原因がありました。 1. KaTeX記法により生成されるHTMLが思った以上に大きかった ZennのマークダウンエディターではKaTeX記法をサポートしています。例えば、$a\ne0$と書くとa\ne0と表示されます。 KaTeXはサーバーサイドレンダリングをサポートしており、KaTeX記法からの数式のHTMLへの変換はサーバーサイドで行なっていました。DBにはマークダウンだ
React Server Componentsは再びIsormorphicの夢を見るか
室見川“Web フロントエンド”の悲しみと明るい未来という記事を読みました。 これについては全く同感です。 next.js が vercel を提供して CDNからサーバーサイドでの処理までをワンストップに提供しているとか、 firebase がクライアントサイドでの SDK と Cloud Functions をなるべく一貫した体験で提供しようとしていることとか、あるいは今話題の React Server Component とかについて、フロントエンドの最前線がいったいどのような苦しみにあるか、理解できる人は実はあまり多くないのではないか、と僕は思っている。 それは何かといえば、絶望的なまでのサーバーサイド/バックエンドへの忌避感だ。https://anond.hatelabo.jp/20210105164149 というのも、これは私達がvte.cxを提供してからずっと感じていた課題だ
どれだけリクエストをさばけるのかを待ち行列理論で考えてみた - Qiita
テレビで素敵なサイトが紹介されていたのでアクセスしてみたら、なかなかレスポンスが返ってこなかったりステータスコード503になったりすることってありますよね。 テレビで紹介されたことで多くの人がサイトにアクセスした結果、そのサービスのキャパシティを超えてしまったわけです。 どうなるとキャパシティを超えるのでしょうか？ また、いつからレスポンスが遅くなるのでしょう。 効果的にリクエストをさばくにはどうしたらいいのでしょう。 Photo by Roman Arkhipov on Unsplash 待ち行列理論を使って理想的なモデルからこれらを考えてみたいと思います。 待ち行列理論はコンピュータサイエンスをやってきた人はみんな触れたことがあるとは思いますが、大石の場合はそれが何十年も(!)前のことなのであらためて思い出してみました。 モデル Railsでサービスを提供するとき、rackサーバとして
クラスタのノード欠損を復旧しようとしてクラスタを丸ごと落とした話 - Qiita
これは、私が若…くはないけどピカピカのAWS1年生だった、数年前のお話です。 何をやらかしたのか やらかし前の状態 本番運用しているWebアプリケーションの裏側に、EC2インスタンス3台でクラスタを組んだ某データストア製品を使用していました。データはクラスタ内でレプリケーションされており、1台がダウンしただけならクラスタは稼働を継続できます。2台がダウンするとクラスタ全体が機能しなくなります。 ある日、3台のうち1台で障害が発生してインスタンスへ疎通できない状態になりました。この時点ではクラスタは正常に応答しており、あと1台ダウンしない限りはサービスに影響が出ない状態でした。 まず、ダウンしてしまったインスタンスを再起動して復旧させようとしました。ところがEC2マネジメントコンソールから再起動、停止を選択しても障害中のインスタンスは反応しません。そして私は間違いを犯します。 やらかしたこと
君はまだ平成のアーキテクチャを使ってるのか？僕はFirebaseと令和の時代に行くぞ。 - Qiita
Help us understand the problem. What is going on with this article? メリークリスマス！ この記事はFirebase Advent Calendar 2019の25日目の記事です。 これはなに？ この1年、本を書いたり勉強会で登壇したりいろいろやってみた結果を振り返ってみると、本当に多くの人がFirebaseにふれるようになったなぁと思います。圧倒的な開発者体験の良さをもってバックエンドの関心事を一手に引き受け、アプリケーション開発を劇的に高速化してくれるソリューションとして、Webアプリでもモバイルアプリでもバックエンド第一の選択肢として確固たる地位を確立しつつあるのではないでしょうか。 それ自体はとてもいいことなのですが、Firebaseの強さを活かすためのアーキテクチャに関するアイデアはあまり表に出てきていないのではな
AWS Amplifyで高負荷に耐えられるWebサイトを早急に立てて、Webフロントコーダーが運用を回した話。 - Qiita
AWS Amplifyで高負荷に耐えられるWebサイトを早急に立てて、Webフロントコーダーが運用を回した話。AWSWebamplify はじめに こんにちは、AWS Amplify Advent Calendar 2019の12日目担当、Oceans株式会社 竹本と申します。 クリスマスまであと2週間、アドベンドカレンダーと共にクリスマスを一緒に過ごせる素敵な方と出逢わなければならない私のカウントダウンも進行しており大変焦っております。 さて、今回は「高負荷に耐えられるWebサイトを早急に立てて、Webフロントコーダーが運用回せるようにしたい！」と言う焦っている方向けに、弊社の事例をお伝えします。 それぞれの詳細な手順は他の方がたくさん上げて下さっていますので割愛しつつ、組み合わせて商用環境で使ってますよと言う事例を参考にして頂ければと思います。 （静的Webサイトのホスティングのお話で
第5回 DB側でやること、アプリ側でやることを見極めよう | gihyo.jp
本記事は、『Software Design 2019年8月号』の第2特集「ゲームを題材に学ぶ 内部構造から理解するMySQL」をWeb掲載用に再編集したものです。 本記事のテーマを、より基本的なところから丁寧に解説した『SQLの苦手を克服する本 データの操作がイメージできれば誰でもできる』が2019年8月26日に発売されました。本記事と併せてご活用ください。 「JOINはDBサーバの負荷が高くなる」は本当か？ 「JOINは複雑なので、単純なSQLに分割してぐるぐる系で取得すれば、処理が遅くなったとしても、DBサーバの負荷は減る」と考えているエンジニアが実際に存在します。前回解説したとおり、SQLのオーバーヘッドの大きさをイメージできれば、「そんなことはない」と理解できたかもしれませんが、さらに深く理解するために、本稿ではJOINを分割したときと、JOINしたときの違いを見てみましょう。
[EC2]サーバのリソース監視入門 - Qiita
■概要 AWSでEC2を使う際に、見ておく必要があるであろう項目を、洗い出して監視を実践する。 ■取っておきたいメトリクスについて ◆EC2を建てると標準で取得されるメトリクス一覧 「(公式)インスタンスの利用可能な CloudWatch メトリクスのリスト表示」に詳細が書いてあるが、一般的なアプリケーション監視に使う項目が標準ですべてとれるわけではない。 ※自分が運用/監視で標準メトリクスから使っている項目は下記くらい。
![[EC2]サーバのリソース監視入門 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/984883bc12d7c2603934ee878806979810975803/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCRUMyJTVEJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkwJUUzJTgxJUFFJUUzJTgzJUFBJUUzJTgyJUJEJUUzJTgzJUJDJUUzJTgyJUI5JUU3JTlCJUEzJUU4JUE2JTk2JUU1JTg1JUE1JUU5JTk2JTgwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz04NmE5NzljMmNlZWNmZTI1MTJkOGI0OGE3MTQyZjM0MQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtb250YW1hJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hOTI4NTFmYTM5MDViY2RkNmIxMzNjZTRmMjBiMGNjNQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D3c14b5003df1ce67ecaeef3c08824e43)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
<btn open />
