AmplifyでNuxt.jsのhello worldを表示させる - その辺のソフトウェアエンジニアです

先日初めてAWS Amplifyを触りました。いろいろよしなにやってくれるサービスですが、なにをどうすればいいのか理解しづら部分もあったので、できるだけわかりやすくhello worldを表示させるまでの過程を記述します。

結局なにをするサービスなのか？

かなりざっくりですが、フロントからバックまでよしなに構築してくれるフレームワークだと思っています。
フロントエンドに関しては、reactやvueなどで記述されたフロントエンドリソースをテストからデプロイまでしてくれます。バックエンドに関しては、Amplifyが提供してくれている機能（認証、データベース、APIなど）であれば、Amplify CLIというコマンドラインによって対話形式で簡単に利用することができます。
こういったサービスがなかったら、AWSリソースを自身で構築して繋ぎ込みをしなければ行けませんでした。そこを簡単に行えるようにしてくれるサービスぐらいに捉えておけばいいかなと思います。

Nuxt.jsでhello world

フロントとバックを構築してくれると言いましたが、今回はNuxt.jsでフロントを構築するところまでやっていきます。5〜10分ぐらいでさくっと作っていきましょう。
※Node.jsインストール済前提で進めます

Nuxtプロジェクトの作成

公式ドキュメントにしたがってプロジェクトを作成。

$ npx create-nuxt-app nuxt-amplify-sample

create-nuxt-app v3.2.0
✨  Generating Nuxt.js project in nuxt-amplify-sample
? Project name: nuxt-amplify-sample
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Bootstrap Vue
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)

この時点でローカル表示できることを確かめてください。

Amplify CLIインストールとユーザー作成

Amplify CLIをインストールします。

$ npm install -g @aws-amplify/cli

amplify -v でバージョンが確認できたらOKです。
続いてAmplify CLIで使用するユーザーを作成します。既存のユーザーを使う場合は不要です。

$ amplify configure
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-cli-user
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?省略
Press Enter to continue

Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name:  amplify-user

対話形式でユーザーが作成されます。途中AWSコンソール画面が開くので、そこでユーザーを作成します。作成後、認証情報をcsvダウンロードしてコマンドラインに打ち込んだら終わりです。これでこのユーザーの情報が~/.aws/ のcredentialsとconfigに追記されます。

Amplify初期設定を行う

対話形式でamplifyの初期設定を行います。

$ cd [作成したプロジェクト]
$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project NuxtAmplifySample
? 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:  .
? Distribution Directory Path: dist
? Build Command:  npm run build
? Start Command: npm run start
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

無事成功するとamplifyディレクトリとamplify.jsonが作成されます。設定したビルドコマンドはamplify/.config/project-config.jsonに記載されています。（これが何に使用されているかはわからないです。変な値を設定してもビルドできたので、、）設定したユーザー情報はamplify/.config/local-aws-info.jsonに記載されています。
この時点でAmplifyのコンソール画面からプロジェクトが作成されたことを確認できます。 f:id:fourthgrd:20200823165627p:plain またcloudformationでスタックが作成されたことも確認できます。このスタックによってS3バケットとIAMロールが作成されます。

Gitにあげる

ソースとしてはそろったのでGitにあげます。今回はGitHubを使用しました。Gitを使用しない方法もありますが、今回は割愛します。

デプロイする

Amplifyのコンソール画面からGitと連携させてデプロイしていきます。画面の通りに入力していきます。 f:id:fourthgrd:20200823171438p:plain f:id:fourthgrd:20200823171451p:plain f:id:fourthgrd:20200823171518p:plain このままのビルド設定だとaccess diniedとなってしまいますが、いったんこのまま進めます。

ビルド設定はamplify.ymlに記述されています。amplify.ymlをプロジェクトの中にファイルとして存在させておけばその設定が読み込まれます。今回はファイルを作成していないのでコンソールから修正しています。詳しくは公式ドキュメントを参照してください。
ディレクトリがdistに設定されていなかったのでそこを修正していきます。 f:id:fourthgrd:20200823172232p:plain 修正したのちに再ビルド。 f:id:fourthgrd:20200823172309p:plain ビルド完了したら、アクセスして確認。 f:id:fourthgrd:20200823172556p:plain f:id:fourthgrd:20200823172612p:plain できた！hello worldではありませんが、初期表示ができたのでめでたしめでたし。
ではまた！