今から始めるServerless Frameworkでサーバーレスデビュー【プラグイン番外編#3】

2021年6月5日 10:51

番外編としてプラグイン編に入ります。
Serverless Frameworkでは、プラグインを使用することで機能を拡張することができます。
これは非常に便利な機能ですし、Serverless Frameworkを使用する際にはほぼ必須となるでしょう。
バックエンド編で導入した設定について、さらに詳しく紹介したいと思います。

// serverless.yml

# ------------------------------------------
# plugins
# サービスに必要なプラグインを設定
# ------------------------------------------
plugins:
- serverless-appsync-plugin
- aws-amplify-serverless-plugin
- serverless-plugin-typescript

1.serverless-appsync-plugin

こちらのプラグインは言わずもがな、AppSyncを利用するためのプラグインですので、詳細な説明は割愛させていただきます。

2.aws-amplify-serverless-plugin

こちらのプラグインは、フロント側でAmplifyを使用する際に利用します。
ServerlessFrameworkで構築した環境にフロントエンドからアクセスするための設定ファイルを生成します。
設定ファイルの内容は、GraphQL APIのエンドポイントやCognitoのaws_user_pools_idなどです。
serverless.ymlに以下のように設定を記述しておくと、デプロイ時に自動的に該当する設定のaws-exports.jsファイルが生成されます。

// serverless.yml
custom:
amplify:
  - filename: ./src/aws-exports.js // 事前にsrcディレクトリを作成しておきます
    type: javascript
    appClient: UserPoolClient

aws-exports.jsは、以下のような形式で設定されたファイルです。

const awsmobile = {
  aws_appsync_authenticationType: '',
  aws_appsync_graphqlEndpoint: '',
  aws_appsync_region: '',
  aws_cloud_logic_custom: [
      {
          endpoint: '',
          name: '',
          region: ''
      }
  ],
  aws_cognito_region: '',
  aws_project_region: '',
  aws_user_pools_id: '',
  aws_user_pools_web_client_id: ''
};
export default awsmobile;

生成されたファイルは、上記のようなオブジェクト形式になっています。
このファイルをフロントエンド側で読み込んで初期化することで、Cognitoの認証やGraphQLの操作などが可能になります。
各設定情報が正しく指定されているため、フロントエンドはバックエンドとの連携がスムーズに行えます。

3.serverless-plugin-typescript

TypeScriptでLambdaのFunctionsを書くために導入するプラグインは、serverless.ymlの設定ファイルをTypeScriptで記述するためのものです。
通常、serverless createコマンドを使用してTypeScriptのテンプレートを作成することも可能ですが、その場合、serverless.ymlファイルがserverless.tsになってしまいます。
しかし、LambdaのコードはTypeScriptで書きたいけれども、設定ファイルはyml形式で記述したい場合もあります。
そこで、今回はこのプラグインを使用して、TypeScriptでLambdaを記述しながらも設定ファイルはyml形式で使用する方法を取ります。

①それぞれのパッケージをnpm installをする。
②package.jsonを編集する。
③tsconfig.jsonを追加する。
④TypeScriptでFunctionsコードを書く。
⑤deployする。

// package.json

{
　// 起点となるindex.tsがある場合はindex.tsを指定する。
　// index.tsが無い場合はhandler.jsのようにしておくとcompileされる。
    "main": "handler.js",
    "dependencies": {
        "serverless": "^2.0.0",
        "serverless-plugin-typescript": "^1.1.9",
    },
    "devDependencies": {
        "typescript": "^4.0.2"
    }
}

// tsconfig.json
{
    "compilerOptions": {
        "preserveConstEnums": true,
        "strictNullChecks": true,
        "sourceMap": true,
        "allowJs": true,
        "target": "es5",
        "outDir": ".build",
        "moduleResolution": "node",
        "lib": ["es2015"],
        "rootDir": "./"
    }
}

// Functionsの構成
├── functions
│   ├── cognito.ts
│   └── hello.ts

最後に、"sls deploy -v"コマンドを実行することでFunctionsがデプロイされます。以上でプラグインの最低限の説明は終了です。
ServerlessFrameworkでは、プラグインを使用することでさまざまな機能を簡単に追加することができますので、ぜひ活用してみてください。

● 今から始めるServerless Frameworkでサーバーレスデビュー【バックエンド編#1】
https://note.com/ryoppei/n/n9163712b68ad

● 今から始めるServerless Frameworkでサーバーレスデビュー【フロントエンド編#2】
https://note.com/ryoppei/n/n0858cfca7784

● 今から始めるServerless Frameworkでサーバーレスデビュー【プラグイン番外編#3】https://note.com/ryoppei/n/ne110ac6a440f

● 今から始めるServerless Frameworkでサーバーレスデビュー【ファンクション番外編#4】https://note.com/ryoppei/n/n71809e2520e0

● 今から始めるServerless Frameworkでサーバーレスデビュー【マッピングテンプレート番外編#5】
https://note.com/ryoppei/n/n20b4afd705e5

今から始めるServerless Frameworkでサーバーレスデビュー【プラグイン番外編#3】

1.serverless-appsync-plugin

2.aws-amplify-serverless-plugin

3.serverless-plugin-typescript

いいなと思ったら応援しよう！