使用 Vue.js 和 TypeScript 来搭建 Amplify 的远程开发环境

12 月 ago
韵, 科
10 minutes

简化。

首先

※我将2022年3月的文章更新至2022年11月。（期间有相当激烈的更新。）
我在JAWS-UG浜松进行活动。我们也有在线学习会议，欢迎参加。谢谢。

使用Amplify，我们进行了一系列的教程。接下来，当我们尝试创建一些东西时，我们被不断有新版本更新的库和大量的Amplify这个词所困扰。此外，模拟功能也表现不稳定，Amplify push也失败了，导致我四处碰壁，最终不得不重新构建开发环境。在Vue的开发中，也需要共享环境设置（如node.js和Vue）来适应不同的版本要求。

环境样例

文件结构

amplify-vuejs-docker
├── .devcontainer/
│   ├── devcontainer.json
│   ├── docker-compose.yml
│   └── web/
│  	  └── Dockerfile
└── server/

1. docker-compose.yml

1. Docker-compose.yml文件

由于使用vuetify+vite框架，在这次情况下进行了端口3000的开放。而端口20002是用于模拟的。
在Windows环境下，无需进行此设置也可以使用。

version: '3.8'

services:
  amplify:
    build: ./web
    ports:
      # yarn dev
      - 3000:3000
      # mock api
      - 20002:20002
    stdin_open: true
    working_dir: '/app'
    volumes:
      - ../server:/app
      # credential,configを保管したい人向け
      # - ../dev/aws/:/root/.aws/
    tty: true

2. Dockerfile
2. Docker 配置文件

为了使用Amplify Mocking（本地模拟），安装Java。
尝试使用Amazon Corretto。
我们使用最新稳定版本的Docker来运行Node。
重要的是要进行版本指定。

FROM node:18.12.1
# java for Amplify Mock
RUN apt update; apt install -y wget software-properties-common apt-transport-https
RUN wget -O- https://apt.corretto.aws/corretto.key | apt-key add - 
RUN add-apt-repository 'deb https://apt.corretto.aws stable main'
RUN apt update; apt-get install -y java-18-amazon-corretto-jdk
# git-flow
RUN apt install git-flow
# amplify
RUN yarn global add @aws-amplify/cli@10.5.1

3. 开发容器的配置文件 devcontainer.json

我要分享VSCode的设置。
如果使用Vue 3.x，就要使用volar插件。 (misterj.vue-volar-扩展包)
我还会添加要共享的环境信息等。

{
  "name": "Amplify Vue3",
  "dockerComposeFile": "docker-compose.yml",
  "service": "amplify",
  "workspaceFolder": "/app",
  "extensions": [
    "misterj.vue-volar-extention-pack",
    "aws-amplify.aws-amplify-vscode",
    "GraphQL.vscode-graphql",
    "oderwat.indent-rainbow",
    "mhutchie.git-graph",
    "eamodio.gitlens"
  ],
  "settings": {
    "eslint.options": {
      "extensions": [".js", ".vue", ".ts"]
    },
    "eslint.validate": ["typescript", "javascript", "vue"],
    "editor.codeActionsOnSave": {
      "source.organizeImports": false,
      "source.fixAll.eslint": true,
      "source.fixAll": true
    },
    "typescript.preferences.importModuleSpecifierEnding": "minimal",
    "eslint.format.enable": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.trailingComma": "all",
    "prettier.useEditorConfig": false,
    "prettier.jsxSingleQuote": true,
    "prettier.printWidth": 100,
    "prettier.semi": true,
    "prettier.singleQuote": true,
    "prettier.tabWidth": 2
  }
}

用法

    1. 安装Docker

安装VSCode

安装VSCode的Remote Development扩展

克隆仓库

git clone https://github.com/covasue/amplify-vuejs-docker

将克隆的amplify-vuejs-docker导航到指定位置。

cd amplify-vuejs-docker

在这里进行环境设置。
启动VSCode并点击”在容器中重新打开”。

code .

由于初始配置的构建，第一次需要约4到5分钟的时间才能建立容器，但是从第二次开始，容器（开发环境）将在4到5秒内启动。
一旦关闭VSCode，容器将自动停止。

在Windows中，应该通过WSL2来运行。

在使用远程开发时，原本应该可以以爆速进行开发的，但是却变得异常缓慢，而且在webpack5 (vue/cli@5)中出现了无法进行热重载的问题。经过调查发现，不能混合使用FileSystem。这个网站上有详细的说明。
https://levelup.gitconnected.com/docker-desktop-on-wsl2-the-problem-with-mixing-file-systems-a8b5dcd79b22
现在yarn dev或build甚至比使用Docker之前还要快，简直让人难以置信。

在上述的环境中的优点

    • Amplify CLIとVue CLIとMockの必須条件のJDKをそれぞれバージョン指定した状態でインストールした状態になる。

 

    • 構築作業を終えると、VSCodeのワークスペースを開くだけで、Docker操作を特に意識することなくコンテナに入り、ローカル環境のようにVSCodeからターミナルをたたくことができる

 

    • git clone ,git checkout xxx, amplify init ,yarn　概ね4ステップで環境再現

 

    VSCodeの設定を共有できる。例えばセミコロン、クォーテーションなどの設定を保持できる

