使用Nuxt3创建的网页在AWS Amplify上部署
作为一名工程师，对于所谓的云也有兴趣，我也想试试看。
我之前制作过无数个网页，无论是以前的文章中创建的，还是个人用来测试的，亦或是被搁置一旁的网页…
突然回顾起为了软件包测试而创建的众多网页，我突然想到自己从未公开过任何一个。无论前后端编码的经验有多少，如果从未尝试过修改服务器或者发布网页，那么还能称之为工程师吗？不能！（反话！！！）
为了试一试，至少试着使用一次云服务吧！但是并不是说目的也没有编程学习的意义，而且也没有具体的事情要做，就去碰云服务。因此，我想把之前用Nuxt3测试过的简陋网页部署到AWS上去。
嗯嗯，我听说过Amazon S3和Amazon EC2。但根据阅读的说明，这次我们想要部署动态网页，所以将Amazon S3从选择中排除了。这样剩下的选项就是2到4了，但是EC2非常灵活，看起来需要自己配置很多环境。如果一次性处理太多事情，大脑的CPU使用率会达到100%，然后就无法继续运行了，所以这次跳过EC2。剩下的选项就是3到5了。
这次想要部署的是用Nuxt3制作的网页。那么就可以快速部署使用框架（如React、Angular、Vue等）构建的Web应用程序，如果有这样符合需求的说明，感觉只能选择这个了…。
嗯，我可以相信吗…？亚马逊大人…？
我并不自夸，但我从未尝试过按照手册步骤进行环境搭建一次就成功，那么按照上面所写的步骤真的可以轻松完成吗？
实践部分
纠结不决也无法理清！实践是关键！如果失败了就转向下一个！因此，我想按照Amazon准备的教程，将其部署到Amplify上。
放大 Amplify 的環境建置
开始之前，请确保你已经安装了以下的包，并且在继续阅读教程。
Node.js v14.x or later
npm v6.14.4 or later
git v2.14.1 or later
好的，完成版本确认后，现在就开始进行下一步的准备工作。请键入以下命令来安装AmplifyCLI。
npm install -g @aws-amplify/cli
当这个步骤完成之后，我们将使用以下的命令来进行Amplify CLI的设置。
amplify configure
当输入命令后，将会跳转到AWS的登录页面，然后在那里进行登录，接着按下Enter进入下一步。
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
我被问到选择一个区域，但是无论哪个地方都可以，随便选择ap-northeast-1然后点击下一步。
Specify the AWS Region
? region: ap-northeast-1
Follow the instructions at
https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli
然后就会被告知在AWS控制台上创建用户，您可以随意创建一个用户，并添加AdministratorAccess-Amplify策略，然后按Enter进入下一步。
to complete the user creation in the AWS console
https://console.aws.amazon.com/iamv2/home#/users/create
Press Enter to continue
输入accessKey和secretAccessKey后，按Enter键完成设置。
Enter the access key of the newly created user:
? accessKeyId: # YOUR_ACCESS_KEY_ID
? secretAccessKey: # YOUR_SECRET_ACCESS_KEY
This would update/create the AWS Profile in your local machine
? Profile Name: # (default)
Successfully set up the new user.
进行代码部署
由于准备工作已经完成，因此请转到要部署的代码根目录并执行以下代码，使用Amplify进行部署。
amplify init
有各种各样的内容逐个显示，但没有特殊变化，所以选择“Yes”并继续下一步，等待处理完成后，init便会结束。
The following configuration will be applied:
Project information
| Name: #適当なプロジェクト名
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: vue
| Source Directory Path: src
| Distribution Directory Path: dist
| Build Command: npm run-script build
| Start Command: npm run-script serve
? Initialize the project with the above configuration? Yes
只有在这里才算是真正的表演。现在执行以下命令。
amplify add hosting
然后会出现两个选项，分别按以下方式选择（选择上方两个选项）。
Select the plugin module to executeHosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
Choose a type: Manual Deployment
终于迎来了最后的关键阶段。只需以下指令通过，就完成了！
amplify publish
一切都顺利，URL已经显示出来了！按这些步骤做，真是太简单了！
然后转到404页面…
好了，现在我们已经完成了网页的发布，让我们试一试看是否能够正常运行吧！嗯，既然没有出现错误，确认一下就可以结束了！
造成這種情況的原因。
这种时候首先应该有伟大先贤的智慧，于是我在网络海洋中潜行，找到了完全符合的网页！
根据这篇文章，Nuxt3的构建命令是 npm run generate ，所以请进行修改。确实可能Nuxt3的构建命令已经改变了…
然后似乎只需要修改amplify.yml文件。而且据说可以通过AWS Amplify画面的“应用设置”>“构建设置”来修改amplify.yml文件。
感觉好像可以相对简单地解决，真是太好了太好了。
amplify.yml在哪里？
赶紧行动吧！立即修改相关部分！首先打开AWS，然后进入AWS Amplify…
请问是这样吗？
不是没有吗？
哦，那难道是在本地电脑上吗？
amplify.yml 被放置在哪里了？
如果使用amplify.yml，则会加强荼毘。
找不到amplify.yml文件…难道是要自己添加吗…？
还是说在某个步骤上出错了…？
在这种情况下，我翻查了一下操作，并不经意间注意到了添加时使用的amplify add hosting命令。
The following configuration will be applied:
Project information
| Name: #適当なプロジェクト名
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: vue
| Source Directory Path: src
| Distribution Directory Path: dist
| Build Command: npm run-script build
| Start Command: npm run-script serve
? Initialize the project with the above configuration? Yes
| Build Command: npm run-script build
这个家伙真是太过分了！
在执行命令”amplify configure project”后，按照以下顺序选择直到达到”Build Command”。
? Which setting do you want to configure? Project information
? Enter a name for the project プロジェクト名
? 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: src
? Distribution Directory Path: dist
? Build Command: (npm.cmd run-script build)
按照上面展示的构建命令，将它修改为npm run generate，然后再次运行amplify publish，并打开之前的URL，会发生什么？
太棒啦啊啊啊啊啊啊啊啊啊啊啊！出现了熟悉的廉价又无聊的界面啊啊啊啊啊啊啊啊啊啊！
第三部已经完成！
GraphQL的实现
WEB页面部署完成后，我想尝试在Amplify上实现后端。既然这样，我会添加一个收藏功能。
从项目的根目录运行以下命令来设置GraphQL：
amplify add api
在中国，只需一种选择：按照教程选择GraphQL > 继续 > 单个带字段的对象。在这里生成默认模式，但这次我们将保持模式的编辑不变。
? Select from one of the below mentioned services:
> GraphQL
? Here is the GraphQL API that we will create. Select a setting to edit or continue
> Continue
? Choose a schema template:
> Single object with fields (e.g., “Todo” with ID, name, description)
...
Edit your schema at <...>/schema.graphql or place .graphql files in a directory at <...>/schema
✔ Do you want to edit the schema now? (Y/n)
> no
请使用以下命令将由上述命令创建的数据集应用到amplify中。
amplify push
对于 Nuxt3 的实施
现在，我们已经在Amplify中成功设置了GraphQL，接下来我们想要在Nuxt3中实现数据的获取和注册处理。请使用以下命令安装适用于Nuxt3的包。
npm install aws-amplify
完成安装后，在plugins文件夹中创建amplify.ts文件，并添加以下描述。
import { defineNuxtPlugin } from '#app'
import { Amplify } from '@aws-amplify/core'
import amplifyConfig from '@/src/aws-exports'
export default defineNuxtPlugin(() => {
Amplify.configure(amplifyConfig)
})
然后，在想要使用GraphQL的页面中，可以添加以下导入语句。
import { generateClient } from 'aws-amplify/api';
import { createTodo, updateTodo, deleteTodo } from './graphql/mutations';
import { listTodos } from './graphql/queries';
const client = generateClient()
看了其他的文章，我发现很多人都在使用aws-amplify从API中导入（import）数据的方法，但是在我的环境中，如果我这样做，系统会告诉我找不到api，无法继续前进。所以我打算使用generateClient来代替。
import { API, graphqlOperation } from 'aws-amplify'
我想在上一次创建的公共浴池页面上添加一个收藏按钮，并进行相应的处理（设计还没有确定）。
处理使用上面添加的client来自动生成的注册API向GraphQL发送请求。
await client.graphql({
query: createTodo,
variables: {
input: {
id: queryPlaceId,
name: spa.value.name
}
}
})
本来需要从列或待办事项中更改，包括名称在内，但考虑到能够分别注册place_id和 name就能实现功能再现，而且目前只是为了确认GraphQL的通信，所以就按照现在的方式继续吧。
无论如何，既然按钮的处理已经完成，那就来尝试点击收藏按钮吧。
如果描述正确的话，应该已经注册到DynamoDB了…
注册成功了！与部署不同，一切都很顺利！
既然已经完成了注册步骤，接下来就是实现获取API。这次我们还是使用Graphql自动生成的列表获取API。
await client.graphql({
query: listTodos
})
我将创建一个用于显示收藏列表的界面。
<template>
<div>
<PageTitle :title="title"></PageTitle>
<v-container>
<v-row justify="center">
<v-col cols="12" sm="8" md="6">
<v-list>
<v-list-item
v-for="(item, index) in list"
:key="index"
class="mb-6"
border
height="60"
lines="two"
rounded
><NuxtLink :to="`/sauna/${item.id}`">
<v-list-item-title>
{{ item.name }}
</v-list-item-title>
</NuxtLink>
<template #append>
<v-list-item-action>
<v-icon
@click="clickFavorite(item.id, item.name, item.isForvarite)"
>mdi-delete</v-icon
>
</v-list-item-action>
</template>
</v-list-item>
</v-list>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script lang="ts" setup>
import { generateClient } from 'aws-amplify/api'
import { createTodo, deleteTodo } from '../../src/graphql/mutations.js'
import { listTodos } from '../../src/graphql/queries'
const client = generateClient()
const title = 'お気に入り'
const list = ref([])
const clickFavorite = async (placeId, placeName, isfavorite) => {
if (isfavorite) {
await client.graphql({
query: createTodo,
variables: {
input: {
id: placeId,
name: placeName
}
}
})
} else {
await client.graphql({
query: deleteTodo,
variables: {
input: {
id: placeId
}
}
})
}
}
onMounted(async () => {
useHead({ title })
const res = (await client.graphql({
query: listTodos
})) as any
list.value = res.data.listTodos.items
})
</script>
<style scoped></style>
当你打开画面时… nǐ shí…)
我也成功获取了数据！
尾声
尽管遇到了一些小问题，但按照AWS Amplify官方页面上的指示，我在几个小时内成功实施了！如果一开始就意识到nuxt3的构建命令问题占用了绝大部分时间，其实只需花费一个小时就能完成了…
虽然暂时成功了实施，但仅仅按照教程进行了操作，所以对细节的行为等还没有完全了解，甚至还没有达到达宁-克鲁格曲线的“完全理解”的阶段。
接下来，我们需要进一步尝试和探索，才能逐渐成为“略懂AWS Amplify”的水平。
