나는 약 이틀 동안 인터넷을 검색해서 Sapper와 Firebase를 통합하는 가장 좋은 방법을 찾으려고 했다.이것은 결코 듣기에 그렇게 쉽지 않다.
Link to example site

무엇이 세퍼입니까?

Sapper는 고성능 웹 응용 프로그램을 구축하는 프레임워크입니다.그것은 사실상 컴파일러다.모든 코드가 구축되고 최적화되어 생산에 들어갈 수 있습니다.
그것은 날씬한 기초 위에 세워졌다.js.Sapper에는 멋진 기능이 많이 있습니다. 문서를 보시기 바랍니다Sapper.이 프레임워크는 SSR 기능을 허용하지만 npm run export 정적 사이트를 생성할 수도 있습니다.

Firebase란 무엇입니까?

Firebase는 구글의 플랫폼으로'응용 프로그램을 신속하게 구축하고 인프라 시설을 관리할 필요가 없다'는 데 쓰인다.기본적으로 몇 개의 명령만 있으면 정적 사이트를 위탁 관리하여 데이터베이스에 연결하고 수시로 신분 검증을 제공할 수 있다.
정적 사이트 외에도 Firebase는 함수를 통해 서버 없음 영역을 탐색합니다.이것은 기본적으로 작은 논리입니다. 응용 프로그램에서 호출하거나 신분 검증이나 데이터베이스에 어떤 업데이트가 발생할 때 호출할 수 있습니다.
함수

클라이언트로부터 민감한 논리 획득

데이터베이스에 데이터를 삽입하기 전에 정리 같은 작업을 수행합니다.

우리의 예에서 우리의 코드 서비스가 서버에 나타나는 응용 프로그램에 도움을 준다

서버 측의 이점

검색엔진 최적화: 파충류는 미리 생성된 표시를 더욱 잘 색인할 수 있다.

성능: 팽창된 자산에 서비스를 제공할 필요가 없으며, 일부 서버 캐시를 할 수 있습니다.

Firebase x Sapper를 결합하는 이유는 무엇입니까?

Firebase 개발은 정말 빠르고 쉬워요. Sapper도 마찬가지예요. "왜 양쪽 다 예쁘지 않아요?"라고 생각해요.저는 Firebase 인증, 데이터베이스와 CDN 관리의 모든 세부 사항, 개발 속도, 응용 프로그램의 크기, Sapper의 전체적인 위엄을 가지고 있습니다.

시작합시다.

우선, 우리는 필요한 의존항을 설치해야 한다.(시스템에 Node.js 버전 >=10.15.3 및 적합한 NPM 버전이 있다고 가정합니다.)

Sapper 설치

Sapper는 degit라는 도구를 사용합니다. npx 를 통해 사용할 수 있습니다.

$ npx degit sveltejs/sapper-template#rollup sapper_firebase

$ cd sapper_firebase && npm install # install dependencies

프로젝트에 Firebase 추가

참고:
이를 위해서는 Firebase CLI 도구가 필요합니다.npm i -g firebase-tools@latest

다음 단계 이전:
Firebase로 이동하여 콘솔에 로그인해야 합니다.여기서 새 Firebase 프로젝트를 만들어야 합니다.프로젝트를 만든 후 홈 페이지에서 단추를 누르면 새로운 웹 응용 프로그램을 추가합니다.니 이름이 뭐든
이제 우리는 계속할 수 있다.

# in /sapper_firebase
$ firebase login # make sure to login to your console account

$ firebase init functions hosting

화면으로 돌아가 새 항목을 선택할 수 있습니다.

Select a default Firebase project for this directory: 
❯ sapper-firebase (sapper-firebase) # select your project

다음 절차를 따르십시오.

? What do you want to use as your public directory? static
? Configure as a single-page app (rewrite all urls to /index.html)? N
? Choose your language: Javascript.
? Do you want to use ESLint to catch probable bugs and enforce style? N
? Do you want to install dependencies with npm now? Y

그리고 함수 의존항을 설치합니다.

우리의 화력 기반을 바꾸다.json

우리는 Firebase를 바꾸어 실현하고자 하는 목표를 가지고 있다.json:

Firebase 관리 서비스를 통해 프로젝트의 정적 파일을 관리합니다.

모든 요청을 우리가 만들 함수로 다시 지정합니다.

이것은 최신 Firebase다.json:

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

The rewrite is checking for requests under any route, and basically letting the function named 'ssr' handle it.

편집: 아마 더 있을 거예요.최근에 함수/패키지에 의존 항목이 있으면 오류가 발생합니다.json은 7보다 크므로 다음과 같이 설정하면 됩니다.

"firebase-admin": "^7.0.0"

기억하십시오:firebase-admin그러면 "ssr"함수를 만듭니다.cd functions && npm install

const functions = require('firebase-functions');

exports.ssr = functions.https.onRequest((_req, res) => res.send('hello from function'));

이것은 단지 일시적인 것이기 때문에 우리는 우리의 기능을 테스트할 수 있다.다음 작업을 실행할 수 있습니다.

$ firebase serve

이 메시지를 받은 경우:/sapper_firebase/functions/index.js ⚠ Your requested "node" version "8" doesn't match your global version "10"로 이동하여 설정할 수 있습니다.

"engines": {
    "node": "10"
}

이외에도 functions/package.json 를 실행하고 http://localhost:5000 로 이동하면 다음을 볼 수 있습니다.

테스트 기능

