あるSEのつぶやき・改

ITやシステム開発などの技術に関する話題を、取り上げたりしています。

AWS

『クラウド破産を回避するAWS実践ガイド』はAWS利用者なら読んでおきたい一冊だった #技術書典

既に終了してしまってますが、「技術書典 応援祭」にて『クラウド破産を回避するAWS実践ガイド』なる非常に興味深い書籍が販売していました。 techbookfest.org 残念ながら、今はBOOTHでもとらのあなでも販売していないので、同人イベント限定の書籍だったよ…

AWS SESで検証メールがS3に届かなかったケースの対処方法

AWS

タイトルの通りなのですが、AWS SES で Route 53 で SPF の設定を行うと、MXレコードがデフォルトで以下のものになります。 10 feedback-smtp.us-west-2.amazonses.com これが罠で、実際は以下のようにしないと S3 にメールが届きません。(リージョンは各自…

HugoのサイトをGitHub/Bitbucket経由でAmplify(CloudFront)で公開する方法

Hugoは静的サイトジェネレーターとして有名ですが、CloudFront で公開するにはなにかと手間がかかっていたようです。 ですが、現在は GitHub/BitBucket/GitLab/AWS CodeCommitでソース管理していれば、Amplify Consoleを使用することで簡単にCloudFrontにデ…

『React x Amplify で始めるサーバーレス アプリケーション開発』が分かりやすくてよい本だった #技術書典

技術書典 7で頒布されていた『React x Amplify で始めるサーバーレス アプリケーション開発』という本があったのですが、技術書典当日は気が付かず、BOOTH にて販売されているのを発見して速攻でポチりました。 booth.pm これですよ、これ。これが欲しかった…

React+AmplifyのCognito認証画面に独自カスタマイズした画面を使用する方法

はじめに Amplify + Cognito のサインイン画面は堅牢でよくできているのですが、いかんせんデザインの自由度が低いです。 この記事では、 Amplify の API を直接叩いてサインインする方法をご紹介します。 はじめに 準備 出来上がりの画面 ソースコード 解説…

React Native+Expo+AmplifyのCognito認証画面を日本語化する

React Native + Expo + Amplify + Cognito で認証機能は簡単に実装できるのですが、デフォルトだと表示言語が英語のため実用的ではありません。 ですので、認証画面を日本語化する必要があります。 とは言っても、そんなに難しいことではなく、Amplify のI18…

React Native+Expo+AmplifyでCognito認証を行う

React Native + Expo でも Amplify はサポートされています。 下記記事は、Expo で Amplify を使用する公式の解説になっています。 blog.expo.io この記事では、React Native + Expo + Amplify で Cognito 認証を行う方法をご紹介します。なお、言語は TypeS…

Solved,[Unhandled promise rejection: Error: No credentials, applicationId or region]

Expo + Amplify で iOS Simulator を実行しところ以下のエラーが表示されました。 [Unhandled promise rejection: Error: No credentials, applicationId or region] - node_modules/@aws-amplify/analytics/lib/Providers/AWSPinpointProvider.js:189:76 in <unknown></unknown>…

React+AmplifyのCognitoサインアップで電話番号を無効にする方法

React + Amplify + Cognito のサインアップ画面では、デフォルトで電話番号が必須項目になってしまいます。 Congnito のユーザープールでは、必須項目になっていないのにもかかわらず。 ですが、この電話番号を無効にする方法があります。 その方法は簡単で…

React+Amplify+Cognito認証のアプリでExcelをS3にアップロードしLambda(C#)で読み込む

はじめに 前の記事で、React+Amplify+Cognito認証のアプリで画像ファイルをS3にアップロードするまで行いました。 www.aruse.net この記事では、Excel ファイルを S3 にアップロードし、S3 のトリガーで Lambda 関数(C#)を起動し、Excel ファイルを読み込ん…

React+Amplify+Cognito認証のアプリで画像ファイルをS3にアップロードする

はじめに 前の記事で、React+Amplify+Cognito認証のアプリで自動デプロイするところまでご紹介しました。 www.aruse.net 今度は、Amplify の Storage という機能を使用して S3 にファイルをアップロードする方法をご紹介します。 前の記事のプロジェクトに機…

AWS Amplifyのデプロイ先に基本認証を追加する方法

AWS

AWS Amplifyのデプロイ先には、ID とパスワードの基本認証を追加することが簡単にできます。 [アクセスコントロール] > [アクセスの管理] から、基本認証の設定ができます。 すべてのデプロイ先か、ブランチごとに基本認証を設定することができます。 これ…

AWS Amplifyのデプロイ先に独自ドメインを指定する方法

AWS

はじめに AWS Amplify では、リモートリポジトリにコミットしたら自動デプロイできますが、デフォルトでは amplifyapp.comのサブドメインにデプロイされます。これを独自ドメインにデプロイすることもできます。 ですが、ドメインのDNSプロバイダーが ANAME…

React+Amplify+Cognito認証のアプリを自動デプロイまで行う

はじめに React のSPA(Single Page Application)アプリに、AWSのAmplifyライブラリとCognito認証を組み合わせたものを、BitbucketというGit サービスにコミット後、Web アプリとして自動デプロイする方法を見ていきたいと思います。 事前に、Bitbucket で de…

Solved, "No userPool" error at aws-amplify

"No userPool" error at aws-amplify is soloved below. import Amplify from 'aws-amplify'; import * as aws_exports from './aws-exports'; - Amplify.configure(aws_exports); + Amplify.configure(aws_exports.default); in index.tsx.

React+Amplify+CognitoにGoogle認証を追加する

はじめに React + Amplify + Cognito でのユーザー認証も大分調査が進んできました。 www.aruse.net 今度は、Google の OAuth 認証を追加したいと思います。 調べてみたのですが、情報が英語圏を含めほとんどない。 断片情報を組み合わせて試行錯誤したらう…

React+Amplify+Cognitoでアプリケーションをユーザー認証でガードする

以下の記事で、React + Amplify + Cognito のユーザー認証を日本語化するところまできました。 www.aruse.net この記事では、React のアプリケーションをユーザー認証でガードする方法をご紹介します。 具体的に言うと、サインインしていないユーザーにはサ…

React+Amplify+Cognitoのサインイン画面を日本語化する

以下の記事で、React + Amplify + Cognito でユーザー認証を行うことができるようになりました。 www.aruse.net 一方で、Cognito でデフォルトで用意された画面は以下のように英語表記になっていて、このままでは使い物になりません。 ですが、Cognito のサ…

React+Amplify+Cognitoでユーザー認証を実装する

はじめに React + AWS Amplify + Cognito でユーザー認証を行うアプリを作ってみたいと思います。 Amplify は AWS のサービスを便利に使用できる JavaScript ライブラリで、Cognito は AWS でユーザー認証を行えるサービスになります。 この記事では、TypeSc…

TypeScriptのReactでAmplifyを使おうとしたらエラーでハマったのでその解決方法

はじめに React の TypeScript をベースとしたプロジェクトで、AWS Amplify + Cognito でユーザー認証のサンプルを動作させようとしたらエラーが頻発してハマってしまいましたので、解決方法のメモを残しておきます。 ちなみに TypeScript な React プロジェ…

Reactで画像ファイルをS3からAPI Gateway+Lambda(C#)経由でダウンロードする方法

はじめに 以下の記事で、React で画像や Excel ファイルを API Gateway + Lambda(C#) 経由で S3 にアップロードする方法をご紹介しました。 www.aruse.net せっかくですので、S3 から画像ファイルを API Gateway + Lambda(C#) 経由でダウンロードする方法も…

Reactで画像やExcelをAPI Gateway+Lambda(C#)でアップロードしてS3に保存する方法

はじめに React を使い画像ファイルや Excel ファイルなどのバイナリファイルを、AWS の API Gateway と Lambda (C#) を経由してアップロードし、S3に保存する方法を調べたので記事として残しておきます。 この方法ですが、ネット上に全くといっていいほど情…

JavaScriptコードから機密情報の設定値を外出しするdotenvという便利ツール

AWS

はじめに JavaScript でプログラムを書いていると機密情報を含んだ設定値を記述することがあります。 私の場合は、AWS のアクセスキーなどでした。 それでいろいろと調べていたところ、JavaScript のコードでprocess.env.XXXXXという記述を何度か見かけまし…

ReactのSPAをS3+CloudFront環境に自動デプロイする方法

はじめに 以下の記事で、Amazon S3 と CloudFront を使って HTTPS でサイトを独自ドメインで公開する方法が分かりました。 www.aruse.net では、React の SPA (Single Page Application)を S3 + CloudFront 環境にデプロイしてキャッシュをクリアするまで自…

C# のLamda関数でExcelファイルをS3から読み込む方法

はじめに 個人プロジェクトで C# の Lamda 関数を使う予定なのですが、いやぁ情報が少ないですね。 今回も S3 にアップロードした Excel ファイルを読み込もうとしたのですが、そもそも S3 のファイルを C# で扱う方法がほとんど見つからない。 まあ、そんな…

Lambda(C#),DynamoDBでAuto Increment(アトミックカウンター)する方法

DynamoDB には、他の RDBMS のようなシーケンス番号で KEY を管理する Auto Increment の機能は残念ながらありません。 ですが、それを補う方法として、シーケンス番号を管理するテーブルを作成しておき、カウントアップ更新時にカウントアップした値を返す…

Lambda関数(C#)でDynamoDBにDeleteItem(データ削除)する方法

Lambda 関数(C#)で DynamoDB にアクセスして DeleteItem (データ削除)する方法をメモしておきます。 まず、DynamoDBのItemIdというテーブルを以下のように作成します。パーティションキーはidで、_versionはキーではない属性になります。 項目は以下のように…

Lambda関数(C#)でDynamoDBにUpdateItem(データ更新)する方法

Lambda 関数(C#)で DynamoDB にアクセスして UpdateItem (データ更新)する方法をメモしておきます。 まず、DynamoDBのItemIdというテーブルを以下のように作成します。パーティションキーはidで、_versionはキーではない属性になります。 項目は以下のように…

Lambda関数(C#)でDynamoDBにPutItem(Insert/データ追加)する方法

Lambda 関数(C#)で DynamoDB にアクセスして PutItem (Insert/データ追加)する方法をメモしておきます。 まず、DynamoDBのItemIdというテーブルを以下のように作成します。パーティションキーはidで、_versionはキーではない属性になります。 Lambda 関数(C#…

Lambda関数(C#)でDynamoDBにアクセスしてGetItemする方法

Lambda 関数(C#)で DynamoDB にアクセスして GetItem しようとしたのですが、やたらと苦労したのでメモを残しておきます。 まず、DynamoDBのItemIdというテーブルを以下のように作成します。パーティションキーはidで、_versionはキーではない属性になります…