はじめに おはようございます、もきゅりんです。 皆さん Amplify してますか？ 既存のバックエンドを使いたいけど、 SPA のフロントエンドだけは Amplify を使いたい、なんてことがあると思います。 フロントエンド・バックエンドをまるっと構築・管理ができる Amplify ですが、既存のリソースを使いたいときはどうするのかな、と思ったので対応してみました。 やりたいことは下図です。 Amplify で囲われている部分以外は既存リソースを利用します。 Amplify 以外のバックエンドの準備 元は、Swagger と AWS SAM を使って Cognito オーソライザーを使って簡単な REST API HTTP 統合してみる になります。 ただ、API Gateway ではREST API リソースが非シンプルクロスオリジンの HTTP リクエストを受け取る場合、CORS サ

Terraformの、セキュリティスキャンツールである「tfsec」の触り部分を取り上げました。 簡単なデモもあるため、ぜひご参考にしていただければと思います。 こんにちは！AWS事業本部コンサルティング部のたかくに（@takakuni_）です。 今回は、tfsecを使用して、Terraformのセキュリティスキャンを体験してみようと思います。 結論 tfsecは、Terraformの静的なセキュリティスキャンを行うツール ローカル環境で動作可能な認証情報などを用意しなくていい tfsecとは Aqua Security社の、オープンソースツールです。 ざっくり、ご説明すると、Terraformの静的なセキュリティスキャナーです。 ローカル、CIパイプライン環境で実行できるように設計されています。 いざ実践 インストール 今回は、Macでtfsecを使用してみようと思います。 % brew

こんにちは。たかやまです。 みなさんアーキテクチャを検討するときに、なにか参考にするアーキテクチャがあると助かりますよね？ 私もアーキテクチャ検討をするときは、車輪の再発明を避けるためゼロベースではなく先人たちのアーキテクチャを参考にさせていただくことが多いです。 そのおり、ちょうどお客様にアーキテクチャ検討に役立つサイトをご紹介する機会があり、参考にしているサイトを改めて調べると結構あったので今回こちらをブログにまとめてみたいと思います。 30 の目的別 クラウド構成と料金試算例 目的別クラウド構成と料金試算例 日本利用者向けに公開されているリファレンスアーキテクチャのサイトになります。 全ドキュメント日本語で料金試算も載っているため、アーキテクチャの検討はじめにおすすめのサイトです。 サーバレスパターン サーバーレスパターン サーバレスの汎用的なユースケースがまとめられたサイトになりま

前回は、Nginx をインストールして、Basic認証 をかけてみました。今回は、IPアドレスでのアクセス制限をしてみます。 EC2の場合、セキュリティグループでもアクセス制限が出来ますが、今回は Nginx の機能を使います。 そのため、セキュリティーグループで、80ポートに対して 0.0.0.0/0 を許可をしておきます。 nginx.conf の構成 具体的な設定を記述する前に、nginx.conf の構成について少し見てみます。 nginx.conf の設定は以下のようなディレクティブの集まりで出来ています。 worker_processes 1; ディレクティブは Nginx の各モジュールによって導入されていて、 モジュールを有効にすることによって、そのモジュールで提供しているディレクティブが利用可能になります。 ディレクティブは各モジュールに対するブロックの中に記述します。

React界隈で話題になっている「React Server Components」についてまとめました！ どうもReact大好きCX事業部の片岡です！ 今回はReact界隈で話題になっている「React Server Components」についての内容を意訳してみました。 元ネタ 話題になっているこちらの記事が元ネタです。 https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html 概要 Fetch APIでデータをやり取りすると、バケツリレーが発生します。例えば、Spotifyのアーティストページにはアーティストの情報と人気の曲とアルバム一覧が並びます。この時、人気の曲とアルバム一覧を取得するには、アーティスト情報を取ってこないといけません。そうすると、アーティスト情報を取得して

