NuxtとGraphQLとAWS(Amplify, appsync, dynamodb, cognito, s3....)を用いてWebアプリチュートリアルPart1

% npm install -g @aws-amplify/cli

% amplify configure

Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

Specify the AWS Region
? region:  ap-northeast-1     // ap-northeast-1(東京)を指定
Specify the username of the new IAM user:
? user name:  admin-app   // <-　ユーザ名なのでなんでも良いです

Press Enter to continue

Enter the access key of the newly created user:
? accessKeyId:  ********************                          // <-csvファイル参照
? secretAccessKey:  ****************************************  // <-csvファイル参照
This would update/create the AWS Profile in your local machine
? Profile Name:  blog       // <-defaultでもいいですが、名前をつけました。

Successfully set up the new user.

% npm init nuxt-app <project-name>

% npm init nuxt-app blog

✨  Generating Nuxt.js project in blog
? Project name: blog
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: None
? Version control system: Git

  To get started:

    cd blog
    npm run dev

% amplify init

Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project blog
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code          // <-使っているやつで！！
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path:  .
? Distribution Directory Path: dist
? Build Command:  npm run-script build
? Start Command: npm run-script serve

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use blog

% npm install aws-amplify @aws-amplify/ui-components

% npm install aws-amplify @aws-amplify/ui-vue

import Vue from 'vue'
import Amplify from 'aws-amplify'
import '@aws-amplify/ui-vue'
import awsExports from '../aws-exports'

Amplify.configure(awsExports)
Vue.use(Amplify)

// 略
plugins: [{ src: '~/plugins/amplify.js', ssr: false }],
// 略

% amplify add api

// APIが聞かれる
? Please select from one of the below mentioned services: GraphQL
// apiの名前
? Provide API name: blog
// 認証方法
? Choose the default authorization type for the API API key
? Enter a description for the API key: blog

? After how many days from now the API key should expire (1-365): 7
? Do you want to configure advanced settings for the GraphQL API No, I am done.
// スキーマファイルが存在するか
? Do you have an annotated GraphQL schema? No
// スキーマファイルのテンプレートです。どちらでも良いです。
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
// 今すぐスキーマファイルを編集するのか。どっちでもいいです。vscord手動で開くか、自動で開くかなので
? Do you want to edit the schema now? No

type Blog @model {
  id: ID!
  title: String!
  image_url: String
  content: String
}

amplify push

.....
Current Environment: dev

| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Api      | blog          | Create    | awscloudformation |
// 続けますか
? Are you sure you want to continue? Yes
.....
新しく作成したGraphQL APIのコードを生成しますか？
? Do you want to generate code for your newly created GraphQL API Yes
コード生成言語のターゲットを選択します。
? Choose the code generation language target javascript
GraphQLクエリ、ミューテーション、サブスクリプションのファイル名パターンを入力します。
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
クエリ、ミューテーション、サブスクリプションなど、すべての可能な GraphQL 操作を生成/更新しますか？
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
ステートメントの最大深度を入力します。
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2

% amplify status

Current Environment: dev

| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Api      | blog          | No Change | awscloudformation |
GraphQL endpoint: *********************************
GraphQL API KEY: **************

% amplify add auth

 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. # 以下の設定は設定後の変更不可
 How do you want users to be able to sign in? Email
 Do you want to configure advanced settings? No, I am done.

% amplify push
? Are you sure you want to continue? Y