우리가 이 점을 본 것은 Firebase가 우리firebase servefloder에서 index.html 파일을 만들었기 때문이다.안전하게 삭제하고 http://localhost:5000/ 로 이동할 수 있습니다.

만세!

현재 우리는 우리의 기능이 작동하고 요청을 다시 정할 수 있다는 것을 증명했다. 우리는 Sapper를 약간 처리하여 우리의 기능이 우리의 서버를 운행하도록 해야 한다.파일 편집 static 부터 시작하겠습니다.

구축할 때 생성된sapper 중간부품을 내보내고 싶습니다.

우리는 단지 src/server.js 에서 로컬 서버를 실행하고 싶을 뿐이다.

npm run dev

import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

if (dev) {
  polka() // You can also use Express
    .use(
    compression({ threshold: 0 }),
    sirv('static', { dev }),
    sapper.middleware()
    )
    .listen(PORT, err => {
    if (err) console.log('error', err);
    });
}

export { sapper };

우리는 그것의 구축과 접근 http://localhost:3000 을 통해 src/server.js 이 유효한지 테스트할 수 있다.Borat (표준 Sapper 유머) 의 그림을 표시해야 합니다.
그러나 이것은 여전히 우리의 Sapper 서버일 뿐입니다. 우리는 Firebase 기능에서 그것을 실행하고 싶습니다.우선 express를 설치해야 합니다.

$ cd functions
$ npm install express sirv compression polka

Note: 'sirv' 'compression' and 'polka' are required, because of the built directory that depends on it. We'll only use express in our function though. But if we exclude the others, our function will fail on deploy.

express와 다른 의존항을 설치한 후에 우리는 우선 작업 절차를 조정하여 프로젝트의 복사본을 함수에 구축해야 한다.우리는 npm 스크립트를 편집하여 이 점을 실현할 수 있다.

Windows users: please use the guide at the end of the post for your scripts

...
"scripts": {
    "dev": "sapper dev",
    "build": "sapper build --legacy && cp -R ./__sapper__/build ./functions/__sapper__",
    "prebuild": "rm -rf functions/__sapper__/build && mkdir -p functions/__sapper__/build",
    "export": "sapper export --legacy",
    "start": "npm run build && firebase serve",
    "predeploy": "npm run build",
    "deploy": "firebase deploy",
    "cy:run": "cypress run",
    "cy:open": "cypress open",
    "test": "run-p --race dev cy:run"
},
...

이것은 모든 필요한 파일을functions 폴더로 복사한 다음 로컬에서 위탁 관리하거나 서비스를 제공합니다.
다음을 시도하십시오.

$ npm start # now using firebase

너는 이전의 소식을 보아야 한다!

Functions 및 express를 통해 Sapper 어플리케이션에 서비스 제공

우리는 우리의 기능에 express 응용 프로그램을 삽입하여 express에서 우리가 수입한 Sapper 중간부품을 사용하여 우리의 SSR 응용 프로그램에 쉽게 서비스를 제공할 수 있다.정적 폴더도 매우 빠른 Firebase CDN을 통해 서비스를 제공합니다.npm run dev

const functions = require('firebase-functions');
const express = require('express');

// We have to import the built version of the server middleware.
const { sapper } = require('./__sapper__/build/server/server');

const app = express().use(sapper.middleware());

exports.ssr = functions.https.onRequest(app);

Sapper Firebase SSR 애플리케이션을 로컬에서 호스팅합니다.

네가 지금 해야 할 일은:

$ npm start

AAANND...

후라아

http://localhost:5000에서 이 그림을 보셨다면, 응용 프로그램은 로컬 Firebase functions emulator에서 서비스를 제공하고 있습니다!
SSR인지 확인하려면 페이지를 다시 불러오고 원본 코드를 확인하십시오. 모든 태그는 처음에 불러올 때 미리 보여야 합니다.그리고 터미널을 보세요. 프로그램을 탐색할 때 다양한 요청을 볼 수 있을 것입니다!

애플리케이션 관리

간단한 NPM 스크립트 덕분에 관리/배포가 간단합니다.

$ npm run deploy

파일과 함수를 시작하려면 시간이 걸립니다.But here's my version online SSRing like a boss .

Windows 사용자

너는 그것을 일하게 하기 위해 별도의 일을 해야 한다...

내용 삭제와 복사를 돕기 위해 npm 패키지를 추가합니다:

functions/index.jsD 로고는 개발 의존 항목에 추가됩니다. 이것은 우리가 필요로 하는 곳이기 때문입니다.스크립트를 다음으로 변경합니다.

...
"build": "sapper build --legacy && ncp ./__sapper__/build ./functions/__sapper__/build",
"prebuild": "rimraf - functions/__sapper__/build && mkdirp functions/__sapper__/build",
...

이 해결 방안들은 매우 거칠다. Sapper와 Firebase 재료의 신속한 변화로 인해 이 글은 미래에 나를 물어뜯을 수도 있다.디오 마르크스가 논평에서 이 요구를 해 주셔서 감사합니다.

정말 감사합니다.

이것은 나의 첫 번째 게시물이다. 나는 정말 다른 사람을 도울 수 있다고 생각한다. 왜냐하면 나는 몇 시간이 걸려서야 깨달았기 때문이다.그러나 시간 문제로 나는 컴퓨터에서 동영상을 만들 수 없어서 그것을 꺼냈다.
하지만 이걸 좋아하거나 문제가 있으면 트위터에서 나랑 얘기해도 돼.다음까지.