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

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

## やったこと
1. Nuxt.jsでプロジェクト作成
2. ServerlessFrameworkのインストール
3. ServerlessFrameworkのセットアップ
4. 1で作ったプロジェクトに必要なファイルを追加していく方針
5. 理解出来なかったのでとりあえず参考になるプロジェクトを試す
  - [このサイト](https://mya-ake.com/posts/nuxtjs-on-aws-lambda/)の
  - [GitHub](https://github.com/mya-ake/nuxt-on-lambda)を
  - クローンしてきて、
6. `$ sls deploy --stage dev`
7. 確認してみる → 訳わかない文字列が返ってくる ← 今ここ

```
$ 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 入門】ゼロからプロジェクトを作成するまでの手順まとめ](https://upd.world/nuxtjs-start/)

```
$ 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](https://serverless.com/framework/docs/providers/aws/guide/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](https://serverless.com/framework/docs/providers/aws/guide/credentials/)

#### 3-1. AWSセットアップ
  - 3-1-1. AMI作成
    - serverless-agent = [gist](https://gist.github.com/ServerlessBot/7618156b8671840a539f405dea2704c8)から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追加](https://qiita.com/okhrn/items/8da6b217d3b1fce63371)
      
      参考2. [Serverless公式: Setup with the aws-cli](https://serverless.com/framework/docs/providers/aws/guide/credentials#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>
```

## 結論
作業途中です。
もしかしたら、[これ](https://qiita.com/potato4d/items/cfddeb8732fec63cb29c)とか[こっち](https://qiita.com/potato4d/items/6cf88ac6999e181421d4#app-engine-t%E3%81%AE%E9%AD%85%E5%8A%9B%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)に浮気するかも。
とりあえずもう少し試して追記予定。もし優しい方いたら教えて下さい。