カテゴリー
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 ユーザーにとってはウェブサイトを開発する選択肢のひとつとして考えて頂けるといいかと思います。

カテゴリー
ASP.NET C#

ASP.NET CORE で Tweet 機能を構築する

ASP.NET CORE では razor 構文というものが使用できます。razor 構文を使用すると、クリック時のイベントロジックを実装したり、テキストに入力した値を取得することができるようになります。

この記事では、ASP.NET CORE で razor 構文を使用して、ツイート専用画面を構築する方法を紹介します。

1. ファイル構成とソース

今回は2つのファイルに分けて構築します。

1.1 Shared/TweetBox.razor

Sharedフォルダにrazor ファイルを作成することで、独自タグのように使用することができます。ソースコードは以下のようになります。

<h3>TweetBox</h3>

<textarea id="note" cols="10" style="width: 100%" @bind="@tweetText" placeholder="TweetText"></textarea>



<div>
    <a href="https://twitter.com/intent/tweet?text=+@(tweetText)">
        <img src="/Image/tweet.png" style="border-radius: 30%; border: 1px solid black;" width="100%" />
    </a>
</div>

@code {

    string tweetText;

}

上から3行目の textarea でツイート本文を記載します。

tweetText という string型の変数に textarea の入力内容をバインドしています。ちなみに、tweetText という変数は、@code ブロックの中で宣言しています。

実際のツイートロジックは、Twitter から提供されている Web Intent を使用します。Web Intent の詳細は以下のURLで説明されています。

https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent

1.2 Pages/Tweet.razor

Pages フォルダで実際のページを構成していきます。ソースコードは以下になります。

@page "/Tweet"

<TweetBox />

TweetBox というタグを使用して、さきほどのソースを呼び出しています。

2. 実行イメージ

こんな感じでツイートができます。