カテゴリー: aws

カテゴリー
ASP.NET aws C#

Aws lambda で asp.net core サーバーレスウェブアプリを構築する

AWS Lambda を使って、Nodejs の express でウェブページを表示することができますが、これと同じように、ASP.net Core を lambda で実行してウェブページを表示することができます。

まさにサーバーレスな Asp.Net Core です。EC2などの VPS は不要です。

開発・デプロイの方法を紹介します。

1. AWS Toolkit for Visual studio をインストールする

AWS ToolKit for Visual Studio とは、AWS の開発を容易にするvisual studio の拡張機能です。以下のURLからダウンロードできます。

https://aws.amazon.com/jp/visualstudio/

2. 新規プロジェクトからAWS serverless application を作成する

新規プロジェクト作成画面から「aws」でフィルタリングすると、awsに関するプロジェクトが表示されます。その中から「AWS Serverless Application」を選択します。

3. 発行に必要な権限を付与する

Lambda 関数の作成など、いろんなことを自動で処理してくれますので、AWS Console の IAM 画面から権限を付与します。

必要な権限をメモしてみましたが、必要に応じて権限を追加してください。

  • Lambda full access
  • IAM Full access
  • Amazon API Gateway Full Access
  • CloudFormation Full Access

Full Access にする必要は無いかもしれませんが、手っ取り早くするためにフルアクセスにしました。

4. AWS Lambda に発行する

ソリューションエクスプローラーの右クリックメニューから、「Publish to AWS Lambda」をクリックします。

プロファイルを選択し、Stack Name と S3 Bucket Name を選択し、右下の Publish ボタンをクリックします。

正常に作成処理が完了すると、この画面のようにlambda関数が作成されます。

5. ウェブページにアクセスしてみる

AWS Console からAPI Gateway にアクセスします。発行処理で作成されたAPI Gateway の左側メニューから、「Stage」を選択して表示されているURL をクリックします。

そうすると以下の画面が表示されるはずです。

まとめ

この手順で作成することで、サーバーレスなASP.NET Core ウェブページを作成することができます。VPS などの専用サーバーが不要になりますので、状況によっては安価に環境を構築することができます。

.NET CORE ユーザーにとってはウェブサイトを開発する選択肢のひとつとして考えて頂けるといいかと思います。

カテゴリー
aws C#

C# で簡単に AWS S3 にファイルをアップロードするソースコード

C# でAmazon AWS S3 に ファイルをアップロードする方法はいろいろありますが、シンプルに簡単にファイルをアップロードするソースコードを紹介します。

using Amazon.S3;
using Amazon.S3.Model;
using Amazon.S3.Transfer;
using System;

namespace autocbk
{
    class FAmazonS3
    {
        private static readonly Amazon.RegionEndpoint bucketRegionEndPoint = Amazon.RegionEndpoint.APNortheast1;
        private static IAmazonS3 s3Client;

        public static int UploadFile(string bucketName, string filePath)
        {
            try
            {
                s3Client = new AmazonS3Client(bucketRegionEndPoint);

                TransferUtility fileTransferUtility = new TransferUtility(s3Client);
                fileTransferUtility.Upload(filePath, bucketName);

                return 0;
            }
            catch(Exception e)
            {
                return 9;
            }
        }

    }
}

必要なNuGetパッケージ

AWSSDK.S3 が必要です。これをインストールすると、AWSSDK.Core が自動的についてきます。

aws s3 nuget package

ソースコード説明

  1. リージョンエンドポイントの指定
private static readonly Amazon.RegionEndpoint bucketRegionEndPoint = Amazon.RegionEndpoint.APNortheast1;

このコードで、リージョンを「APNothEast1」に指定します。

2. アップロード関数の定義

public static int UploadFile(string bucketName, string filePath)

この関数は、 bucketName と filePath を引数に持ち、int型でリターンコードを返却します。

3. S3にファイルをアップロード

fileTransferUtility.Upload(filePath, bucketName);

TransferUtility オブジェクトのUpload 関数でアップロードを行います。TransferUtility クラスの公式ドキュメントは以下にあります。

https://docs.aws.amazon.com/sdkfornet/latest/apidocs/items/TS3TransferTransferUtilityNET45.html

カテゴリー
aws インフラ

AWS S3 Cloudfront で Webページを gzip 圧縮して配信する方法

