フロントエンドエンジニアが今すぐ挑戦できるAWS Amplify

はじめに

AWSからしばらく遠ざかっていた私が、
「フロントエンドの知識があれば誰でもすぐにAWSを使ってWebサイトを作れますよ！」
「AWSってインフラエンジニアだけのものではないんですよ！」
と言うことを証明したくて手を動かしてみた記事です。

この記事で挑戦したこと

• AWS Amplifyで、Webサイトをデプロイ
• AWS Amplify Studioで、FigmaでデザインしたパーツをReactコンポーネントに変換
• AWS Cognitoで、ログイン機能を実装

使用したAWSサービス

• AWS Amplify（自動デプロイのため）
• AWS Amplify Studio（Reactコンポーネント作成のため）
• AWS Cognito（ログイン機能実装のため）

この先に進むための前提

• AWSアカウントを持っている
• Reactの基本的な知識を持っている
• Figmaの基本的な操作がわかる（デザイン知識はなくても大丈夫です）

おすすめ：「AWS CloudWatch」の設定

AWSには使用料金を監視してお知らせしてくれる機能があります。
いつの間にか大金がかかっていたらどうしよう...！と不安な方は、こちらを設定しておくと怖くないです。
公式のガイド
AWSは従量課金制ですので、コミットしたり、サイトにリクエストを送ったりすることで料金が発生します。
ですが、AWS登録から12ヶ月は無料でコミット＆デプロイし放題ですし、
個人で開発するくらいであれば過度に気にしなくても大丈夫です。

作業の手順

公式ドキュメントも参考にしています。

1. Node.jsの設定（Volta管理）

まずはローカルで環境構築をしていきます。

$ curl https://get.volta.sh | bash
$ source ~/.zshrc
$ volta install node

node -vでバージョンが出ればOKです。

2. プロジェクト作成（Vite）

今回はReactかつTS、ビルドにSWCを使うテンプレート（react-swc-ts）で環境構築することにしました。
例）プロジェクト名「testProject」の場合

$ npm create vite@latest testProject -- --template react-swc-ts
$ cd testProject
$ npm install
$ npm run dev　　//ローカル起動

3. Node.jsおよびnpmのバージョン固定（Volta管理）

$ volta pin node
$ volta pin npm

4. パスエイリアスの設定

tsconfig.jsonを修正しておきます。

"compilerOptions": {
  "baseUrl": "./",
  "paths": {
    "@/*": ["src/*"]
  }
}

以下コマンドでvite-tsconfig-paths をインストールします。

$ npm install -D vite-tsconfig-paths

vite.config.ts を編集します。

import react from "@vitejs/plugin-react-swc";
import { defineConfig } from 'vite'
+ import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
- plugins: [react()],
+ plugins: [react(), tsconfigPaths()],
});

ここまででローカルの環境構築は完了です。

5. AWS Amplifyの設定

ここからがAWSの設定です。まずはインストールします。

$ npm install -g @aws-amplify/cli

6. Gitリポジトリの作成

Gitのpushで自動デプロイできるようにしたいのでGitも設定しましょう。
一旦mainブランチにpushしておきます。

$ git init
$ git add .
$ git commit -m "Initial Commit"
$ git remote add origin [e-mail]:ユーザー名/testProjects.git
$ git push -u origin main

7. AWS Amplifyでデプロイ

ここからはコマンドではなくブラウザ上で操作します。
AWSコンソール画面からAmplifyのページを開き、「新しいアプリ」を選択します。

「GitHub」を選択してデプロイしたいリポジトリを選択すればOKです。
git pushすると自動的にプロビジョン→ビルド→デプロイが済みます。
「〜.amplifyapp.com」と言うドメインも自動で発行されるため、すぐにページにアクセスできます！

このあとはAWS Anplify Studioを使用するので、「バックエンド環境」のタブを開いて、このアプリ用のStudioを起動しておきましょう。

8. Figmaでコンポーネントを作成

ページがデプロイできたら、次はFigmaに移動します。
作りたいReactコンポーネントの元となるデザインを作ってみましょう。
今回はこのようなプロフィールカードを作ってみました。

コンポーネント名の頭文字は大文字にすること（この時点でReactコンポーネントのルールに従っておかないとAWSが認識できない）

何も思いつかないしFigmaわかんないなと言う方には、Amplify用のUI Kitもおすすめです。Webサイトで使われがちなパーツが網羅されており、これらを組み合わせていくだけでも美しいページが作れそうなくらい充実しています...！

9. FigmaとAWSの連携

Figmaの「共有」ボタンで生成した共有リンクをAWS Amplify Studioのコンソール画面で入力します。
Studioの管理画面から「UI Library」を選択し、以下の「Sync with Figma」を押下してリンクを指定しましょう。

「Accept all changes」ボタンを押下して、そのまま「Accept all」ボタンを押下し、
「Succuessfully」のメッセージが出たら成功です。

次に、作成したReactコンポーネントをローカルの開発環境で使うための準備をします。
以下コマンドを実行します。

