v-kansai Vue.js/Nuxt.js meetup #4 https://vuekansai.connpass.com/event/121581/ で発表した資料。

1. AWS Lambdaで
Vue.js SSRしてみた
2019/3/19
@coppieee

2. 自己紹介
八木大介
Web: https://coppieee.com
twitter: @coppieee
フリーランスプログラマー
Webサイト/Webアプリの作成がメイン。
Vue.js, TypeScript, Serverlessなど。

3. Vue.jsでSSR(サーバーサイドレンダリング)したい！
ブログを作ろうと思ったときにやっぱり検索に引っかかってほしい。
動的にtitle書き換えとかOGPとかRSSとか対応していきたい。
きちんと404を返したい。

4. でもNuxtは使いたくない
・SSRだけのためにフレームワークを導入したくない
・Vue.jsのプレーンな状態がいい
理想としては最初はSSRせずに開発して、
必要になったらSSRを導入できるような環境を構築したい

5. Vue.js サーバサイドレンダリングガイド
https://ssr.vuejs.org/ja/
Vue.js公式でドキュメントが公開さ
れている。
vue-server-rendererというSSR用
のライブラリがある。
これ読めば作れる。

6. 作ったサンプル
https://blog.coppieee.com
メモ帳ぽい感じのやつ。
(将来的にブログにする)

7. htmlを表示するとSSR出来ているのがわかる

8. 構成
・Serverless Framework (API Gateway,AWS Lambda)
・S3 (静的ファイル置き場 js, css, png)
・CloudFront (S3とLambdaの割り振り)
・Amplify Framework (AppSync, GraphQL)
・Route 53 (ドメイン)
SSRしているのはAWS Lambda。

9. なぜAWS Lambdaか
・アクセスされた時のみ動くので、常にサーバを動かすよりコストが安い。
(個人で使う分には大抵無料枠で収まる)
・勝手にスケールしてくれる

10. いままで(フロントエンドのみ)
CloundFront
S3
Amplify &
AppSync
静的ファイル
js,css,img,...etc
GraphQL API
Client

11. 処理の流れ
CloundFront
API Gateway &
Lambda
S3
Amplify &
AppSync
ページを表示する場合
(/ , /items/:id などのリクエスト)
SSRされたhtmlを返す
静的ファイル
js,css,img,...etc
GraphQL API
GraphQL API
(ページの更新のときにVue.jsから呼ばれる)
Client

12. clientとserver2つのエントリーポイント
最初はフロントエンドのみで普通にVue.jsで開発
必要になったら後付でSSRを有効化
といったことも可能になった。
なのでやっぱりSSRしたいといった場合に対応できるので、
こういった手法を覚えておいてもいいかも。

13. おわり

14. 補足

15. entry-lambda.ts
import { createApp } from './app'
export const main: APIGatewayProxyHandler =
async (event, _context):Promise<APIGatewayProxyResult> => {
const context = {
title: 'coppieee blog',
url: event.path,
}
const { app, router, store } = createApp()
const html = await renderer.renderToString(app,context)
return {
statusCode:(context as any).HTTPStatus || 200,
headers:{'Content-Type':'text/html'},
body:html,
}
}
サーバコード
vue-server-rendererというライブラリで、
Vue appとcontextを元にhtmlを生成している。
左はエラー処理など端折ってるけど、
実際のコードも70行程度で済んでいる。

16. app.ts
import Vue from 'vue'
import App from './app-root.vue'
import { createRouter } from './router'
import {createStore} from './store'
export function createApp () {
const router = createRouter()
const store = createStore()
Vue.prototype.$store = store
const app = new Vue({
router,
render: h => h(App)
})
return { app, router ,store}
}
サーバ、クライアント共通のコード。
new Vue()してexportしてるだけ。

17. entry-client.ts
import { createApp } from './app'
const { app,store } = createApp()
app.$mount('#app')
クライアントコード。
app.$mount()してるだけ。

18. item.vue
<template>...省略</template>
<script lang="ts">
@Component({})
export default class Item extends Vue{
item:BlogItem = {id:'',title:'',description:''}
async fetchItem(){
const id = this.$route.params.id
const item = await this.$store.item({id})
if(item){ this.item = item}
}
async mounted(){ await this.fetchItem() } // クライアント側の処理
async serverPrefetch() { await this.fetchItem() } // サーバ側の処理
}
</script>
クライアント側の処理は mounted()でして、
サーバ側の処理はserverPrefetch()でする。
serverPrefetchはVue 2.6で追加されたもの。