v-fukuoka #1

## ServerlessとVue.js 清家史郎(@seike460) ###### Vue Night in Fukuoka #1

###### Who? Fusic Co., Ltd.  清家史郎  @seike460    

###### tech - PHP - Server - AWS - Serverless - Golang - vim

###### products ##### Golang - s3ry - https://github.com/seike460/s3ry - utakata - https://github.com/seike460/utakata

###### Agenda - Serverless + Vue にて実現したい事 - Serverless + Vue の要素 - Serverlessの構築 - Serverlessの認証 - フロントエンドの制御 - みんな！Serverlessしよう！

###### Serverless + Vue にて実現したい事 - Serverless で動的アプリケーションを構築したい - サーバー費用 - サーバー管理コスト **Serverless Architecture (API) を構築**

- Serverless Architecture だけど認証したい - 認証機構は欲しい - 認証機構を自分で構築したくない **Serverless Architecture で認証**

- API 送信データを利用してDOM構築したい - API送信Jsonを利用した構築 - 複数APIからDOMを構築したい **フロントエンドで状態管理して、DOM構築**

###### Serverless + Vue の要素 - Serverless Architecture (API) を構築 - コンソールをポチポチしたくない - Infrastracture as code 時代 **Serverless Framework**

- Serverless Architecture で認証 - 認証機構は欲しい - 頑張りたくない **AWS amplify**

- フロントエンドで制御 - Routingしたい(vue-router) - 状態管理したい(Vuex) **Nuxt.js**

##### Serverless の構築 Serverless Framework - Serverless Frameworkとは? - CORS設定

##### Serverless Frameworkとは？ Serverless を infrastructure as code する Tool ymlファイルでdeployするArchitectureを定義

##### CORS(Cross-Origin Resource Sharing) 設定 あるオリジン(ドメイン)で動作している Applicationに、異なるオリジンの リソースへのアクセスを許可することができる仕組み `Serverless Architectureへのアクセスを許可`

- serverless.yml に`cors=true`設定 

- Access-Control-Allow-Origin設定  

##### Serverless の認証 AWS amplify - インストール - signup, login, logout

~~~ Bash % yarn install awsmobile-cli % awsmobile init % awsmobile user-signin enable % awsmobile push ~~~

`pages/user/create.vue` 

`pages/user/login.vue` 

##### フロントエンドで状態管理して、DOM構築 Nuxt.js - vue-router - 状態管理

##### vue-router pages Directory配下のvueファイルを よしなにvue-routerに定義してくれる  

store Directory配下のjsファイルを よしなに状態管理してくれる `store/utakata.js` 

`pages/index.vue` 

- データ取得(API) - 認証 - ルーティング - 状態管理 Serverless で簡単に行えた

S3 にて静的ホスティングしながら、 Serverless Architectureを利用して超低コストで Applicationが組める

- Serverless がよくわからない方 - Serverless Framework AWS amplify を使って試してみませんか？ - Vue がよくわからない方 - Nuxt.js を使って試してみませんか？

## みんな！Serverlessしよう！

ご清聴ありがとう御座いました！ ### Fusic では技術が大好きなエンジニアを募集しております！