本文の内容は、2022年8月29日にAlejandro Villanuevaが投稿したブログ(https://sysdig.com/blog/26-aws-security-best-practices/)を元に日本語に翻訳・再構成した内容となっております。 Well-architected フレームワークの最も重要な柱の1つは、セキュリティです。したがって、AWSセキュリティベストプラクティスに従って、不測なセキュリティの事態を防止することが重要です。 さて、あなたは問題を解決するために、ソリューションを構築してホストする目的でAWSに着目しました。アカウントを作成し、コーヒーを淹れてワークステーションに座り、設計、コーディング、ビルド、デプロイをする準備はすべて整いました。しかし、そうではありません。 ソリューションの運用性、安全性、信頼性、パフォーマンス、費用対効果を高めるには、多く

はじめに ReactとFirebaseを用いてフロントエンド開発するにあたって、追加で入れておきたい各種パッケージや設定を組み込んだ環境構築手順です。 この記事で構築する環境は以下の通りです。 ローカルで開発した内容をGitHubにpushすると、構文チェック→テスト→ビルド→デプロイされます。 また、mainブランチにpushしたらFirebaseの本番環境にデプロイされ、developブランチにpushしたらFirebaseの開発環境にデプロイされます。 事前準備 環境構築をするにあたって、以下は事前に準備してください。 VS Codeのインストール GitHubのアカウント登録 Node.jsのインストール 今回はv16.14.0を利用します Firebaseのプロジェクト作成 GitHubリポジトリの作成 GitHubのリポジトリを作成します。 公開範囲はPublic,Privat

最近フロントエンドの副業案件の面接を受けていて、聞かれた技術質問や準備しておいた方が良い質問をまとめます。(実務経験 約2年) 今回何回か面接をしましたが、正直技術質問って普段普通に実装していてもそれを言語化して答えるのって結構難しいです。 面接はコミュ力ではなくて準備力です！ しっかり準備して挑みましょう！ 前提 面接を受けたときのスキル感は下記です。 フロントエンドが主戦場で、api周りはNode.jsで基本的なApiであれば対応可能。 インフラはそこまで経験なしといった感じです。 応募ポジション: フロントエンドエンジニア 応募先のフロントエンドスタック: Next.js, TypeScript 実務経験: 1年8ヶ月 言語、フレームワークの実務経験年数 Nuxt.js(Vue) ... 1年8ヶ月 Next.js(React) ... 半年(個人開発では2年触っている) TypeS

Webアプリケーションで、ブラウザ上でJavaScriptを用いてAPIからデータを取得して画面に反映する挙動が遅いと言われた時にフロントエンド側が確認することと対処方法。 ユーザのボタンクリックなどのアクションをトリガーとして、APIからデータを取得し画面に反映するというシナリオがあった際に、ユーザのアクションから画面への反映に時間を要しているという状況を想定しています。 Largest Contentful Paint (LCP)が遅い場合に関しては、別のアプローチになるので今回は除外します。 本当にフロントエンドがボトルネックになっているか まず最初にすることは、APIのレスポンスタイムと、APIのデータを画面に反映する処理のどちらがボトルネックになっているかの確認です。 ユーザのアクションから画面への反映までの時間の中でAPIのレスポンスが大部分を占めている場合、プリフェッチなどの

はじめに このツイートに結構反響があったので、雑になるがとにかく自分の考えをダンプする。もともと書いていた記事はうっかりやらかしてデータロストした、泣きたい。 話をわかりやすくするために、ALB+ECS（Fargate）を使ってWebAPIと対比して説明しているが現実はもっと複雑である。 引用リツイートをもらえた部分などについてもアンサーっぽいことも書いていく。 AWS利用費と人件費の話 AWS上にWebAPIを構築する際に、AWS利用費の削減をモチベーションとしてApiGW+Lambda構成が、採用されることがある。確かにAWS利用費は下がるがApiGW+Lambda構成を設計〜運用するためにはAWSに関する知識の中でもとくに専門的な知識が必要になる。こういった人材を雇用または外部へ発注し続けることは人件費に跳ね返ってくる。 ApiGW+LambdaがWebAPIのための構成として唯一無

雲研究者の荒木健太郎さんが制作した「科学者になれる！すごすぎる自由研究ガイド」。「いくつかの手順を踏むだけでとても面白い科学研究になります」とポイントを紹介しています

『チェンソーマン』2部など、今もっとも勢いのある漫画家といえば藤本タツキ先生で異論はないと思う。 その藤本タツキ先生は単行本のコメントに「悪魔のいけにえ大好き！」「ヘレディタリー大好き！」「貞子VS伽倻子大好き！」など毎回好きな映画をオススメするのが恒例になっていたり、読み切り漫画である『ルックバック』では参考にしただろう『ワンス・アポン・ア・タイム・イン・ハリウッド』を作中でわざわざ出したりして、リスペクトを隠そうともしない。 そんな映画好きが滲み出ている藤本タツキ先生が単行本やジャンプの巻末コメント、各種インタビュー、対談、妹（！？）であるながやまこはるちゃん（@nagayama_koharu）のツイッターで影響受けたと豪語していたり、オススメしている映画をまとめたので、作品紹介と合わせてどの配信サービスで見れるのかを書いていく。 なお、日本のアニメ映画はアニメ編で紹介している。 ww

ざっくりとコントロールの分類としては上記になりますが、他にも検討した内容のメモを以下に貼ります。 運用上煩わしいものは対応しない VPCフローログとか WAF適用は本番で通知のみ WAFが不要な対象もあるため OS以上のレイヤーの脆弱性管理は管轄外 SSMパッチコンプライアンスなど、別で管理する場合も多いため このような分類手法は他の環境でも応用できそうだと思ったので、是非活用してみてください。 実装アーキテクチャ2: 是正までの追跡方法 Security Hubのセキュリティチェックにより出てくる検知をFindingsといいますが、このFindingsが適切に是正されたか、というステータスをトラッキングすることはけっこう大変です。 例えば、このFindingsのIDを検知時にDynamoDBに保存しておき、一定時間経過後にこれを取り出して是正済みか確認する手法を検討します。ソートキーに検

デスクトップ環境の「GNOME」は、さまざまな便利機能を追加することができます。これを「GNOME Shell 拡張機能」と呼んでいます。GNOME Shell拡張機能は、GNOMEのバージョンに応じて動作しないものがあります。Part3では、Ubuntu 22.04 LTSで動作するGNOME Shell拡張機能を厳選して紹介します。 旧版のUbuntu 20.04 LTSでは、GNOME Shell拡張機能（以下、拡張機能）を追加する方法が二つありました。一つは、Ubuntuのリポジトリーに用意されているパッケージをインストールすることで追加する方法。もう一つは、Webブラウザーを使って公式サイト＊1上からインストールする方法です。Ubuntu 22.04 LTSでは、いずれの方法も少し状況が変わっています。

Web3とは何であったか トークンとコントラクトと誰からでも見える台帳を使ってなんか出来そうなことないっすかねくらいの思想または活動 自動販売機で金入れたら人を解さずにジュースが買えるような感じで、トークンを支払ったら人を解さずにトークンが買えたり付与したりできる仕組みを作れるスマートコントラクトというのがあり、これなんかに応用できないっすかみたいなことだけだったはず NFTとかDAOとかもその応用例の一つなだけにすぎない トラストレスとか分散性みたいな話はEthereumのDocsには一部記述があるがあくまで理想論として語ってるだけ。会社がvisionをHPに書いてるようなもん。 Internetの技術が置き換わるとかBigTechを打倒するみたいな対立構造を煽るような話では全く無い そもそも既存のインターネットの上に成り立っているし、分散されたそのノードはどこのサーバーで動いているんだ

みなさんこんにちは。Backlog課のGitチームに所属するテリーです。今回は僕たちが日々運用するECS Fargate上のアプリケーションのデプロイ方法とそれをどう改善してきたかについてまとめました。デプロイについて迷っている方や日々の業務の改善が好きな人に読んでもらえたらと思います。 Git機能におけるデプロイ ECS上で動くアプリケーション BacklogのGitはEC2上で動くアプリケーションとECS Fargate上で動くアプリケーションで構成されています。 アーキテクチャの外観は上記のようなになっています。Gitのアーキテクチャについて過去に詳しく説明したブログを発表していますので詳しくはこちらを参照ください。 僕たちは上記のアーキテクチャ中の4つのアプリケーションをECS Fargate上で運用しています。また、内部的な話になりますがBacklogには内部構造として複数の本番

先日、私がワードプレスで運営しているサイトでサイバー攻撃を受けました。 サイトのいくつかのファイルが改ざんされ、管理系ページにアクセスできない状態に陥りました。 その後、なんとか復旧できたものの、インシデント対応中は生きた心地がせず、手の震えと動悸が凄まじかったです。 今回サイバー攻撃による障害の経験から学んだ、サイバー攻撃に備える7つの心構えを説明します。 ※本記事は個人開発でサービスを運営している方や、1人でシステム担当を行っている人を対象にした記事です。 いきなりサイトアクセスが403エラー 私は個人でレンタルサーバーを借りてワードプレスで構築したサイトをいくつか運営しています。 その中のうち、ある特化ジャンルの情報を発信しているサイトの管理画面にアクセスした時、異変が起きました。 403エラーです。 はじめはレンタルサーバー側のトラブルを疑いました。 しかし、ユーザー向けの記事ペー

はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直したのでその内容を紹介します。 はじめに「React-Testing-Library」と「Jest」の概要を説明しその上で具体的なテストコードを何パターンか書いていきます。 この記事の対象者 フロントエンドのテストの概要を知りたい人 React-Testing-LibraryとJestについて知りたい人 具体的なテストの書き方を学びたい人 なお本記事では、React-Testing-Libraryの具体的な書き方についてをメインにしている

はじめに 今回は無料でWeb制作周りの技術を学ぶことができるサービスをまとめました。 これからWeb制作の学習を始めていきたい人やプログラミングの基礎学習をしていきたい人におすすめのサービスなのでぜひ参考にしてみてください。 この記事の対象者 プログラミング初心者~中級者 Web制作を学びたい人 HTMLやCSSをより深めたい人 ポートフォリオを作りたい人 無料コーディング練習所 まずはじめに紹介するのはWebサイトを制作しながらコーディングスキルを身につけることができる無料コーディング練習所です。 こちらのサイトではデザインカンプが用意されており、基本的なコーディング方法から応用的な手法まで実際にWebサイトを制作しながら学ぶことができます。 準備編でがエディタの設定方法や拡張ツールといったコードを書くための基礎の基礎から丁寧に解説をしてくれています。 入門編~上級編ではWebサイトを作

煽るようなタイトルですいません。 近い将来ほとんどのエンジニアにとって認知症についての知識は避けて通れないものになると確信しているためこの記事を書いています。 最大の理由は、「日本社会全体の高齢化に伴って、顧客の多くも認知症となるから」です。 実は1ヶ月ほど前にも認知症フレンドリーテックに関する記事をZennに書きました。 ここから発展して、アイデアソンを開催することになったことも、あらためて記事を書くことにした理由です。 認知症の人は増え続ける 現在、日本には認知症の人が約600万人いると推計されています。 これは、小学生と同じ人数です。 すでに、多くの人がいることに驚かれるかもしれませんが、さらに今後も増え続けることがわかっています。 久山町研究という世界的に注目される疫学研究によると、認知症の人は2060年まで増え続け最大1000万人を超えるという推計となっています。 この時の日本の

remote.it とは 一言でいうと簡単に利用できる、P2P接続サービスになります。 リモートワークの普及に伴い、サイバーセキュリティに関心を置く会社も増えたのではないででしょうか？ そんな時remote.itを使うことで、セキュリティリスクを抑えてグローバルIPから社内LANに接続する仕組みを簡単に作ることができます！ 「ポート解放が不要な点」や、「P2P接続するポートを制限することが可能」なため、かなりセキュアにアクセスすることができます。 今回はremote.itを使って「安全に」外部のインターネットから社内LANにアクセスしてみたいと思います。 (ついでにミニアプリを作ってみます。) ※もちろん情シスからはOKを貰ってますよ！ それではさっそく作っていきましょう！ 事前準備 [ハードウェア] RaspberryPi 4B (必須) SwitchBot (ミニアプリを作る場合必須に

HTTP/3入門 第1章進化するHTTPの歩み ～ HTTP/1.1とHTTP/2をおさらいし⁠⁠、HTTP/3の基本を知る この特集記事は2021年6月24日に発売されたWEB+DB PRESS Vol.123に掲載された特集1「HTTP/3入門」を再掲したものです。 先日2022年6月にHTTP/3を含むHTTP関連の仕様が正式なRFCとなりました。ここではRFCの正式リリースに伴い、いち早く変更点を抑え、囲みボックスを用いた加筆解説でわかりやすくお伝えしております。 特集のはじめに HTTP（Hypertext Transfer Protocol）の最新版であるHTTP/3が登場しました。HTTP/3では、より安全で速い通信が行えます。本特集では、今までのHTTPにあった課題と、HTTP/3で課題をどのように解決し、改善が行われたかを解説します。 本章では、HTTPそのものと各バージ

こんにちは。masakichiです。 わたしはプログラミングの学習をしたり、情報収集をする時に好んで動画を閲覧することが多いです。 そんな中、最近英語圏のYoutubeチャンネルのクオリティが有料級並みに高いことに気づきドハマりしています。 ぜひ、プログラミングを学ぶ同志にも視聴してほしいと思い、おすすめのYoutubeチャンネルをまとめました。 なお、わたしはフロントエンドを主としていますので、紹介するチャンネルにも偏りがあります。予め、ご了承のほどよろしくお願いいたします。 The Coding Train 所感 スネークゲームやパズルゲームなどクリエイティブなチュートリアルがたくさんあるチャンネルです。運営者が教育の仕事もしているようなので、説明がわかりやすいと思いました。また、語学学校の先生みたいなノリで喋るので、聞き取りやすく親しみを感じることができると思います。 技術範囲 p5

はいさい！ちゅらデータぬオースティンやいびーん！ 今回の記事は筆者に珍しく、技術紹介ではなく、僕の個人的な意見を書きます。あくまでも、自説です。 React自体は画期的で、プログラミング界に貢献したプロジェクトだと思っていますし、完全に否定したいわけではありません。 Reactに対する違和感＝芽生えては大きく育った種 筆者はReactがとても好きでした。JavaScriptが好きになったきっかけもReactでした。何から何までもReactで書き直して、Custom Hooksを作って、refを子部品に渡したり、バリバリ満喫していました。 Vueも仕事の関係で習得せざるを得なくなったのですが、Vueは最高に大嫌いでした。これならReactで書き直してやるぅ！と思ったりも。 Reactについて社内でも導入を推進したり、React入門の勉強会を開いたりもしています。 しかし、そんな筆者は、最近に

はじめに 今回はフロント学習で重宝できる教材をまとめました。 軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。 実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。 今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。 「フロントエンドを網羅的に学べかつ実務の基礎作り」という目的で教材を紹介します。 この記事の主な対象者 フロントエンドの学習をこれからしていきたい人 何を学べばよいのかがわからない人 HTMLとCSSはある程度かける人 この記事の目標 フロント学習の指針が立てられる 実務現場でも活用できるスキルを学べる教材を知れる JavaScript ドットインストールのJavaSc