Google Page Speed Insight (https://developers.google.com/speed/pagespeed/insights/)
の点数をあげたらSEO的にいいこあるかな？という不確かな淡い期待を胸に、計測をしてみたら、

gzip 圧縮して配信したら早くなるよっ！

とアドバイスを頂きましたので、 AWS S3 + Cloudfront で gzip 圧縮して配信する方法を書いてみたいと思います。

ちなみに、Cloud Front で自動的に gzip 圧縮してくれますので、設定をポチポチ変更していくだけで完了します。

まず、CloudFront の設定画面をひらきます。

そうそう、こんな画面ですね。

次に、上のタブから「Behavior」をクリックします。

これですね。

変更したい Behavior にチェックを入れ、「Edit」をクリックします。

Compress Objects Automatically を Yes にします。

「Yes, Edit」をクリックして、設定を更新します。

「Invalidators」 から、CDNを更新します。

更新が終わったら、Chrome の Network タブから、gzip で配信されていることを確認します。

以上です。

カテゴリー
aws TypeScript

TypeScript で AWS DynamoDB のテーブルを作成する

TypeScript は手軽にプログラミングできて、型定義がしっかりしているから
ソースコードの自動補完もできて、本当に大好きです。

ということで、 TypeScriptを 使って AWS DynamoDB のテーブルを作成する方法を紹介します。

ソースコード

import {DynamoDB,config} from "aws-sdk"

config.update({
    region: "ap-northeast-1"
})

let param:DynamoDB.CreateTableInput = {
    TableName: "codeSnippets",
    KeySchema: [
        { AttributeName: "Key1", KeyType: "HASH"},
        { AttributeName: "Range1", KeyType: "RANGE"}
    ],
    AttributeDefinitions: [
        { AttributeName: "Key1", AttributeType: "S" },
        { AttributeName: "Range1", AttributeType: "S" }
    ], 
    ProvisionedThroughput: {
        ReadCapacityUnits: 5,
        WriteCapacityUnits: 5
    }
};

let dynaDB = new DynamoDB();

dynaDB.createTable(param, (err, data) => {
    if (err) console.log(JSON.stringify(err, null, 2));
    else console.log(JSON.stringify(data, null, 2));
})

1. NPM パッケージのインストール

aws-sdk というパッケージが必要ですので、インストールします。

npm i --save aws-sdk

2. import

import {DynamoDB,config} from "aws-sdk"

今回は、DynamoDBというクラスと、configというメソッドを使用しますので、それぞれインポートします。

3. Region の指定

config.update({
    region: "ap-northeast-1"
})

DynamoDBを使用するリージョンを指定します。
東京リージョンは ap-northeast-1 です。

他のリージョンを確認したいときは、以下のページを参照してください。

AWS のリージョンとエンドポイント

テーブル定義パラメタの作成

let param:DynamoDB.CreateTableInput = {
    TableName: "codeSnippets",
    KeySchema: [
        { AttributeName: "Key1", KeyType: "HASH"},
        { AttributeName: "Range1", KeyType: "RANGE"}
    ],
    AttributeDefinitions: [
        { AttributeName: "Key1", AttributeType: "S" },
        { AttributeName: "Range1", AttributeType: "S" }
    ], 
    ProvisionedThroughput: {
        ReadCapacityUnits: 5,
        WriteCapacityUnits: 5
    }
};

DynamoDB.CreateTableInput インタフェースを使用してパラメタを定義します。

TableName : 作成するテーブル名を指定します。

KeySchema : キーを定義します。

AttributeName でキー属性名を指定し、KeyType でキータイプを指定します。

キータイプは「ハッシュ」と「レンジ」の２種類があります。「ハッシュ」のみで構成される場合は、
キー項目は１つになり、「ハッシュ」と「レンジ」の２つで構成される場合は、それぞれ１つずつの
キー項目を指定します。

AttributeDefinitions : キー項目属性を定義します。

AttributeName はさきほどと同じ、キー項目名を指定します。

AttributeType で、データ項目を指定します。

- 文字列データの場合は「S」、数値データの場合は「N」、バイナリデータの場合は「B」を指定できます。

ProvisionedThroughput : スループットをプロビジョニングモードで指定します。

ReadCapacityUnits が読み込みキャパシティユニット、WriteCapacityUnits が書き込みキャパシティユニットです。

↓ここの公式ドキュメントに詳しく記載されています。

読み込み/書き込みキャパシティーモード

カテゴリー
aws

AWS AppSync Chat Starter でチャットアプリを構築する

PWA と クライアント側でデータを素早く同期する仕組みを構築したくて、AWS AppSync を試してみたくなりました。AWS AppSync Chat Starter で Angular のチャットアプリが簡単に構築できるとのことで、やってみました。

1. 公式URL

AWS AppSync Chat Starter (Angular)のGithubページは以下にあります。

https://github.com/aws-samples/aws-mobile-appsync-chat-starter-angular#readme

2. awscli インストール

すでにインストールされている方は不要です。まだインストールしていない方はインストールしましょう。


$ pip install awscli --upgrade --user

はじめてインストールしたら、aws configureでAWSユーザーと紐づけを行いましょう。

3. amplify インストール

こちらも、インストール済みであれば不要です。


$ npm install -g @aws-amplify/cli

4. angular cli インストール

インストール済みであれば不要です。


$ npm install -g @angular/cli

5. github リポジトリのクローン

以下のリポジトリをクローンしましょう。


$ git clone https://github.com/aws-samples/aws-mobile-appsync-chat-starter-angular.git
$ cd aws-mobile-appsync-chat-starter-angular

6. AWS ユーザーのアクセス権限追加

AWS ユーザーのアクセス権限は以下のように設定しました。

  1. AWSLambdaFullAccess
  2. IAMFullAccess
  3. AmazonS3FullAccess
  4. CloudFrontFullAccess
  5. AWSAppSyncAdministrator
  6. AWSLambdaExecute
  7. AmazonCognitoPowerUser
  8. AWSCloudFormationReadOnlyAccess
  9. cloudformationfullaccess

cloudformationfullaccessは独自に定義した管理ポリシーで、以下のように定義しています。


{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "cloudformation:*"
            ],
            "Resource": "\*"
        }
    ]
}

