AWSを使ってサーバレスWebアプリケーションを10分程度で作る方法

この記事はMisoca+弥生+ALTOA Advent Calendar 2018 12日目の記事です。

こんにちは、弥生のおおはしです。Webアプリケーションエンジニアとしてフロントエンド・バックエンドを担当しています。最近はオンプレからAWSへのデータベース移行なんかもやっています。

今回は、サーバレスWebアプリケーションをAWSを使って作成する方法を紹介します。

なぜサーバレス?

サーバレスとはサーバーを意識する必要が(比較的)要らないアプリケーションアーキテクチャのことです。 (『サーバーを使わない』ではありません。)

つまり、アプリケーションをサーバレスで開発することは、サーバー管理=運用にかける時間を削減して開発に注力できるという大きなメリットになります。

具体的には下記のような作業を減らすことができます。

  • サーバーへの各種パッケージインストール/依存関係管理
  • コードベースでのWebサーバソフトウェア(nginxやApache)の設定
  • ビルドパッケージなどのデプロイ操作

近年DevOps開発(運用と開発を一つのチーム内で行う開発)が増えた背景には、サーバーレスを実現するためのサービスの増加があると言われるほどです。

ただし、裏で色々とやってくれる反面、柔軟性に制限があるというデメリットもあるので注意が必要です。

実現方法

今回は下記構成の通り、AWSのLambda+API Gatewayの2サービスで簡単なサーバレスWebアプリケーションを実現します。 f:id:ym_AdventC:20181211145756j:plain

Lambdaとは

コンピューティングサービスです。では曖昧すぎるので簡単に言い換えると、他のAWSサービスをプログラミングで自由に操作することができるサービスです。
例えばDynamoDBにデータを登録したりS3からファイルを取得したりSQSにキューを登録したりとなんでもできます。
関数という単位でプログラムを作るので、今回は「HTMLを返却する関数」を作成します。

API Gatewayとは

APIのホスティングサービスです。
APIのI/Oと処理内容を設定すれば直ぐに利用可能なAPIを作成してくれます。
今回は処理内容を上記の「HTMLを返却するLambda関数」に設定し、レスポンスのcontent-typeをtext/htmlにすることでブラウザにHTMLを返却するWebアプリケーションを実現します。

因みに・・・

画像を表示したり、データストアを利用するようなしっかりしたアプリケーションを作る場合は下記の構成図のようにS3やDynamoDBが必要です。今回は割愛するので興味がある方はココココなどを参考にしてください。 f:id:ym_AdventC:20181211150630j:plain

作業手順

Lambdaでの関数作成方法

1.まずはAWSコンソールのLambda画面にいき、右上のオレンジボタン「関数の作成」を押下
2.適当な「関数名」を入力し、「ランタイム」で任意のプログラミング言語を選択し、「既存のロール」で任意のロールを作成(ロールはIAMで適当なものを作成してください。)
f:id:ym_AdventC:20181211161317j:plain 3.画面中部の「関数コード」部にエディタが表示されるので、下記コードを貼り付け

exports.handler = function(event, context){
    context.done(null, "<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"><title>12/12</title></head><body><span  style=\"font-size : 80pt\">今日は平成最後のバッテリーの日</spam></body></html>")
}

API GatewayでのAPI作成方法

API Gatewayは設定項目が多くLambdaに比べてとっつきにくいですが、最低限の機能の実現であれば複雑な設定は不要です。

1.まずはAWSコンソールのAPI Gateway画面にいき、左上の青ボタン「APIの作成」を押下
2.適当なAPI名を入力し、エンドポイントタイプで「リージョン」を選択し、APIを作成
f:id:ym_AdventC:20181211160328j:plain 3.作成されたAPIの設定画面に遷移されるので、アクション>メソッドの作成でメソッドを作成
f:id:ym_AdventC:20181211160605j:plain 4.作成するメソッドを「GET」にしてチェックボタンを押下し、統合タイプに「Lambda関数」を選択、Lambda関数にさきほど作成したLambda関数名を入力して保存(メッセージボックスが表示されますが、OKで問題ありません。)
f:id:ym_AdventC:20181211162811j:plain 5.統合レスポンス>マッピングテンプレートでデフォルトの「application/json」を削除し、新たにcontent-typeが「text/html」でテンプレートが「$input.path('$')」のテンプレートを追加
6.メソッドレスポンス>200のレスポンス本文にコンテンツタイプが「text/html」でモデルがEmptyのレスポンスを設定
7.左上のアクション>APIのデプロイでメソッドを作成>デプロイされるステージで「新しいステージ」を選択してステージ名に任意の名前を入力してデプロイ
f:id:ym_AdventC:20181211175906j:plain 8.デプロイが完了すると画面上部にエンドポイントURLにアクセス

以上で作業は完了です。 画面は表示されましたか?

まとめ