$ amplify configure

上記実行後に立ち上がったブラウザ内でログインし、
AdministratorAccess-Amplifyポリシー（ポリシーの詳細）をユーザーにアタッチ（権限付与）します。

IAMユーザーの詳細画面から、アクセスキーを作成します。
セキュリティ認証情報タブから「アクセスキーの作成」を押下して、コマンドラインインターフェースを選択しましょう。

出力されたアクセスキーとシークレットアクセスキーをコマンドラインに入力し、
ユーザー名をつけたら完了です。

10. 生成したコンポーネントをローカルの開発環境にインストール

AWS Amplify Studioのコンソール画面から、Reactコンポーネントとして読み込むファイルを作成します。
再び管理画面の「UI Library」に戻り、使用したいコンポーネントを選び、「Configure」押下で設定画面を開きます。

以下のボタンを押下して「Profile component code」を作成します。

出力されたコマンドをコマンドラインで実行すると、プロジェクトフォルダにui-componentsフォルダができます。この中にReactコンポーネントのソースが格納されています。

余談

半年くらい前まではAWSコンソール上でFigmaと連携していたのですが、最近FigmaプラグインからReactコンポーネントを作成できるようになっていました！簡単！

Figma側で「AWS Amplify UI Builder」と言うプラグインをインストールして実行します。

デザインシステムのような画面が現れたら「Download component code」を押下すると、Reactコンポーネントがまとまったzipフォルダ（ui-componentsフォルダ）をダウンロードすることができます。

11. 出来上がったReactコンポーネントを使用

Reactプロジェクトなので以下のコマンドも実行しておきます。

$ npm install aws-amplify @aws-amplify/ui-react

以下の通りmain.tsxを編集します。

import { ThemeProvider } from "@aws-amplify/ui-react";
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';
import "@aws-amplify/ui-react/styles.css";
import { studioTheme } from "./ui-components";
Amplify.configure(awsconfig);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ThemeProvider theme={studioTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
)

App.tsxなどのファイルでコンポーネントを読み込んでgit push（自動デプロイ）すると、
Figmaで作成したデザインをReactコンポーネントとして使うことができました！（置いただけですが><）

おまけ：ログイン機能をAWSで実装する

Amplify Studioから、ページに対するログイン機能をつけることができます。AWSのサービスであるCognitoを使用します。

Amplify Studio内のサイドバーの「Authentication」から、設定します。

参考サイト

ログイン方法を選択します。今回は「Email」のみを選択し、デプロイボタンを押します。（数分かかることがあります。）

以下のようなコマンドが表示されたらルートディレクトリで実行します。

$ amplify pull --appId サイトのドメイン --envName staging

「done」を押下したら元の画面に戻るので、
「User management」からユーザーを追加しまsy。
仮パスワードは記号と大文字小文字を含む必要があるので注意です。

ユーザー登録が完了したら、AWS上の変更を取り込むため以下コマンドを実行します。

$ amplify pull

App.jsに以下を追加して認証できるようにします。

// 認証用
import { withAuthenticator } from '@aws-amplify/ui-react';
// 中略
// 以下のように変更
export default withAuthenticator(App);

ローカル起動して認証画面が出てきたら成功です！
仮パスワードを入力後に本パスワードを設定しておきましょう。

今回作業してみての気づき

いいと思ったところ

• 個人の制作物であれば、一貫性を持ってデザインからwebサイトを作ることができる
• Figma側でデザイン更新があった時、正しくReact側に反映することができ、デザイナーとエンジニア間の連携ミスが防げる
• コンポーネントのコード作成が自動であるため、複数人での開発でも、作成者によってバラつきが出て将来的に可読性に欠けるような事態を防げる
• ブラウザ上で操作できることが多く、コマンドに苦手意識があっても、エンジニアでなかったとしてもとっつきやすいと感じた
• AWS上でDBを作成すれば、好きなコンポーネントにデータを流し込み、折り返し位置や最大幅などの設定も簡単にできる（この記事では手順割愛）

少し難しいと思ったところ

• 生成されるReactコンポーネントのHTML構造はFigma上である程度考えておかなければならず、HTMLやCSSの実装知識を持った人がFigmaも操作する必要があるかも
• タグ名の指定はFigmaからはできないようだったので、自分好みのセマンティックなHTMLは書きづらいかも
• フォントはFigma上で見えていてもReact側に反映されていないものがあり、手動で追加が必要になった

まとめ

フロントエンドエンジニアでありながら、会社のミッションでFigmaでのデザイン作成を経験し、
「Webサイトを最初から最後まで自分で作れるのではないか...?」と思ったのがこのチャレンジの始まりでした。

ですが、そんなに甘くはなく、
小さすぎるボタンを作ってしまってデザインからコンポーネント作成の手順を何度もやり直したり、
忘れかけていたバックエンドやインフラの知識を呼び起こしたりと、
改めて他職種の方々に感謝が止まらない日々となりました。

フロントエンドに関わる方の興味の幅が少しでも広がれば幸いです！