Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
AWS Lambdaで
Vue.js SSRしてみた
2019/3/19
@coppieee
自己紹介
八木大介
Web: https://coppieee.com
twitter: @coppieee
フリーランスプログラマー
Webサイト/Webアプリの作成がメイン。
Vue.js, TypeScript, Serverlessなど。
Vue.jsでSSR(サーバーサイドレンダリング)したい!
ブログを作ろうと思ったときにやっぱり検索に引っかかってほしい。
動的にtitle書き換えとかOGPとかRSSとか対応していきたい。
きちんと404を返したい。
でもNuxtは使いたくない
・SSRだけのためにフレームワークを導入したくない
・Vue.jsのプレーンな状態がいい
理想としては最初はSSRせずに開発して、
必要になったらSSRを導入できるような環境を構築したい
Vue.js サーバサイドレンダリングガイド
https://ssr.vuejs.org/ja/
Vue.js公式でドキュメントが公開さ
れている。
vue-server-rendererというSSR用
のライブラリがある。
これ読めば作れる。
作ったサンプル
https://blog.coppieee.com
メモ帳ぽい感じのやつ。
(将来的にブログにする)
htmlを表示するとSSR出来ているのがわかる
構成
・Serverless Framework (API Gateway,AWS Lambda)
・S3 (静的ファイル置き場 js, css, png)
・CloudFront (S3とLambdaの割り振り)
・Amplify Frame...
なぜAWS Lambdaか
・アクセスされた時のみ動くので、常にサーバを動かすよりコストが安い。
(個人で使う分には大抵無料枠で収まる)
・勝手にスケールしてくれる
いままで(フロントエンドのみ)
CloundFront
S3
Amplify &
AppSync
静的ファイル
js,css,img,...etc
GraphQL API
Client
処理の流れ
CloundFront
API Gateway &
Lambda
S3
Amplify &
AppSync
ページを表示する場合
(/ , /items/:id などのリクエスト)
SSRされたhtmlを返す
静的ファイル
js,c...
clientとserver2つのエントリーポイント
最初はフロントエンドのみで普通にVue.jsで開発
必要になったら後付でSSRを有効化
といったことも可能になった。
なのでやっぱりSSRしたいといった場合に対応できるので、
こういった手法を...
おわり
補足
entry-lambda.ts
import { createApp } from './app'
export const main: APIGatewayProxyHandler =
async (event, _context):Prom...
app.ts
import Vue from 'vue'
import App from './app-root.vue'
import { createRouter } from './router'
import {createStore}...
entry-client.ts
import { createApp } from './app'
const { app,store } = createApp()
app.$mount('#app')
クライアントコード。
app.$mou...
item.vue
<template>...省略</template>
<script lang="ts">
@Component({})
export default class Item extends Vue{
item:BlogItem...
Upcoming SlideShare
Loading in …5
×

AWS LambdaでVue.js SSRしてみた

766 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

AWS LambdaでVue.js SSRしてみた

  1. 1. AWS Lambdaで Vue.js SSRしてみた 2019/3/19 @coppieee
  2. 2. 自己紹介 八木大介 Web: https://coppieee.com twitter: @coppieee フリーランスプログラマー Webサイト/Webアプリの作成がメイン。 Vue.js, TypeScript, Serverlessなど。
  3. 3. Vue.jsでSSR(サーバーサイドレンダリング)したい! ブログを作ろうと思ったときにやっぱり検索に引っかかってほしい。 動的にtitle書き換えとかOGPとかRSSとか対応していきたい。 きちんと404を返したい。
  4. 4. でもNuxtは使いたくない ・SSRだけのためにフレームワークを導入したくない ・Vue.jsのプレーンな状態がいい 理想としては最初はSSRせずに開発して、 必要になったらSSRを導入できるような環境を構築したい
  5. 5. Vue.js サーバサイドレンダリングガイド https://ssr.vuejs.org/ja/ Vue.js公式でドキュメントが公開さ れている。 vue-server-rendererというSSR用 のライブラリがある。 これ読めば作れる。
  6. 6. 作ったサンプル https://blog.coppieee.com メモ帳ぽい感じのやつ。 (将来的にブログにする)
  7. 7. htmlを表示するとSSR出来ているのがわかる
  8. 8. 構成 ・Serverless Framework (API Gateway,AWS Lambda) ・S3 (静的ファイル置き場 js, css, png) ・CloudFront (S3とLambdaの割り振り) ・Amplify Framework (AppSync, GraphQL) ・Route 53 (ドメイン) SSRしているのはAWS Lambda。
  9. 9. なぜAWS Lambdaか ・アクセスされた時のみ動くので、常にサーバを動かすよりコストが安い。 (個人で使う分には大抵無料枠で収まる) ・勝手にスケールしてくれる
  10. 10. いままで(フロントエンドのみ) CloundFront S3 Amplify & AppSync 静的ファイル js,css,img,...etc GraphQL API Client
  11. 11. 処理の流れ CloundFront API Gateway & Lambda S3 Amplify & AppSync ページを表示する場合 (/ , /items/:id などのリクエスト) SSRされたhtmlを返す 静的ファイル js,css,img,...etc GraphQL API GraphQL API (ページの更新のときにVue.jsから呼ばれる) Client
  12. 12. clientとserver2つのエントリーポイント 最初はフロントエンドのみで普通にVue.jsで開発 必要になったら後付でSSRを有効化 といったことも可能になった。 なのでやっぱりSSRしたいといった場合に対応できるので、 こういった手法を覚えておいてもいいかも。
  13. 13. おわり
  14. 14. 補足
  15. 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. 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. 17. entry-client.ts import { createApp } from './app' const { app,store } = createApp() app.$mount('#app') クライアントコード。 app.$mount()してるだけ。
  18. 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で追加されたもの。

×