今回は最低限の画面作成でしたが、10分程度でゼロからWebサイトの表示まで行うことができました。
上でも書いた通りサーバレスアプリケーションには柔軟性に制限がありますが、この手軽さは大きな魅力だと思います。
アプリケーションの規模や開発プロセス、メンバーのスキルなどを考慮してベストであればぜひ利用してみてください。

注意

AWSサービス全般で言えることですが、利用料金については十分ご注意ください。 今回作成したAPIはグローバルに公開されるので、誤ってURLをネット上に公開してアクセスされるとAWSから多額の請求をされる可能性があるので、取り扱いには注意しましょう。

次回予告

次回は@kaito_xgurxさんによる「HASHI-YASUME」の予定です!

Appendix

AWSを使った静的サイトの簡単な作り方

会社HPなどの完全に静的なサイトであればS3でもっと簡単に実現可能です。 詳しくはこちらなどを参考にしてください。

.Net Core 3.0 でWPF開発を試す

こんにちは。弥生の久保田です。 この記事はMisoca+弥生+ALTOA Advent Calendar 2018 の11日目として掲載しています。

はじめに

つい先日、.Net Core 3.0のプレビュー版がリリースされました。WPF と Windows Formが.Net Coreでサポートされるとアナウンスされています。 .Net CoreということでWPFがオープンソースになるわけですが、.Net FrameworkのWPFとどう変わるのか興味がわいたので、これを機に.Net CoreでWPF開発を試してみようと思います。すでに試されている方もいて何番煎じがわかりませんが、やってみます。

.Net Coreとは?

docs.microsoft.com

クロスプラットフォームを前提とした.Netの開発プラットフォームで Windows, Mac, Linux上で動作するアプリケーションを作成できます。 一方で.Net FrameworkはWindows上で動作することを前提とし、WindowsOSに依存する機能が多数含まれています。

.Net Coreはdotnetコマンドを使ってプロジェクトの作成から、パッケージ管理、ビルド、発行まで行うことができ、 Visual Studioを使わずともターミナルとテキストエディタがあれば開発が可能です。

環境

  • Windows 10 Pro
  • .Net Core 3.0 Preview 1
  • Visual Studio Code

.Net Core 3.0 Previewのインストール

ここからインストーラー形式のSDKをダウンロードし、インストールします。

dotnet.microsoft.com

WPFのプロジェクト作成

以下のコマンドで新規プロジェクトが作成できます。 今回は「wpf_application」という名前で作成します。 -nオプションでプロジェクト名を指定することで、フォルダが自動で作成されます。

> dotnet new wpf -n wpf_application

作成直後のフォルダはこんな感じです。 Visual Studioでプロジェクトを作るのとあまり変わらないですね。

f:id:ym_AdventC:20181210165835p:plain

以下のコマンドでアプリケーションを実行できます。

> dotnet run

f:id:ym_AdventC:20181210165945p:plain

このままだと見た目が寂しくWPFっぽくないので、WindowChromeを利用してウィンドウを少し変更してみます。


<Window x:Class="wpf_application.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf_application"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        Background="#FF494949"
        BorderBrush="#FF14A9FF"
        BorderThickness="1"
        Foreground="White">
    <WindowChrome.WindowChrome>
        <WindowChrome CornerRadius="3" GlassFrameThickness="1" ResizeBorderThickness="8" UseAeroCaptionButtons="False" CaptionHeight="26" />
    </WindowChrome.WindowChrome>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <DockPanel Grid.Row="0">
            <TextBlock Text="MainWindow" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="6,3,12,3" FontSize="14.667" />
            <Button Content="✕" Width="24" Height="24" HorizontalAlignment="Right" Background="Red" BorderThickness="0" Foreground="White" WindowChrome.IsHitTestVisibleInChrome="True"
                    Click="ButtonExit_Click"/> 
        </DockPanel>
        <Label Grid.Row="1" Content="Hello .NET Core!" HorizontalAlignment="Center" VerticalAlignment="Center"
               FontSize="40" Foreground="White"/>
    </Grid>
</Window>

変更後はこちら

f:id:ym_AdventC:20181210170021p:plain

アプリケーションの発行

.Net Coreではアプリケーションの配布物に.Net Coreのランタイムを含めることができるそうで、これを「自己完結型の展開 (SCD)」といいます。 今作成したアプリケーションで試してみたいと思います。

docs.microsoft.com

まずは、.csprojファイルを編集します。 PropetyGroupにRuntimeIdentifiersタグを追加


 <Project Sdk="Microsoft.NET.Sdk.WindowsDesktop">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>netcoreapp3.0</TargetFramework>
    <UseWPF>true</UseWPF>
    <RuntimeIdentifiers>win10-x64</RuntimeIdentifiers>
  </PropertyGroup>

</Project>

dotnet publish コマンドでアプリケーションを作成

> dotnet publish -c Release -r win10-x64