7. amplify init


$ amplify init

amplify init で初期化します。選択肢は以下のように設定しています。


Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project awsmobileappsyncchat
? Enter a name for the environment test
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using angular
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  npm run-script build
? Start Command: ng serve
Using default provider  awscloudformation
For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default

8. npm install

必要なモジュールをインストールします。


$ npm install

9. amplify add auth

ユーザー認証まわりを設定していきます。


$ amplify add auth

選択肢は以下のようにしました。

Do you want to use the default authentication and security configuration?

--> Default configuration

Warning: you will not be able to edit these selections.
How do you want users to be able to sign in when using your Cognito User Pool?

--> Phone Number

Warning: you will not be able to edit these selections.
What attributes are required for signing up? (Press space to select, to toggle all, to invert selection)

--> Email

10. amplify add analytics


$ amplify add analytics

11. amplify push


$ amplify push

12. Cognito ユーザープールを取得する

以下のコマンドで Cognito ユーザープール名を取得します。


$ grep aws_user_pools_id src/aws-exports.js
    "aws_user_pools_id": "ap-northeast-1_XXXXXXXX",

13. AppSync で ChatApp のAPIを生成して、Cognito ユーザープールを設定する

Create with Wizard からAPIを生成します。

Settings の中の User Pool configuration から、さきほど取得した Cognito ユーザープールを設定します。

14. amplify add codegen

AppSync の Getting Started 画面から amplify add codegen のコマンドをコピーして実行します。

15. ng serve

ng serveコマンドを実行して、テスト用のAngularサービスを起動します。私はDockerイメージで構築したので外部ホストからアクセスする必要がありましたので、以下のコマンドで起動しています。


$ ng serve --host "0.0.0.0"

http://192.168.xx.yy:4200/ にアクセスして、以下のように表示されたら成功です。

16. ユーザー登録と承認

ユーザー登録に電話番号やメールアドレスを入力しますが、適当なものを入力したいですよね。しかしそうするとレスポンスコードが届かないので、 AWS Cognito 画面から強制的に確認処理を行いましょう。

カテゴリー
Angular aws TypeScript

TypeScript で AWS DynamoDB のテーブル作成からデータ登録までを行う

1. AWS に登録する

まずは AWS に登録しましょう。無料枠が結構ありますので試しに使ってみるというのもいいと思います。

https://aws.amazon.com/jp/

2. IAM でDynamoDB にアクセスできるユーザーを作成する

IAM は Identity and Access Management の略で、AWS のサービスに接続するためのユーザーやアクセス権限を設定するためのものです。

今回は dynamouser というユーザーを作成します。SDKからのアクセスが必要なので、「プログラムによるアクセス」にチェックを入れます。また、コンソールのアクセスは不要なので、こちらはチェックを外しています。

権限は AmazonDynamoDBFullAccess にしました。実際の運用でフルアクセス権限を付与するのはあまりよくないと思いますが、今回は動作確認ですのでフルアクセス権限のユーザーを作成します。

ユーザーの作成が完了したら、アクセスキーIDとシークレットアクセスキーが表示されます。SDKからの接続時に使用するので、メモしておくか、CSVファイルをダウンロードしておきます。

3. node モジュールの aws-sdk をインストールする

サクッとDynamoDB を使いたいので、Javascript の aws-sdk をインストールします。このコマンドでインストールもサクサク終わります。


