# 未整理. Amplifyチュートリアル.Step1

# コマンド

# 事前インストール

npm install -g @vue/cli
npm install -g @aws-amplify/cli

# Vue プロジェクト作成 (分離したいが)

vue create simple-chat-amplify-1
cd simple-chat-amplify-1
npm install vue-material element-ui --save

# Amplify の必要なリソース作成 (IAM, S3, CloudFormation)

作成した Vue プロジェクト (simple-chat-amplify-1) 内

amplify configure
amplify init
    # 削除する(init前の状態にする)場合は amplify delete
amplify status

amplify serve

# コマンド: クライアントライブラリ

npm i aws-amplify aws-amplify-vue

# コマンド: 認証機能追加

スキップ

amplify add auth

# コマンド: 公開

S3 に静的Webサイトホスティング

amplify add hosting
    # S3 and CloudFront
    # S3 with HTTPS (PROD)
amplify status
amplify publish
https://d303g04s5ebhrn.cloudfront.net/index.html
https://simplechatamplify1-hostingbucket-dev.s3-ap-northeast-1.amazonaws.com/index.html

# コマンド: api 追加

amplify add api
    # GraphQL

schema.graphql 編集

type Message @model {
  id: ID!
  username: String!
  content: String!
}

api を追加 (このタイミングで (Clientから) Model にアクセスするコードが作成される)

amplify status
    # javascript
amplify push
GraphQL endpoint: https://zbbyep4k25e3llgkaywjcea464.appsync-api.ap-northeast-1.amazonaws.com/graphql
GraphQL API KEY: da2-ja6hgszmjjcnnpyvep4bxoifee
amplify serve
amplify publish

# GraphQL について

アノテーション?の @model をつけて定義すると、
createXxxx, listXxx が自動で生成される?

https://docs.amplify.aws/cli/graphql-transformer/overview (opens new window)

[ 📩 ご意見 ]