AWSでサーバレスシステムを構築する(Vueアプリ作成)

この記事は2020年04月15日に投稿しました。

f:id:paveway:20190914064630j:plain

1. はじめに

こんにちは、iOSのエディタアプリPWEditorの開発者の二俣です。
今回はAWSでサーバレスシステムを構築する(Vueアプリ作成)についてです。

目次へ

2. AWSでサーバレスシステムを構築する(Vueアプリ作成)

AWSでサーバレスシステムを構築する方法のVueアプリ作成についてです。
今回作成機能は以前

www.paveway.info

で導入したAmplifyで提供されているサインイン機能を使用して、サインイン画面からホーム画面を表示するまでになります。

Vueアプリのひな型は、vue-cliを利用して作成します。
事前にvue-cliをインストールしておいてください。

Vueアプリの構成

※vue-cliで作成されたひな型のsrcフォルダのみ表示しています。

<アプリルート>
+- src
   +- App.vue         修正
   +- aws-exports.js  新規追加
   +- main.js　　　　　 修正
   +- router          新規追加
   |  +- index.js
   +- components      新規追加
   |  +- SignIn.vue
   |  +- Home.vue
   +- utils           新規追加
      +- auth.js

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

aws-exports.js

<リージョン>は適切なリージョンを指定してください。
<ユーザプールID>、<アプリクライアントID>は以前

www.paveway.info

で作成した、ユーザプールID、アプリクライアントIDを指定してください。

const awsmobile = {
    "aws_project_region": "<リージョン>",
    "aws_cognito_region": "<リージョン>",
    "aws_user_pools_id": "<ユーザプールID>",
    "aws_user_pools_web_client_id": "<アプリクライアントID>",
    "oauth": {}
};

export default awsmobile;

main.js

import Vue from 'vue'
import App from './App.vue'
import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import awsconfig from './aws-exports'
import router from './router'
Amplify.configure(awsconfig)

Vue.use(AmplifyPlugin, AmplifyModules)
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

utils/auth.js

import { Auth } from "aws-amplify";

function getUser() {
  return Auth.currentAuthenticatedUser().then((user) => {
    if (user && user.signInUserSession) {
      return user
    } else {
      return null
    }
  }).catch(err => {
    console.log(err)
    return null
  })
}

export { getUser }

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home.vue'
import SignIn from '@/components/SignIn.vue'
import { AmplifyEventBus } from "aws-amplify-vue"
import { getUser } from '@/utils/auth.js'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/signin',
    name: 'SignIn',
    component: SignIn
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

AmplifyEventBus.$on("authState", info => {
  if (info === "signedIn") {
    router.push({path: '/'})
  } else if (info === "signedOut") {
    router.push({path: '/signin'})
  }
});

router.beforeResolve(async (to, from, next) => {
  console.log(to)
  const user = await getUser()
  console.log(user)
  if (user) {
    return next()

  } else {
    if (to.name === 'SignIn') {
      return next()
    } else {
      return next({
        path: '/signin'
      })
    }
  }
})

export default router

components/SignIn.vue

<template>
  <div>
    <amplify-authenticator />
  </div>
</template>

<script>
export default {
  
}
</script>

<style scoped>

</style>

components/Home.vue

<template>
  <div>
    <amplify-sign-out />
  </div>    
</template>

<script>
export default {
  name: "Home",
}
</script>

<style scoped>

</style>

目次へ

3. おわりに

Webアプリで定型的なサインアップ/サインイン/サインアウトの機能が、Amplifyにより用意されています。
毎回この部分を作り込まなくて済むので、助かります。

リンク

紹介している一部の記事のコードはGitlabで公開しています。
興味のある方は覗いてみてください。

目次へ

私が勤務しているニューラルでは、主に組み込み系ソフトの開発を行っております。
弊社製品のハイブリッドOS Bi-OSは高い技術力を評価されており、特に制御系や通信系を得意としています。
私自身はiOSモバイルアプリやウィンドウズアプリを得意としております。
ソフトウェア開発に関して相談などございましたら、お気軽にご連絡ください。

また一緒に働きたい技術者の方も随時募集中です。
興味がありましたらご連絡ください。

EMAIL : info-nr@newral.co.jp / m-futamata@newral.co.jp
TEL : 042-523-3663
FAX : 042-540-1688

目次へ

プログラムを書こう！

実務や自作アプリ開発で習得した役に立つソフトウェア技術情報を発信するブログ