Nuxt.js + AWS Amplify でアプリ開発を始める

AWS Amplifyとは？

AWSが提供しているWeb・モバイルアプリケーションのフレームワークです。
https://aws.amazon.com/jp/amplify/

ざっくり言うと、簡単・最速・スケールするアプリケーションを構築できるフレームワークです。
近しいサービスで言うとFirebaseがあると思います。
サーバレスなのでオンデマンドで料金がかかります。個人開発で使う分にはほとんど料金が掛からないのでおすすめです。

今回はフロントエンドにNuxt.jsを使ってAmplifyを始めていきたいと思います。

ゴール

Nuxt.js + AWS Amplifyの開発環境構築

前提

AWSアカウントは作成済みの前提で進めていきます

手順

Nuxtプロジェクト作成

rendering modeはSPAにします。UIはいつもよく使っているVuetify.jsにしました。

$ yarn create nuxt-app sampleproject
? Project name sampleproject
? Project description My lovely Nuxt.js project
? Author name me
? Choose programming language TypeScript
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose the runtime for TypeScript @nuxt/typescript-runtime
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support
? Choose linting tools ESLint
? Choose test framework Jest
? Choose rendering mode Single Page App
? Choose development tools jsconfig.json (Recommended for VS Code)

Amplifyのセットアップ

AWS CLIのインストール

npm install -g @aws-amplify/cli

 Amplifyを使うIAMユーザーの設定
AWSコンソールのログイン画面がブラウザで立ち上がります。
ログイン後にCLIでEnterキーを押します

$ amplify configure
Scanning for plugins...
Plugin scan successful
Follow these steps to set up access to your AWS account:
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

リージョンは東京リージョンにしました。

Specify the AWS Region
? region:  ap-northeast-1
Specify the username of the new IAM user:
? user name:  amplify-user
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=undefined#/users$new?step=final&accessKey&userNames=amplify-user&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
Press Enter to continue

作成するIAMユーザーのユーザー名を入力すると、IAMの作成画面が開きます

ほんとは必要な権限だけを与えてあげる方がいいのですが、今回はAdministratorAccessを付けてユーザー作成します。
アクセスキーとシークレットキーが流出すると、アカウントで好き放題されてしまうので管理には気を付けましょう。

作成したIAMユーザーのキーを入力します。ユーザーを作成するとcredential.csvという名前のファイルをダウンロードでき、その中にアクセスキーとシークレットキーが記載されています。

Enter the access key of the newly created user:
? accessKeyId:  ****************************
? secretAccessKey:  ****************************************

amplify initする
profileは先ほど作った IAMユーザーのprofileを指定します

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project sampleproject
? Enter a name for the environment dev
? 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 run-script build
? Start Command: npm run-script serve
Using default provider  awscloudformation
For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use amplify-user

これでCloudFormationが実行されてAmplifyのリソースが作成されます

これでAmplifyでの開発を進めていけます！