プレゼンテーション層におけるGridsome

module.exports = {
  siteName: 'survey.seike460.com',
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'survey/*.md',
        typeName: 'SurveyPage'
      }
    }
  ]
}

---
conference: PHPerKaigi 2020
title: Serverless Pattern
datetime: 2020/02/11 15:00
place: PHPerKaigi 2020
---

Serverlessは一般化してきています。

Serverless においてある程度決まったPatternがあります。

ServerlessなArchitectureを組むことでそのシステムはどの様なメリットを享受出来るのでしょうか。

今回はAWSを利用したServerless Patternを適用することで、
そのシステムが享受出来るメリットと構築する上での注意点を解説します。

- 想定する聴講者
  - Serverlessに興味のあるWEBエンジニア
  - AWSを利用しているクラウド系エンジニア

- お話する内容
  - AWS Lambdaを中心としたServerless Pattern
  - Serverless Patternを構築するうえで考えるべきAWSリソースの特徴
  - Serverless Patternを構築することで得られるメリット
  - Serverless Patternを利用するうえで注意すべき事項

- お話しない内容
  - GCP、Azureの話
  - PHPを利用したServerless Pattern

<template>
  <Layout>
    <h2 class="description">
      登壇をより良くするために忌憚なきフィードバックをください！
    </h2>
    <div class="article">
      <hr>
      <div v-for="item in $page.allSurveyPage.edges">
        <h3><a v-bind:href="item.node.path" v-html="item.node.conference"/></h3>
        <ul>
          <li v-html="item.node.title"/>
        </ul>
      </div>
    </div>
    <hr>
  </Layout>
</template>

<style>
.article {
  margin: 1rem;
}
</style>

<page-query>
query posts {
  allSurveyPage {
    edges {
      node {
        title
        path
        conference
        datetime
        place
      }
    }
  }
}
</page-query>

module.exports = {
  siteName: 'survey.seike460.com',
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'survey/*.md',
        typeName: 'SurveyPage',
      },
      templates: {
        SurveyPage: '/survey/:conference'
      }
    }
  ]
}

<template>
  <Layout>
    <hr>
    <div class="article">
      <h2 v-html="$page.surveyPage.conference"/></h3>
      <ul>
         <li><h3>タイトル</h3></li>
        <ul>
          <li v-html="$page.surveyPage.title"/>
        </ul>
        <li><h3>発表時間</h3></li>
        <ul>
          <li v-html="$page.surveyPage.datetime"/>
        </ul>
        <li><h3>場所</h3></li>
        <ul>
          <li v-html="$page.surveyPage.place"/>
        </ul>
      </ul>
      <h3>プロポーザル</h3>
      <div v-html="$page.surveyPage.content"/></div>
    </div>
  </Layout>
</template>

<style>
.article {
  margin: 1rem;
}
</style>

<page-query>
query posts ($path: String!) {
  surveyPage (path: $path) {
    title
    conference
    datetime
    place
    content
  }
}
</page-query>