Angular + Amplify 〜準備編Angular + Amplify准备篇

2 年 ago
韵, 科
2 minutes

目录

    1. Angular + Amplify 〜准备篇

 

    1. Angular + Amplify 〜分析篇

 

    Angular + Amplify 〜故障排除篇

前提条件 tí

    • AWSアカウントを持っている

 

    npmコマンドが使える

这次要做的事情

    • フロントエンド(Angular)の構築

 

    Amplifyの初期設定

用Angular进行构建

项目的初始化

我会使用Angular命令行界面。

npm i @angular/cli

这次我们将使用v12.0.0进行。

ng --version
Angular CLI: 12.0.2

使用ng new命令创建项目。可以自行选择路由和CSS样式。

ng new angular-amplify
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss
只有在必要的情况下才会下降。

在中文中重述的选项：ESLint

Angular从v12开始抛弃了TSLint，并且没有包含Linter，所以我们将安装ESLint。
由于已经准备好了Schematics，我们将使用它。

ng add @angular-eslint/schematics

更漂亮

我会使用Prettier作为代码格式化工具。
为了解决与ESLint的冲突问题，我还会安装eslint-config-prettier。
最近看起来eslint-plugin-prettier已经不推荐使用了。(参考)

npm install -D prettier eslint-config-prettier

编辑.eslintrc.json文件。

{
    "extends": [
        // extendsの一番下に下記を追加
        "prettier"
    ]
}

请将 .prettierrc 文件添加到项目中。设置根据个人喜好进行调整。

{
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}

我会添加一个命令来执行格式化器。

{
  "scripts": {
    "format:check": "prettier --check 'src/**/*.ts' 'src/**/*.html'",
    "format": "prettier --write 'src/**/*.ts' 'src/**/*.html'"
  }
}

Angular Material是一个用于构建精美的用户界面的开源UI组件库。

ng add @angular/material

放大器（Amplify）的初始设置

安装 Amplify CLI

npm install -g @aws-amplify/cli

最初的配置

执行以下命令。

amplify configure

完成AWS账户认证后，创建用于Amplify的IAM用户，并将认证信息保存在本地。
如果用户信息保存在~/.aws/credential中，则表示OK。

[profile name]
aws_access_key_id=******************
aws_secret_access_key=******************

接下来，请执行以下命令。

amplify init

执行时会询问项目名称和编辑器等信息，选择相应的内容。
配置文件需要指定之前创建的 IAM 用户的配置文件。

执行成功后，将在项目根目录下生成amplify目录和src/aws-export.js文件。

// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "ap-northeast-1"
};


export default awsmobile;

还有，在这个时间点上什么都没有，但您可以通过Amplify状态来查看Amplify的状态。

使用Angular来使用Amplify。

添加Amplify库

我会执行以下命令。

npm install aws-amplify

Angular的配置

将以下代码添加到 main.ts 中。

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

请将以下内容在中文中进行本地语言的转述，只需要一个选项：

– 参考

    • Angular v12 に ESLint を導入する

 

    • [Angular] ESLint環境にPrettierを導入する

 

    Amplify CLI をインストールしてユーザーを設定する手順
bannerAds