作成されたファイルは./bin/release/netcoreapp3.0/publishに配置されます。 フォルダの中を見るとアプリケーションの実行ファイルの他に、.Net Core本体のDLLが大量に含まれていました。 publishフォルダをまるごと、別の仮想マシン(Win10 64bit)へ配置したところ、.Net Coreが入っていなくても起動できました。

これのメリットとしては、ランタイムの配布やバージョンアップがOSの管理者でなくても開発者主導で行える事ですね。 逆に配布物のファイルサイズが大きくなってしまうデメリットもあります。

まとめ

.Net Core 3.0のWPFを試してみましたが、ターミナルとテキストエディタ(VSCode)で.Netのアプリを作るのは新鮮な気持ちになりました。 今回感じた事としては

  1. VisualStudioの起動を待つことなく、プロジェクトの作成も早いので、ちょっとコードを書いて動かしたい場合は便利
  2. 自分の好きなエディタが使える
  3. 現在はWindowsしかサポートされていないが今後はクロスプラットフォーム対応が期待できる

といったところでした。

次回は@oharyoさんによる「AWSのサービス2つでサーバーレスWebアプリケーションを作る方法」の予定です!

弥生で"Meetup #7 GraphQL Tokyo Autumn"が開催されました!

こんにちは。開発本部の森です。

いよいよ12月、今年も残すところ1か月となりましたね。
気温もだいぶ下がり、うちの可愛いバイク(CBR250R)もそろそろ店じまいです。

そんな年の瀬、GraphQLのユーザコミュニティである GraphQL Tokyo の"Meetup #7 GraphQL Tokyo Autumn"が開催され、弥生がスポンサーとして会場・食事・飲み物の提供を行いました。

会場の様子

GraphQL TokyoのMeetupは、オープンスペース方式で行われました。

オープンスペースとは、各自が喋りたいテーマを持ち寄り、その中からテーマと進行役(セッションオーナー)を選出し、各グループに分かれて自由に発表、議論、雑談などを行うイベント形式です。
セミナー形式とは異なり少人数でセッションを行うため、初心者にとっても議論に参加しやすい場となります。

セッションは3テーブル×3セッションありましたが、参加者のほとんどが初回参加者だったため、1セッション目は3テーブル中2テーブル が初心者向けセッションでした。

セッションの様子

各テーブルではピザとアルコールを摂取しながらワイワイと和やかに、議論に花が咲きました。 f:id:morinco25:20181205205223j:plain

私はAWS AppSyncのチュートリアルを触ったことがある程度のド初心者だったので、初心者セッションに参加。
GraphQL TokyoのオーガナイザーでありセッションオーナーであるFumiaki M.さんに、GraphQL is 何?をわかりやすく噛み砕いて説明していただき、そこから、絞り込み検索はどうやるの?情報取得ではなく情報登録はどうするの?普通のRestAPIと比べてレスポンスはどうなの?などといった質疑応答タイムです。

「画面で必要な項目は画面が知っている」というフレーズが心に残りました。
RestAPIにおいて、最小公倍数で作ろうとしたら巨大なレスポンスが生成された、というのがあるあるな悩みの一つかと思いますが、GraphQLなら、画面側が好きな項目を好きな形式で取得することができます。

次に参加したセッションのテーマは「GraphQL 認証認可まわり~マイクロサービスを添えて~」でした。 セッションオーナーはwatikoさんです。
GraphQLでAPIを実装するにあたって、認証をどうするか。
パターンとしてはGraphQL内部で認証する/GraphQLの外で認証するという2パターンになるかと思いますが、GraphQLの手前で実行するのが一番よいのではないか?という考察でした。
Prisma(RDBMSにGraphQL APIを生成するミドルウェア)やSangria(ScalaのGraphQLライブラリ)、Graphcool(GraphQLのバックエンドを構築できるBaaS)などといった初耳のワードもたくさん飛び出し、勉強が必要だなとモチベーションがあがりました。

セッションの合間には、弥生の会社説明LTもさせていただきました。
f:id:morinco25:20181205205118j:plain

ヤヨイヒロバ

弥生では、今回開催場所のヤヨイヒロバを勉強会やイベント向けに無料で提供できるよう準備中です。
ブログ内で後日ご案内いたしますので、ご興味がある方、イベントスペースにお困りの方、ぜひご連絡ください。
最大100人程度収容可能です。 f:id:morinco25:20181201184840p:plain

ヤヨイヒロバでは、社外向け勉強会であるもくテクも開催しています。 こちらもぜひぜひご参加ください!

感想

初心者に温かく、とても楽しかったです!
冒頭から懇親会かのような、自由に発言できる空気でした。
初心者に優しい一方で知識豊富な方が多数参加されており、コアな議論に花が咲いていました。
まだまだ勉強中だけど、GraphQLすごい!
ぜひ次回Meetupも参加させていただきたいと思います。
f:id:morinco25:20181201192125p:plain