質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.48%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Nuxt.js

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

0回答

1358閲覧

Nuxt.js、Express、Firebase Cloud FunctionsでSSRしたい。

Khy

総合スコア118

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Nuxt.js

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

0クリップ

投稿2020/06/12 10:47

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

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問