Nuxt.jsとFirebase Cloud Functionsを使用してSSRをしたいと思っております。
試しに、/にアクセスすると他のURLにリダイレクトし、/testにアクセスしたらテストページ(test.vue)を表示するようにしたいです。
プロジェクトのファイル構成は現状以下の通りです。
example-project
│
├ app
│├ layouts
││ └ default.vue
│├ pages
││ ├ index.vue
││ └ test.vue
│├ .nuxt(フォルダ)
│├ node_modules(フォルダ)
│├ package.json
│└ yarn.lock
│
│
├ dist
│├ client
│└ server
│
├ functions
│├ node_modules(フォルダ)
│├ index.js
│├ nuxt-server.js
│├ nuxt.config.js
│├ package-lock.json
│├ package.json
│└ yarn.lock
│
├ firebase.json
└ build.sh
デプロイ時はappフォルダ内のNuxt.jsをyarn build
でビルド後、build.sh
を実行し、firebase deploy
しております。
現状/
にアクセスするとちゃんとリダイレクトが実行されます。
/test
にアクセスするとブラウザに以下のような文字が表示されます。
// 20200612193908 // https://example.page/test { }
ここを以下のtest.vue
に書かれてあるとおり、testと表示するようにしたいです。
現状何が原因かさっぱりわからないのですがご教授いただけないでしょうか?
ソースコード
vue
1// app/pages/test.vue 2 3<template> 4 <div>test</div> 5</template>
js
1// functions/nuxt-server.js 2 3const { Nuxt, Builder } = require('nuxt') 4const app = require('express')() 5 6const isDev = (process.env.NODE_ENV !== 'production') 7const port = process.env.PORT || 3000 8 9const config = require('./nuxt.config.js') 10config.dev = process.env.NODE_ENV === 'development' 11const nuxt = new Nuxt(config) 12 13app.get('/', (req, res) => { 14 res.redirect('https://auth.example.page'); 15}) 16 17app.get('/test', (req, res) => { 18 nuxt.renderRoute('/test', { req }) 19 .then(result => { 20 res.send(result.html) 21 }).catch(e => { 22 res.send(e) 23 }) 24}) 25 26module.exports = app
js
1// functions/index.js 2 3const functions = require('firebase-functions'); 4const nuxtServer = require('./nuxt-server'); 5 6exports.nuxtServer = functions.https.onRequest(nuxtServer)
js
1// functions/nuxt.config.js 2 3module.exports = { 4 buildDir: './dist', 5 build: { 6 publicPath: '/' 7 } 8}
sh
1// build.sh 2 3rm -rf dist 4mkdir -p dist 5# server 6cp -R functions dist/server 7cp -R app/.nuxt dist/server/ 8#client 9cp -R app/static dist/client 10cp -R app/.nuxt/dist/client/* dist/client/
json
1// firebase.json 2 3{ 4 "hosting": { 5 "public": "dist/client", 6 "ignore": [ 7 "firebase.json", 8 "**/.*", 9 "**/node_modules/**" 10 ], 11 "rewrites": [ 12 { 13 "source": "**", 14 "function": "nuxtServer" 15 } 16 ] 17 }, 18 "functions": { 19 "source": "dist/server" 20 } 21} 22
あなたの回答
tips
プレビュー