API GatewayのオーソライザーにCognitoを使用してみた | DevelopersIO
事業本部Delivery部のアベシです。 こちらの記事では、API GatewayにCognitoのオーソライザーによる認証認可機能を導入する方法について紹介します。 構築にはCDKを使用しました。 Cognito ユーザープールをAPI Gatewayのオーソライザーとする場合の認証の仕組み ① クライアントがCognitoユーザープールにユーザー名とパスワードを渡して認証のリクエストする。 ② 認証されたらCognitoユーザープールがIDトークンをクライアントに返す。 ③ クライアントがAPIを叩く。その際にIDトークンをヘッダーに乗せてAPI Gatewayに渡す。 ④ API GatewayのオーソライザーのCognitoがトークンを検証する ⑤ 検証が成功したらAPIの利用を許可する(認可の部分) ⑥ 後続のLambda関数が実行される 実行環境 以下の環境で構築と動作確認して
Module Bundlerの歴史を振り返って今採用すべきBundlerを考える
Module Bundler とは Module Bundler とは、多数の JavaScript コードファイルを 1 つに結合し、ブラウザーでの読み込みを可能にさせるツールです。 これから Module Bundler の歴史を振り返り、選定基準について私なりの考えを述べさせていただけたらと思います。 Browserify Browserify は 2010 年、最初に誕生した Module Bundler です。 2010 年当時、流行っていた Node.js をブラウザで使いたい requireを用いてブラウザで動かす JS をモジュール分割したい といったモチベーションの元で生まれました。 https://browserify.org/ 主な機能(Browserify) CommonJS(Node.js)で書かれたファイルをブラウザで読み込める JS に結合してくれます 課題(
Windows+WSL2+Ubuntu22.04+VS Code Dev ContainerでWEBシステム開発しよう！
※個人の感想です 想定するユーザーは「（非.NET系）WEBシステム開発で複数プロジェクト（新規開発・運用）を並行して行う中堅ITエンジニア」とします。 初期セットアップ Dockerをインストールする必要があったり、Dockerファイルなどの調整が必要で多少の手間があります。スムーズにいけば30分ぐらいで終わります。 2回目以降 かなりの部分を流用（コピペ）できるため省力化できます。 チーム開発 ほかの方式ではバージョンをそろえたり、パスをそろえたりするのが難しい場合もあります。 本方式は立ち上がりさえすればコンテナ内は100％の一致があるので、環境違いによる問題などは大部分回避できます。 複数プロジェクト ほかの方式は各プロジェクト間で相互に影響を与える場合があります。たとえばnodejsのバージョンを複数並行運用したり、XAMPPの設定であったり、PATHが変わったために別プロジェク
React | create-react-appによる環境構築 | CODE-GUIDE
最初は複数のファイルやフォルダが定義されるので少し戸惑うかもしれません。Reactで作成するプログラム（UIコンポーネントなど）は src フォルダ以下にJavaScriptファイルとして作成していくことになります。まずは src フォルダの中にプログラムを作成していくという点を覚えておきましょう。 それから public フォルダはHTMLファイルなどの公開フォルダという位置づけです。Reactで作成したJavaScriptプログラムを実行するための index.html ファイルなども public フォルダに配置されています。 また Node.js を基盤にReactアプリケーションを開発いていくことになるので、パッケージの定義ファイルである package.json ファイルや package-lock.json ファイル、node_modules といったフォルダも準備されていま
Viteで爆速なフロントエンド開発環境を作る
概要 Viteというビルドツールの紹介とReact + Typescript環境からの移行手順です。 導入したプロジェクトでは開発サーバの起動からページロードまで大体40秒くらいかかっていたものが、サーバは300ms程度で起動し(2回目以降)、ページロードまで大体2~3秒ぐらいに短縮されました。 非常に開発体験が良く、導入手順もそこまで複雑ではないため、技術スタックが合えば導入を検討しても良いかもしれません。 Viteとは？ ViteはVue.js作者のEvan You 氏が開発しているノーバンドルのビルドツールです。 Native ESModulesのimportを利用し、ブラウザから直接モジュールを読み込むことで高速な開発サーバを提供します。 プロダクションビルド時はRollupでバンドルし、静的アセットを出力します。 Vue.jsだけでなく、ReactやSvelteなどもサポートされ
Vite入門 (従来のビルドツールとの違いとViteの挙動) - Qiita
概要 最近のフロントエンド開発といえば、速度速度速度。いやまさにその通り。開発環境を爆速にすることこそ正義くらいな感覚を持っています(笑) 今回は、快適なフロントエンド開発環境を手に入れるためのビルドツールViteの入門ということで、その挙動と従来のビルドツールと何が違うのかについて解説していきたいと思います。 Viteとはなんなのか Viteを一言で表すなら、従来のビルドツールに比べて、高速で動作するビルドツールと言えます。 従来の有名なビルドツールというのは、webpack、Rollup、Parcelなんかが当たります。 これらのビルドツールを使用し、開発サーバを立て開発をする。よくあるパターンだと思うのですが、こんなことを感じた方も多いのではないでしょうか。 開発サーバの起動がおせぇ！！！ 更新にいつまでかかってんだオラァ => そこでViteの出番というわけですよ。 Viteは、2
Vite は webpack に比べてなにがすごいの??
概要 Viteとwebpackを比較し、それぞれの概要・概念・内部処理の違いをざっくりと理解できます！(おそらく) なお、本記事では具体的な設定方法は書いていませんので、ご了承ください。 この記事を読むと分かること 以下の疑問を解決できます。(多分) webpackってそもそもなんだっけ？ Viteってなんぞ？ Viteとwebpackって何が違うの？ Viteが良いとは聞くけど、実際なにが良いの？ ざっくり結論 Viteがwebpackと比較して優れている点は主に以下の通りです。 高速ビルド Viteは、開発速度を重視して設計されており、開発サーバーが標準で組み込まれているため、開発時にブラウザのリロードを行わなくても、保存したら即反映されるため、開発速度が向上します。 高速HMR（Hot Module Replacement） Viteは、HMR[1]が標準搭載されており、尚且高速。
GithubActionsで環境変数を理解する。
概要 イマイチ分かっていなかったので、ここに取りまとめておきます。 ポイント ２種類の変数 ここがこんがらがるのですが、「ワークフロー内で利用できるコンテキストという変数」と、「実際のコンピュータ内で利用できる環境変数」があります。 1. コンテキスト yaml内で利用できる環境変数的な存在。GithubActionsのOptionなどにも利用できる変数です。 下記のように独自に定義したりして利用する事ができます。 利用する場合は${{name}}みたいな形で参照する事ができます。 name: learn-github-actions on: [push] env: env_1 : hashito jobs: check-bats-version: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - run: | echo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
