🐷

AWS Amplify

2022/07/02に公開

Amplify

tech

まずは、検索欄に「Amplify」を入力、そして「AWS Amplify」を選択

そして、Amplify Studioの下の「Get started」をクリック

Appの名前を記入してから、右下のオレンジボタンの「Confirm deployment」をクリック

完了したら、Backend environmentタブの下の「Launch Studio」をクリック

Figmaとの連携

Amplify Studioの左パネルの「UI Library」をクリック

真ん中の「Get started」をクリック

青い文字の「Use our Figma template」をクリック、該当ファイルをCopyしてから
記入欄にFigmaファイルのURLを貼り付けます
完了したら、右下の「Continue」をクリック

そして、右上の「Accept all changes」をクリック

右上の「Accelpt all」をクリック

UI Libraryから一つ選んで、右上の「Configure」をクリック

続いて、画像のソース指定です
左パネルのimageをクリックしてから、右パネルの「Set image source」をクリック

画像のURLを記入します

ちなみに文字とボタンの部分もこうやって編集することができます

アクセス権限を付与

Amplify Studioを操作するだけのアクセス権限を付与することができます
（Reactを開発したいならIAMユーザーを作らなければならないので、この方法ではダメです）

AWS Amplifyページから「Give team members access to Amplify Studio.」をクリック

「Invite users」をクリック

そして、Eメールを入力します
相手のメールアドレスにこういうメールが届きます

それを利用してSign in

React

まずはReact環境を整えます

npx create-react-app amplify

そして、Amplify CLIをインストール

sudo npm install -g @aws-amplify/cli

amplify --versionを使ってインストール成功しているかを確認します

Amplifyは、AWSアカウントなしでReact操作をすることができます
（Amplify Studio専用アカウントを発行すれば、Amplify Studioへアクセスできるし、そこでamplify pullをすることもできます）
まずは、Amplify Studio画面の右上にある「Local setup instructions」をクリック

そして、今までの操作はずっとChromeで行っていますが
デフォルトブラウザをChromeに変更します
（もしデフォルトブラウザがSafariだったらamplify pullはずっとログインできなくなります）

設定完了後、ターミナルにamplify pull --appId xxx --envName xxxをRun

ブラウザが開けられ、「Yes」をクリック

ログイン成功しました

ターミナルに戻り、
Choose your default editorにVisual Studio Codeを選択
Choose the type of app that you're buildingにjavascriptを選択
What javascript framework are you usingにreactを選択
Source Directory Pathに対して何も入力せず、Enter
Distribution Directory Pathも何も入力せず、Enter
Build CommandもEnter
Start CommandもEnter

amplify pull成功すると、src/ui-componentsの下に色々なコンポーネントが存在していることを確認します

次は、必要のライブラリーをインストール

npm install aws-amplify @aws-amplify/ui-react --legacy-peer-deps

以下のコードをsrc/index.jsに追加します

src/index.js

+import { Amplify } from 'aws-amplify';
+import awsExports from './aws-exports';

+Amplify.configure(awsExports);

最後はコンポーネントを加えます

src/index.js

+import "@aws-amplify/ui-react/styles.css";
+import { HeroLayout1 } from './ui-components';

画面ができました
root.render(
  <React.StrictMode>
-   <App />
+   <HeroLayout1 />
  </React.StrictMode>
);

Githubとの連携

まずはGit Repoを作り、先ほどpullしたAmplify Reactプロジェクトをアップロード

そして、AWS Console→Amplifyのメイン画面に、「Hosting environments」というタブをクリック、「Github」をセレクト、そして「Connect branch」をクリック

アクセスを許可します

自動に進めます

「Create role」をクリックします、デフォルトのままに進め、Roleを作ります

このように記入しておけば大丈夫です

「Next」をクリック

「Save and deploy」をクリック

このURLは、デプロイです

Githubブレンチによるマルチデプロイ環境

「Connect Branch」をクリック

Environmentを選択し、Full-stack CI/CD allows...のチェックボックスを入れてから、「Next」をクリック

「Save and deploy」をクリック
Full-stack CI/CD allows you to continously deploy frontend and backend changes on every code commit

これで完了です、ホーム画面で新しいデプロイ環境ができたのを確認しました

CICDの効果検証

Reactファイル編集

index.jsを編集して、Githubへコミットしました
結果：自動デプロイ成功、オンラインのWebappが変わりました

Amplify StudioでUI Libraryを編集

Amplify StudioでUI Libraryを編集するだけでは、Webappへ影響しません
編集し終わったら、Reactのローカルファイルに対してamplify pullをRun、そしてコミットしてからWebappへ反映します

Figmaでコンポーネントを編集

まずはFigmaでコンポーネントを編集
DarkモードとLightモード両方も編集

Amplify StudioでSync with Figmaをクリック

Accept Allをクリック

Reactに戻り、amplify pullをRun
そしてコミット

これでWebappへ反映できます

Component Variableを作る

このComponentにvalueというPropertyを作り
「50% Completed」の部分の文字を、valueで決めてほしいです
例えば、valueが70だったら、70% Completedになってほしいです

まずはComponent propertiesを追加します

Nameを「value」に、Typeを「Number」、Defaultを「50」に設定します

次は、文字の部分をセレクト、Child propertiesを追加します

Propをlabelに設定します（テキストの内容はlabelが決まりです）
Valueをvalueに設定します（valueはComponent propertiesのvalueの意味です）

アイコンをクリック、Concatenateをクリックします

「 Completed」を記入します

これで編集完了です
amplify pullしてからReactを編集します

<Progress />
<Progress value="70" />
<Progress value="80" />

Componentの文字が変えるようになりました

削除

練習し終わったら、右にあるActionsをクリック、Deleteを選択してアプリを削除することができます