npm i aws-sdk

AWS Javascript SDK の公式ドキュメントは以下にあります。

https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/

4. DynamoDB にテーブルを作成する


// create_dynamo_db.ts
import * as AWS from "aws-sdk"
AWS.config.update({
    region: "ap-northeast-1",
    accessKeyId: "アクセスキーID",
    secretAccessKey: "シークレットアクセスキー"
})
let dynamodb = new AWS.DynamoDB();
let params : any = {
    TableName: "SampleTable1",
    KeySchema: [
        { AttributeName: "id", KeyType: "HASH" }
    ],
    AttributeDefinitions: [
        { AttributeName: "id", AttributeType: "N" }
    ],
    ProvisionedThroughput: {
        ReadCapacityUnits: 5,
        WriteCapacityUnits: 5
    }
};
dynamodb.createTable(params, (err, data) => {
    if(err) {
        console.log(Unable to create table: ${JSON.stringify(err, undefined, 2)})
    }else {
        console.log(Created table: ${JSON.stringify(data, undefined, 2)})
    }
})
  • AWS.config.update に入力する情報はさきほどIAMでユーザー登録した情報です。このユーザーでDynamoDBにアクセスしていきます。regionは基本的に東京（ap-northeast-1）だと思いますが、違う場所に作成している場合は以下からregisonを調べることができます。

https://docs.aws.amazon.com/ja_jp/general/latest/gr/rande.html

  • TableName に今回作成するDynamoDB のテーブル名を入力します。
  • KeySchema は、DynamoDBのパーティションキーやソートキーを定義するものです。今回はキー項目はidだけですので、AttributeName は idだけになります。

https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/aws-properties-dynamodb-keyschema.html

  • AttributeDefinitions は属性定義です。idという項目が数値なのか文字列なのか、などを定義します。N は数値型です。詳しくは以下のページに記載されています。

https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/DynamoDBMapper.DataTypes.html

AWSのDynamoDBのページを開いて、以下のように表示されていたら成功です。

5. DynamoDB にデータを登録する


import * as AWS from "aws-sdk"
AWS.config.update({
    region: "ap-northeast-1",
    accessKeyId: "アクセスキーID",
    secretAccessKey: "シークレットアクセスキー"
})
var docClient = new AWS.DynamoDB.DocumentClient();
let params : any = {
    TableName: "SampleTable1",
    Item: {
        "id": 1,
        "info": {
            "data": "This is test data",
            "created": "2019-04-08",
            "JP": "これはテストデータです。"
        }
    }
};
docClient.put(params, (err, data) => {
    if(err) {
        console.log(Unable to add item: ${JSON.stringify(err, undefined, 2)})
    }else {
        console.log(PutItem succeeded: ${JSON.stringify(data, undefined, 2)})
    }
})
  • インサートは、DocumentClient.put を使用します。
  • TableName にさきほど作成したテーブル名をセットします。
  • Info は、キー項目である id に紐づいて格納するデータになります。今回は３項目 data, created, JP を格納しています。

AWSのDynamoDBのページを開いて、以下のように表示されていたら成功です。

info の項目をコピーすると、さきほど登録した情報が取得できます。

{ "created" : { "S" : "2019-04-08" }, "data" : { "S" : "This is test data" }, "JP" : { "S" : "これはテストデータです。" }}

カテゴリー
aws

AWS S3にファイルをアップロードしたいけど、node_modules は除外する方法

自分はデータバックアップ先として AWS S3 を使っています。基本的にはAWSのCLIコマンドを使用していますが、容量が大きい node_modules を除外してS3にアップロードしたいとき、以下のようにしています。


aws s3 sync (ローカルディレクトリ) s3://(s3バケット名)/ --exclude "*/node_modules/*"

こうすることで転送容量を抑えられ、短時間で同期ができます。

ちなみに、ローカルディレクトリと同じデータにしたい場合（ローカルに存在せずにs3に存在する場合）にs3からデータを消すには、最後に--deleteオプションを入れておきます。


aws s3 sync (ローカルディレクトリ) s3://(s3バケット名)/ --exclude "*/node_modules/*" --delete

AWS Console を表示するには、Command Gate が便利です。

Command Gate というウェブアプリを自作しました。ユーザー登録なしで利用できます。コマンドベースでウェブリソースにアクセスできます。

https://usefuledge.com/gate/index.htmlに接続し、コマンドに

aws s3

と入力してエンターキーを押すと、s3の管理画面が表示されます。
ほかにも

aws ec2

や

aws cloudfront
aws route53

など、ショートカットコマンドを定義しています。

詳しくは「コマンド一覧」または

help

と実行してみてください。