こんにちは、臼田です。 みなさん、業務設計してますか？(挨拶 今回はMarkdownでシーケンス図やフローチャートなどの図を記述できるMermaidを使って業務フローを書いてみたら、意外と書けたので自分なりのTipsを紹介したいと思います。 その前に 注意点として、まだMermaidを使い始めたばかりなので、「もっとこうしたらいいぞ」とか「こっちのほうがいいぞ」とかあれば建設的なフィードバックとしてSNSとかでいただけるとありがたいです。 あと業務フローって表現しましたが、人によって思い描く業務フローが違うと思うので、業務フローの定義に関するツッコミはご容赦ください。私が今回Mermaidで書いたのは以下の図です。(内容はブログ用に簡素化しました) この図のコードは以下のとおりです。(後ほど解説します) sequenceDiagram autonumber actor お客様 partic

はじめに Amazon EC2でLinuxサーバを新規構築する場合は弊社ではAmazon Linuxをお勧めすることが多いです。その理由としてはAWSのツールが最初から入っていてAmazonのサポートも受けやすいからです。Amazon Linuxを使ったことがない方はどんなディストリビューションなのか特徴を知りたいのではないかと思いますので、CentOSとの違いも含めまとめてみました。以下はAWS公式サイトのページになります。 Amazon Linux AMI Amazon Linuxの特徴 Amazon LinuxはRedHat系のディストリビューションになります。CentOSやRHELを使ったことがある方なら同じように使えるのではないかと思います。CentOSとの比較をしながらAmazon Linuxの特徴を見ていきたいと思います。CentOSはAWS MarketPlaceにあるCe

ここでは主導する方が知っておくべきものをまとめています。 なおこの記事での 1on1 とは、バスケのハーフコートにおける 1 対 1 の攻防ではなく、職場における 1 対 1 の定期的な話し合いのことです。 1on1 で話すべきこと 業務以外の課題解決 なにか課題を抱えていると他のどの話題にも身が入らないため、まず話せる環境を作りましょう。同様に課題は業務効率を落とします。 ここでの課題は次を指しています。 健康上の課題 業務が原因で病院受診が難しい場合の業務量の調整など お互いの健康テクニックの共有なども Good 家族との課題 お子さんが夜泣きで寝不足などの場合は就業時間の調整など 親族と折り合いが悪いなどの場合、第三者としての意見や、自分の経験を共有する 社会上の課題 コロナ禍によるつらみの共有など 業務に連動するわけではないため、前回課題がなかったからといって今回もないと仮定しては

ちゃだいん（@chazuke4649）です。 DeepLの公式Chrome拡張機能がヤバかったので勢いにまかせて紹介します。 "公式版"がリリースされてたの知ってた？ DeepL翻訳（ベータ版） - Chrome ウェブストア ベータ版ではありますが、いつの間にか公式版がリリースされていました。自分は今まで公式版がなかったので、以前は非公式版のツールを使っていました。 インストールする Chromeウェブストアからインストールすると、右上にアイコンが表示されます。それをクリックすると以下ポップアップ画面が表示されます。 現時点では以下２つの機能が存在します。 読む: ブラウザ上の文章を任意の言語に翻訳して表示できる 書く: ブラウザ上に入力している文字を任意の言語に変換できる それぞれ試してみます。 「読む」 一般的にはこちらがよく認知されている機能だと思います。 下図のように、翻訳したい

どうもさいちゃんです。 AWSには利用者が仮想環境を構築していくのに役立つベストプラクティスと呼ばれるものがあります。 これからAWSでガンガン仮想環境を構築していくにあたって設計のベストプラクティスを復習してみようということで、今回はAWS公式から出ている「AWS 設計のベストプラクティスで最低限知っておくべき 10(+1) のこと」という動画を視聴したのでご紹介をしていきます。 登録さえすれば、無料で動画の視聴と資料のダウンロードができます。 こちらから受講が可能です。 はじめに このセッションはAWSにおける設計おベストプラクティスの理解を深める目的で、 クラウド導入を検討している方 オンプレミスからクラウドへの移行を検討している方 クラウドを使い始めたがベストプラクティスを適用できているか悩んでいる方 向けに細かくわかりやすくベストプラクティスについてを説明しているものになります。

はじめに おはようございます､加藤です｡煽り気味なタイトルで申し訳ございません､念の為より詳細に記載しますが､スティッキーセッションを使っていなければApplication Load Balancer障害の影響を受けるのを防げたかもしれないという内容です｡ 今後同様の障害への対処として､このブログの対応は行う価値がありますが､これだけやっておけばOKという事では無い事をご理解ください｡ 2019年8月23日にAWSの東京リージョンで障害で特にAmazon EC2とAmazon EBSに､また特定条件下の環境のApplication Load Balancerの一部に障害が発生しました｡ 事象概要を読むと､気になる所がありました｡ 複数のアベイラビリティゾーンで稼働していたお客様のアプリケーションにも、予期せぬ影響(例えば、 Application Load Balancer を AWS W

Storybook のアドオン、React Themingを使うと Storybook 上で複数の Theme 切り替えができるようになります。 できたもの 前提条件 React + Typescript で実装された既存のプロジェクトに Storybook を導入し、Theme 切り替えができるようにします。 React(CRA) 17.0.2 Typescript 4.1.2 emotion 11 Storybook 6.3.8 React のプロジェクトをクローン こちらの既存の React プロジェクトをクローンします。 左のメニューから Zip で落とすことができるので、VSCode で開いてyarnコマンドで依存をダウンロードします。 Storybook 先ほど落としてきたプロジェクトに Storybook を導入します npx sb init yarn storybookを実

この記事は2018年11月23日時点の動作をもとに執筆しています。 Amazon QuickSightのダッシュボードが埋め込み機能に対応し、Amazon QuickSightサイト外でダッシュボードを閲覧できるようになりました。 Embed interactive dashboards in your application with Amazon QuickSight | AWS Big Data Blog Amazon QuickSight では、分析結果をダッシュボードとして公開すると、参照のみ可能なREADERロールのユーザーと分析結果を共有出来ます。BI 活用を促進する上では、利用者の多くを占めるこの参照のみのユーザーが簡単にダッシュボードを閲覧できることが重要です。 今回の機能追加により、ダッシュボードへのアクセス経路として QuickSight 上で閲覧 Eメールレポート通

GitHub ActionsでAWSの永続的なクレデンシャルを渡すことなくIAM Roleが利用できるようになったようです アクセスキー、撲滅してますか？ ナカヤマです。 目黒方面より、以下のような福音が聞こえてきました。 何がどのくらい最高かと言いますと！ GitHub Actions に AWS クレデンシャルを直接渡さずに IAM ロールが使えるようになることがまず最高で！ クレデンシャル直渡しを回避するためだけの Self-hosted runner が必要なくなるところも最高です！！✨✨✨ https://t.co/IUQmfzkIB0 — Tori Hara (@toricls) September 15, 2021 元ネタはこちら。 Ok I blogged about it. That's how excited I am. 1. Deploy this CFN templ

こんにちは！コンサル部のinomaso(@inomasosan)です。 踏み台サーバ用のEC2から、別のEC2 LinuxにSSH接続する際の秘密鍵の扱い方は皆さんどうしておりますでしょうか？ 一番簡単なのは踏み台サーバに秘密鍵をアップロードし、別のEC2にSSH接続することです。 ただし、このやり方だと踏み台サーバが乗っ取られた場合に、他のサーバにも侵入されるリスクが大きくなってしまいます。 そこで今回は、ローカル端末にある秘密鍵のみを利用した、多段SSH接続を検証していきます。 弊社カジにこのブログを書くきっかけを頂きました。改めてありがとうございます。 この記事で学べること 踏み台サーバにSSH接続先の秘密鍵をコピーする必要はないということ 踏み台サーバ経由の多段SSH接続方法 ちなみに踏み台サーバ経由でWindows Serverに接続したい場合は？ Windows Serverの

TL;DR まずはこいつをみてくれ。 左右に分割されたエディタウインドウに、テキストエディタとターミナルが並んでいるのがお分かりになられるでしょうか！！ なにそれ？ これは、先日リリースされた Version 1.58 (June 2021) に含まれる以下のアップデートによるものです。 Terminals in the editor area Terminals can now be created in or moved to the editor area, enabling a multi-dimensional grid layout that persists and remains visible regardless of panel state. Terminals in the editor area - Integrated Terminal - Visual Stu

[React + Typescript] emotion の Theming 機能を使って複数のTheme切り替えを実装してみた やりたいこと emotion の ThemeProvider を使って自前で定義した複数の Theme の切り替えを実装してみました。 コードの量が多かったため全体のコードは CodeSandbox で公開しています。 emotion とは glam, glamor, styled-component, glamorous といった既存のライブラリから影響を受けて作られた CSS in JS ライブラリです。 書き方もstyled-componentによく似ており、styled-component でできることは emotion でも大体できそうという印象を受けました。 新規プロジェクトの作成 React + typescript の雛形を作成します。 npx

Auth0 React SDKが登場して, Reactを利用した開発に大きな風が吹き荒れています. 主に私の中でです. Auth0 React SDKの紹介は以前書きましたが, ルーティングについて触れていなかったので今回は保護されたルートの実現を試していきます. ReactでSPA作っていることを前提として書いていきますので, Reactについてはあまり触れません. TL;DL 結論だけをみたい方はここを参照にコードを書いていただければ幸いです. この記事では保護されたルートはAuth0 React SDKが提供するwithAuthenticationRequiredとReact Router v5で実現していきます. まず, 保護されたルートを下記のように定義します. /src/protected.tsx import { withAuthenticationRequired } fr

Auth0 React SDKが登場して, Reactで作成したSPAへの組み込みがより簡単になりました. 認証や認可, ログイン処理はアプリケーション開発者の頭痛のタネであります. Auth0はそれらに対する解決を提供するプラットフォームであると同時にアプリケーションを簡単にベストプラクティスにそわせてセキュアに設計するためのSDKも提供しています. 様々な種別のSDKを提供しているのですが, SPAでAuth0を利用する場合はAuth0 Single Page App SDKが提供されています. これはどのようなライブラリやフレームワークを利用したSPAであってもうまく動作します. Auth0 React SDKはReact Custom HooksとHOCを提供しており, これを利用することでセキュアなアプリケーションがSPA SDKより少ないコードでかけます. SPA SDKとの違