Nuxt.js+Lambda+APIGateway+ServerlessFrameworkの構築途中メモ #lambda

やりたいこと

Nuxt.js + Lambda + APIGateway + ServerlessFramework
上記サーバーレス構成でNuxtの最初の画面を表示したい

やったこと

Nuxt.jsでプロジェクト作成
ServerlessFrameworkのインストール
ServerlessFrameworkのセットアップ
1で作ったプロジェクトに必要なファイルを追加していく方針
理解出来なかったのでとりあえず参考になるプロジェクトを試す
- このサイトの
- GitHubを
- クローンしてきて、
$ sls deploy --stage dev
確認してみる → 訳わかない文字列が返ってくる ← 今ここ

$ curl -P GET "https://bxo6w6sk20.execute-api.ap-northeast-1.amazonaws.com/dev/"
PCFkb2N0eXBlIGh0bWw+PGh0bWw+PGhlYWQ+PG1ldGEgY2hhcnNldD0iVVRGLTgiPjxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsaW5pdGlhbC1zY2FsZT0xIj48bWV0YSBodHRwLWVxdWl2PSJYLVVBLUNvbXBhdGlibGUiIGNvbnRlbnQ9ImllPWVkZ2UiPjx0aXRsZT5OdXh0LmpzOiBMb2FkaW5nIGFwcC4uLjwvdGl0bGU+PGxpbmsgaHJlZj0iL19sb2FkaW5nL2Fzc2V0cy9jc3MvaW5kZXguYjFiNzQwY2UuY2h1bmsuY3NzIiByZWw9InN0eWxlc2hlZXQiPjwvaGVhZD48Ym9keT48ZGl2IGlkPSJudXh0X2xvYWRpbmdfc2NyZWVuIj48L2Rpdj48c2NyaXB0PndpbmRvdy4kU1RBVEUgPSB7InN0YXRlcyI6W10sImFsbERvbmUiOnRydWUsImhhc0Vycm9ycyI6ZmFsc2V9PC9zY3JpcHQ+PHNjcmlwdD53aW5kb3cuJEJBU0VfVVJMPSIvIjwvc2NyaXB0PjxzY3JpcHQ+IWZ1bmN0aW9uKGYpe2Z1bmN0aW9uIGUoZSl7Zm9yKHZhciByLG4sdD1lWzBdLG89ZVsxXSx1PWVbMl0saT0wLGw9W107aTx0Lmxlbmd0aDtpKyspbj10W2ldLHBbbl0mJmwucHVzaChwW25dWzBdKSxwW25dPTA7Zm9yKHIgaW4gbylPYmplY3QucHJvdG90eXBlLmhhc093blByb3BlcnR5LmNhbGwobyxyKSYmKGZbcl09b1tyXSk7Zm9yKHMmJnMoZSk7bC5sZW5ndGg7KWwuc2hpZnQoKSgpO3JldHVybiBjLnB1c2guYXBwbHkoYyx1fHxbXSksYSgpfWZ1bmN0aW9uIGEoKXtmb3IodmFyIGUscj0wO3I8Yy5sZW5ndGg7cisrKXtmb3IodmFyIG49Y1tyXSx0PSEwLG89MTtvPG4ubGVuZ3RoO28rKyl7dmFyIHU9bltvXTswIT09cFt1XSYmKHQ9ITEpfXQmJihjLnNwbGljZShyLS0sMSksZT1pKGkucz1uWzBdKSl9cmV0dXJuIGV9dmFyIG49e30scD17MjowfSxjPVtdO2Z1bmN0aW9uIGkoZSl7aWYobltlXSlyZXR1cm4gbltlXS5leHBvcnRzO3ZhciByPW5bZV09e2k6ZSxsOiExLGV4cG9ydHM6e319O3JldHVybiBmW2VdLmNhbGwoci5leHBvcnRzLHIsci5leHBvcnRzLGkpLHIubD0hMCxyLmV4cG9ydHN9aS5tPWYsaS5jPW4saS5kPWZ1bmN0aW9uKGUscixuKXtpLm8oZSxyKXx8T2JqZWN0LmRlZmluZVByb3BlcnR5KGUscix7ZW51bWVyYWJsZTohMCxnZXQ6bn0pfSxpLnI9ZnVuY3Rpb24oZSl7InVuZGVmaW5lZCIhPXR5cGVvZiBTeW1ib2wmJlN5bWJvbC50b1N0cmluZ1RhZyYmT2JqZWN0LmRlZmluZVByb3BlcnR5KGUsU3ltYm9sLnRvU3RyaW5nVGFnLHt2YWx1ZToiTW9kdWxlIn0pLE9iamVjdC5kZWZpbmVQcm9wZXJ0eShlLCJfX2VzTW9kdWxlIix7dmFsdWU6ITB9KX0saS50PWZ1bmN0aW9uKHIsZSl7aWYoMSZlJiYocj1pKHIpKSw4JmUpcmV0dXJuIHI7aWYoNCZlJiYib2JqZWN0Ij09dHlwZW9mIHImJnImJnIuX19lc01vZHVsZSlyZXR1cm4gcjt2YXIgbj1PYmplY3QuY3JlYXRlKG51bGwpO2lmKGkucihuKSxPYmplY3QuZGVmaW5lUHJvcGVydHkobiwiZGVmYXVsdCIse2VudW1lcmFibGU6ITAsdmFsdWU6cn0pLDImZSYmInN0cmluZyIhPXR5cGVvZiByKWZvcih2YXIgdCBpbiByKWkuZChuLHQsZnVuY3Rpb24oZSl7cmV0dXJuIHJbZV19LmJpbmQobnVsbCx0KSk7cmV0dXJuIG59LGkubj1mdW5jdGlvbihlKXt2YXIgcj1lJiZlLl9fZXNNb2R1bGU/ZnVuY3Rpb24oKXtyZXR1cm4gZS5kZWZhdWx0fTpmdW5jdGlvbigpe3JldHVybiBlfTtyZXR1cm4gaS5kKHIsImEiLHIpLHJ9LGkubz1mdW5jdGlvbihlLHIpe3JldHVybiBPYmplY3QucHJvdG90eXBlLmhhc093blByb3BlcnR5LmNhbGwoZSxyKX0saS5wPSIvX2xvYWRpbmcvIjt2YXIgcj13aW5kb3cud2VicGFja0pzb25wPXdpbmRvdy53ZWJwYWNrSnNvbnB8fFtdLHQ9ci5wdXNoLmJpbmQocik7ci5wdXNoPWUscj1yLnNsaWNlKCk7Zm9yKHZhciBvPTA7bzxyLmxlbmd0aDtvKyspZShyW29dKTt2YXIgcz10O2EoKX0oW10pPC9zY3JpcHQ+PHNjcmlwdCBzcmM9Ii9fbG9hZGluZy9hc3NldHMvanMvY2h1bmstdmVuZG9ycy4yNDVkNjZmMC5jaHVuay5qcyI+PC9zY3JpcHQ+PHNjcmlwdCBzcmM9Ii9fbG9hZGluZy9hc3NldHMv

