自炊記録 LINE アプリを作ってみた。

LIFF を実現させるためには、HTTPS のエンドポイントを提供する必要がありますが、Amplify の静的ホスティングの機能を使用すれば簡単に実現できます。
Ampify CLI が提供されているため、数コマンドで、静的ホスティングの環境を作成できます。
ホスティングは、以下二つの方法が提供されています。

• Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
• Amazon CloudFront and S3

Hosting with Amplify

The AWS Amplify Console provides a Git-based workflow for building, deploying, and hosting your Amplify web app — both the frontend and backend — from source control. Once you connect a feature branch, all code commits are automatically deployed to an amplifyapp.com subdomain or your custom domain
https://docs.amplify.aws/cli/hosting/hosting/#using-aws-amplify-console

Git ベースのCI/CDを提供しており、main ブランチにマージされると、自動的にデプロイするといった機能を簡単に実現できます。また、ブランチ毎に、サブドメインを切ってデプロイするため、機能ブランチごとにデプロイ環境で動作を確認するといったこともできます。
また、上記以外にも、カスタムドメインやアクセス制御（ベーシック認証）、なども提供されており、簡単に設定することが可能です。

デメリットというか、気になる点としては、自動ビルドの時間が長いです。
毎回、3 ~ 5 分程度かかるため、ちょっとデプロイして動作確認したい場合に若干のストレスを感じました。

Amazon S3 and Amazon Cloudfront

The Amplify CLI provides you the option to manage the hosting of your static website using Amazon S3 and Amazon Cloudfront directly as well. Following are the concepts you would encounter when adding S3 & Cloudfront as a hosting option for your Amplify app.
https://docs.amplify.aws/cli/hosting/hosting/#amazon-s3-and-amazon-cloudfront

S3 ＋ Cloudfront の環境を自動で構築します。Cloudformation で静的ホスティング環境を構築していた方は、こちらの方がイメージつきやすいかもです。
Amplify Console の場合は、ホスティング環境に対してはブラックボックスでしたが、こちらについては、構築された S3 と Cloudfront をコンソールで確認できるため、ホスティング環境の設定をカスタマイズすることが可能です。
例えば、 Cloudfront のキャッシュ時間の設定や、WAF の利用したいといったパターンに採用することが多いです。

LIFF と Amplify については、LINE DCでいくつかハンズオンの動画がありますので、興味がある方はご参照ください。

const result = await Storage.put("test.txt", "Private Content", {
  level: "private",
  contentType: "text/plain",
});

type Cooking 
  @model 
  @auth(rules: [
  {allow: owner, ownerField:"owner"}
  {allow: private, provider: userPools}
  ])
  @key(name: "BySpecificOwner", fields:["owner", "createdAt"], queryField: "listCookingsBySpecificOwner")
{
  id: ID!
  owner: String
  name: String
  link: String
  image: String
  foodstuff: [String]
  tag: [String]
  createdAt: AWSDateTime!
}

import API, { graphqlOperation } from '@aws-amplify/api';
import { createCooking } from '../graphql/mutations'; // 自動生成されるソース

const res = await API.graphql(graphqlOperation(createCooking, { input: {
            name: this.name,
            link: this.link,
            image: this.liffState(),
            foodstuff: this.selectedFood,
            tag: this.tags,
            }}));

## [Start] Set default values. **
$util.qr($context.args.input.put("id", $util.defaultIfNull($ctx.args.input.id, $util.autoId())))
#set( $createdAt = $util.time.nowISO8601() )
## Automatically set the createdAt timestamp. **
$util.qr($context.args.input.put("createdAt", $util.defaultIfNull($ctx.args.input.createdAt, $createdAt)))
## Automatically set the updatedAt timestamp. **
$util.qr($context.args.input.put("updatedAt", $util.defaultIfNull($ctx.args.input.updatedAt, $createdAt)))