Quasar SSR vue / node 앱을 Firebase 호스팅에 배포

Question

firebase 호스팅에서 node / vue 프로젝트를 업로드하고 실행하기 위해 많은 접근 방식을 시도했지만 성공하지 못했습니다.

나는 다음 한 Firecast YouTube 채널에 공식 지침을 하지만, 내가 모르는 뭔가가있어 보인다.

SSR 모드의 vue.js 앱이 localhost에서 잘 작동합니다. 기본 노드 / 익스프레스 앱과는 약간 다릅니다. Firebase 호스팅에 배포되면 오류 404 페이지가 있습니다. ( SSR 배포에 대한 Quasar 문서 )

quasar build -m ssr새 폴더 dist/ssr폴더 를 생성 하는를 사용하여 앱을 빌드했습니다 .

firebase.jsonfirebase 프로젝트를 시작한 내 프로젝트의 루트에 firebase init다음 줄 이 포함되어 있습니다.

  {
    "hosting": {
      "public": "dist/ssr",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "function": "app"
        }
      ]
    }
  }

Firebase 호스팅에 배포하기 전에 테스트를 시도 firebase serve했지만 페이지에 액세스 localhost:5000하면 오류 404 또는 콘텐츠 없음이 표시됩니다.

누구든지 해결책이 있습니까?

Answer 1

그래서 여기에 제가 생각 해낸 해결책이 있습니다.

1. 를 사용하여 프로젝트 폴더의 루트에서 firebase 프로젝트를 초기화 한 후 firebase init생성 된을 엽니 다 firebase.json.

{
  "hosting": {
    "public": "dist/ssr",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [{
      "source": "**",
      "function": "ssrapp" // <- This NAME should be the same as in /src-ssr/index.js
    }]
  },
  "functions": {
    "source": "dist/ssr"
  }
}

1. 종속성 설치 yarn add firebase-admin firebase-functions

2. 열기 및 편집 /src-ssr/index.js:

// BEGINNING OF THE FILE
const functions = require('firebase-functions') // <---- ADD FIREBASE FUNCTIONS

const
  express = require('express'),
  compression = require('compression')

const
  ssr = require('quasar-ssr'),
  extension = require('./extension'),
  app = express(),
  port = process.env.PORT || 3000
...
...
...
// END OF THE FILE

// COMMENT or DELETE following 3 lines of app.listen function
// app.listen(port, () => {
//   console.log(`Server listening at port ${port}`)
// })

exports.ssrapp = functions.https.onRequest(app) // <- "ssrapp" name is the same as in firebase.json

1. 이제 다음을 사용하여 SSR 앱을 빌드하십시오. quasar build -m ssr

2. 터미널에서 이동하여 ./dist/ssr/실행 yarn install하여 노드 모듈을 설치하십시오.

3. 마지막으로 루트 경로 "./"로 돌아가서 firebase serve명령을 사용 하여 배포하기 전에 테스트합니다 . 평소처럼 포트 5000에서 사용할 수 있습니다. localhost : 5000

Answer 2

http://localhost:5000브라우저에서을 사용하면 공용 폴더에서 "index.html"이라는 파일이 요청됩니다 dist/ssr. 여기에 표시된 내용에서 해당 폴더에는 index.html이 없습니다. "index.js"와 "template.html"이 보입니다.

다음 중 하나를 수행해야합니다.

• dist / ssr에 index.html이 생성되도록 정렬
• 또는 URL을 변경하여 dist / ssr 아래에있는 HTML 파일을 찾으십시오.
• 또는 찾고있는 콘텐츠가있는 폴더를 가리 키도록 공용 폴더 구성을 변경합니다.