以下詳細メモ

1. Nuxt.jsでプロジェクト作成

インストール~起動まで

参考:【Nuxt.js 入門】ゼロからプロジェクトを作成するまでの手順まとめ

$ npx -v
$ npx create-nuxt-app <your-app-name>
$ cd nuxt-project-sample
$ npm run dev
// http://localhost:3000 にアクセス

2. Serverless Frameworkのインストール

参考: Serverless 公式: AWS - Installation

$ npm install -g serverless
$ serverless --version
1.45.1

↓

Serverless Error ---------------------------------------

Serverless plugin "serverless-s3-sync" initialization errored: Cannot find module 'serverless-s3-sync'
Require stack:
- /Users/y-agatsuma/.nodebrew/node/v12.4.0/lib/node_modules/serverless/lib/classes/PluginManager.js
- /Users/y-agatsuma/.nodebrew/node/v12.4.0/lib/node_modules/serverless/lib/Serverless.js
- /Users/y-agatsuma/.nodebrew/node/v12.4.0/lib/node_modules/serverless/lib/utils/autocomplete.js
- /Users/y-agatsuma/.nodebrew/node/v12.4.0/lib/node_modules/serverless/bin/serverless

Get Support --------------------------------------------
   Docs:          docs.serverless.com
   Bugs:          github.com/serverless/serverless/issues
   Issues:        forum.serverless.com

Your Environment Information ---------------------------
   OS:                     darwin
   Node Version:           12.4.0
   Serverless Version:     1.45.1

んーとりあえず放置で進みます。

3. ServerlessFrameworkのセットアップ

参考: Serverless 公式: AWS - Credentials

3-1. AWSセットアップ

3-1-1. AMI作成
- serverless-agent = gistからpolicy作成
- serverless-admin = FullAccess
3-1-2. ACCESS_KEY と SECRET_KEY を使う
3-1-2-(1). QuickStart = 環境変数に直接KEYを設定する

$ export AWS_ACCESS_KEY_ID=<your-key-here>
$ export AWS_SECRET_ACCESS_KEY=<your-secret-key-here>

3-1-2-(2). aws-cli = awscliを利用してKEYを利用する

参考1: brewでaws-cli追加

参考2. Serverless公式: Setup with the aws-cli

$ brew install awscli
$ aws --version
aws-cli/1.16.180 Python/3.7.3 Darwin/18.6.0 botocore/1.12.170

$ aws configure
AWS Access Key ID [None]: <your-access-key>
AWS Secret Access Key [None]: <your-secret-key>
Default region name [None]: us-west-2
Default output format [None]: ENTER

// 上記で設定した値は下記に保存
$ cat ~/.aws/credentials
[default]
aws_access_key_id = <access-key>
aws_secret_access_key = <secret-key>

結論

作業途中です。
もしかしたら、これとかこっちに浮気するかも。
とりあえずもう少し試して追記予定。もし優しい方いたら教えて下さい。