我将使用TypeScript来尝试公式教程。

前提条件（步骤1）

首先，通过Amplify CLI的命令“amplify configure”创建IAM用户。
在此过程中，需要访问Web控制台，请准备好访问Web控制台的条件。

1. 通过使用Amplify配置来创建新的IAM用户。

amplify configure

2. 由于以对话形式进行提问，因此请按照指导进行输入。

建议选择东京区域(ap-northeast-1)作为最佳选择。

Specify the AWS Region
? region:  # Your preferred region 
Specify the username of the new IAM user:
? user name:  # User name for Amplify IAM user
Complete the user creation using the AWS console

3. 浏览器将打开并提示用户进行创建。

最后，将Access key和Secret Access key保存起来。

4. 输入下一部分。

Enter the access key of the newly created user:
? accessKeyId:  # YOUR_ACCESS_KEY_ID　さきほど保存したAccess key
? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY さきほど保存した Secret Access key
This would update/create the AWS Profile in your local machine
? Profile Name:  # (default) 何か名前を付けましょう。 

Successfully set up the new user.

在Step1的操作已经完成。
Access key和Secret Access key在Step2中也会用到。

创建全栈项目（第二步）

在这一步中，我们将创建Vue项目，并安装Amplify Libraries和Amplify UI Components，然后将Amplify Libraries加载到Vue中。

如果开发环境与上次相同，则跳过安装，因为@vue/cli已经安装了。

创建一个Vue项目（使用Vuetify）

yarn create vuetify

myamplifyproject是项目的名称。 (myamplifyproject is the project’s name.)

yarn create v1.22.19[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vuetify@1.0.4" with binaries:
      - create-vuetify
[#######################################] 39/39
Vuetify.js - Material Component Framework for Vue

✔ Project name: … myamplifyproject
✔ Use TypeScript? … No / Yes
✔ Would you like to install dependencies with yarn, npm, or pnpm? › yarn

选择后，稍等一会儿以等待项目创建完成。一旦创建完成，就会切换到目录中。

cd myamplifyproject

我会检查Vue项目是否正确创建，并启动服务器进行确认。
端口3000已经打开，Vuetify和Vue环境会以惊人的速度启动。

yarn dev

使用Ctrl + C停止服务器。

2. 开始一个新的后端

执行 Amplify CLI 的命令 amplify init。
之前的 configure 更多是用来创建账户（IAM 用户）。
而这次的 init 是用来进行项目的（初始）设置。
请确保已经切换到项目所在的目录，然后输入命令。
※例子：root@farwq13fa:/app/myamplifyproject# amplify init

amplify init

请设置用于创建后端的项目名称。由于它将用作创建资源时的前缀，因此最好选择一个易于理解的名称。

? Enter a name for the project (myamplifyproject) todo

接下来将进行IAM用户的设置，用于此项目。会先询问是否使用AWS配置文件（AWS profile）。我将使用刚才获取到的访问密钥和秘密访问密钥。

? Do you want to use an AWS profile? (Y/n)

输入 n。

? accessKeyId:  (<YOUR_ACCESS_KEY_ID>) #さきほど保存したAccess key
? secretAccessKey:  (<YOUR_SECRET_ACCESS_KEY>) #さきほど保存した Secret Access key

接下来选择地区。

? region:  (Use arrow keys)
❯ us-east-1 
  us-east-2 
  us-west-2 
  eu-west-1 
  eu-west-2 
  eu-central-1 
  ap-northeast-1 
(Move up and down to reveal more choices)

请从Step1中选择您想要的地区。如果选择东京，请选择ap-northeast-1。
将对项目进行初始化。请稍等片刻，直至初始化完成。
完成后，以下处理将已完成。

    • amplifyディレクトリが作成されます。バックエンドの定義が入っています。

 

    • srcディレクトリにaws-exports.jsが作成されます。

 

    リポジトリで共有しないほうが良いファイルについて.gitignoreに追記されます。

3. 安装 Amplify 库

安装Amplify Libraries和Amplify UI Components（Vue3版）。请注意，UI Components在Vue2版本中有所不同。

yarn add aws-amplify@^5.0.4 @aws-amplify/ui-vue@3.0.2

4. 搭建前端

将安装的Amplify库集成到Vue中。
打开src/main.ts文件并添加以下源代码。

// Components
import App from './App.vue';

// Composables
import { createApp } from 'vue';

// Plugins
import { registerPlugins } from '@/plugins';
//追加ここから
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
Amplify.configure(awsExports);
//追加ここまで
const app = createApp(App);

registerPlugins(app);

app.mount('#app');
Vue Vite 配置

当使用Vite来使用Amplify时，需要进行以下配置。
这些是初学者容易遇到困难的地方。

4.2.1 添加 `
✖
广告
将在 10 秒后关闭
bannerAds