🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Q&A

解決済

1回答

637閲覧

AmplifyはSSRに対応していますか

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

0グッド

2クリップ

投稿2019/11/05 12:49

Aws Amplifyを使用して、SSR時にユーザー情報を取得、Storeへ格納したいです。
SSRでAmplifyを使用すると必ず固定のエラーが表示され使用できませんでした。

AmplifyはSSR対応していないのでしょうか?

下記にソースコードとエラー内容を載せさせていただきます。

エラー内容(ブラウザ表示)

イメージ説明
イメージ説明

各種ソースコード

/store/index.js

javascript

1import {Auth} from 'aws-amplify' // ここのファイルのAuthを使用しないようにするとエラーがでない(SSR時に読み込むとエラー発生) 2 3export const state = () => { 4 return { 5 auth: null 6 } 7} 8 9export const mutations = { 10 setAuth(state, auth) { 11 state.auth = auth 12 } 13} 14 15export const actions = { 16 nuxtServerInit({commit}) { 17 Auth.currentAuthenticatedUser({ 18 bypassCache: false 19 }) 20 .then(auth => { 21 commit('setAuth', auth) 22 }) 23 .catch(err => { 24 console.error(err) 25 }); 26 } 27} 28

/middleware/auth.js

javascript

1import _ from 'lodash' 2 3export default async ({store, redirect}) => { 4 if (_.isNull(store.state.auth)) { 5 redirect('/signin') 6 } 7}

/plugins/amplify.js

javascript

1import Vue from 'vue' 2import Amplify, * as AmplifyModules from 'aws-amplify' 3import {AmplifyPlugin, components} from 'aws-amplify-vue' 4import aws_exports from '../aws-exports' 5 6Vue.use(AmplifyPlugin) 7Vue.use(AmplifyModules) 8 9Vue.component(components) 10 11export default async () => { 12 Amplify.configure(aws_exports) 13}

/pages/index.vue

vue

1<template> 2 <div> 3 ... 4 </div> 5</template> 6 7<script> 8 export default { 9 middleware: 'auth' 10 } 11</script>

nuxt.config.js

javascript

1export default { 2 mode: 'universal', 3 /* 4 ** Headers of the page 5 */ 6 head: { 7 titleTemplate: '%s - ' + process.env.npm_package_name, 8 title: process.env.npm_package_name || '', 9 meta: [ 10 {charset: 'utf-8'}, 11 {name: 'viewport', content: 'width=device-width, initial-scale=1'}, 12 {hid: 'description', name: 'description', content: process.env.npm_package_description || ''} 13 ], 14 link: [ 15 {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'} 16 ] 17 }, 18 /* 19 ** Customize the progress-bar color 20 */ 21 loading: {color: '#fff'}, 22 /* 23 ** Global CSS 24 */ 25 css: [], 26 /* 27 ** Plugins to load before mounting the App 28 */ 29 plugins: [ 30 {src: '~plugins/amplify.js', mode: 'client', ssr: false} 31 ], 32 /* 33 ** Nuxt.js modules 34 */ 35 modules: [], 36 /* 37 ** Build configuration 38 */ 39 build: { 40 /* 41 ** You can extend webpack config here 42 */ 43 extend(config, ctx) { 44 } 45 } 46}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

色々と調べた結果対応していないそう。
信頼できる情報源より。

今後に期待。

投稿2019/11/12 01:50

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問