Firebase에 nuxt 배포

소개

나는 이미 Nuxt와 SSR을 사용하는 업무 사이트가 하나 있는데, 왜 나는 모든 물건을 Firebase로 옮겨야 합니까?

SSR stands for server-side rendering, you can find more information here

이유가 너무 많아!
몇 개를 열거하다.

가격

현재의 해결 방안: 나는 매달 개인 서버 한 대의 비용을 지불해야 한다
Firebase: 응, 내 필요를 위해서 공짜야.

프로비저닝

현재의 해결 방안: 나는 반드시 스스로 모든 것을 설정해야 한다.Docker 컨테이너, https, Nginx 리버스 에이전트...
Firebase: 당신이 필요로 하는 모든 것은 이미 완성되었습니다.로그, 분석, https, 사용자 정의 영역...

현대화하다

현재의 해결 방안: 내 사이트를 바꾸시겠습니까?다음은 단계입니다.

변경 사항을git

으로 전송

연결dockerhub 촉발 및 용기 구축(10-15분)

서버에 연결(1분)

최신 용기 버전 (1분)

docker가 만든 정확한 폴더를 찾았습니다.yaml 업데이트 중(2분)

나는 내가 일을 좀 자동화할 수 있다는 것을 알고 있지만, 여전히...
Firebase:단계

형 화기는 단말기에 배치(1-2분)

완성...live

으로 변경
너 중독됐어?분명히 너는.내가 너를 도와 그것을 일으켜 줄게.

Firebase 항목 설정

Firebase 계정 만들기

Firebase를 사용하고 싶으세요?그럼, 먼저 create your account이 필요합니다.
완성?우리는 지금 새로운 프로젝트를 만들 수 있다.

Firebase 항목 만들기

Firebase console으로 이동하고 항목 추가 를 누르십시오.
항목 이름을 설정합니다.
계속하려면 을 클릭합니다.
Google analytics 선택을 잠시 취소하고 Add Firebase 를 클릭합니다.
프로젝트가 초기화될 때까지 기다린 다음 "계속"을 누르십시오.

Firebase CLI 설치

이제 NPM의 도움으로 컴퓨터에 Firebase 도구를 설치합니다.
원하는 터미널에 이 명령을 입력하면 됩니다.

npm i -g firebase-tools

나중에 이 명령을 사용하여 로그인할 수 있습니다.

firebase login

구글 계정으로 로그인할 수 있는 브라우저 창이 나타납니다.
네, 초기 Firebase 설정이 완료되었습니다...
Firebase를 프로젝트에 추가하기 전에 응용 프로그램 프로젝트 구조를 업데이트해야 합니다...

프로젝트 구조

I'm supposing you already have a nuxt project.

If not, head over to the Nuxt website to create a new app with express for the server side.

우리의 항목은 세 개의 디렉터리로 분해될 것이다

src: 이것이 바로 우리의 개발 파일이 있는 위치

함수: 이것은 우리의 SSR 함수가

이 될 위치입니다

공공: 이 디렉터리는

의 Firebase가 제공하는 파일을 저장합니다.
우리는 기능과 공공 디렉터리를 책임지지 않을 것이다.자동으로 생성됩니다.
따라서 src 디렉터리를 만들고 모든nuxt 디렉터리를 이동합니다.
디렉토리만 루트 디렉토리에 구성 파일 유지
너는 반드시 다음과 같은 구조가 있어야 한다

응용 프로그램이 지금 고장났어요!nuxt 설정을 업데이트해서 복구합시다...

Nuxt 구성 업데이트

nuxt에서.구성js, 모듈에 다음 줄을 추가합니다.출구

module.exports = {
[...]
  srcDir: 'src',
  buildDir: 'functions/.nuxt',
[...]
}

build 객체에서 extractCss를true로 설정

module.exports = {
[...]
  build: {
    extractCSS: true,
    [...]
  }
[...]
}

npm 스크립트에서 항목 파일 서버/인덱스를 찾을 수 없기 때문에, 이것은 여전히 파괴됩니다.회사 명
우리의 소프트웨어 패키지를 업데이트합시다.json
이것으로 dev와start 스크립트를 대체합니다.

I just prefixed the path with "src"

    "dev": "cross-env NODE_ENV=development nodemon src/server/index.js --watch server",
    "start": "cross-env NODE_ENV=production node src/server/index.js",

현재, yarn dev 또는 npm run dev를 입력하여 프로그램을 시작할 수 있습니다

Notice that the functions directory has been created with the nuxt files in it.

프로젝트에 Firebase 추가

Git 또는 NPM과 마찬가지로 Firebase CLI는 init 명령을 사용하여 필요한 모든 것을 신속하게 가져올 수 있습니다.
시작 명령

firebase init

CLI는 다음과 같은 몇 가지 질문을 합니다.

? Are you ready to proceed?
> Yes

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
> Functions: Configure and deploy Cloud Functions,
> Hosting: Configure and deploy Firebase Hosting sites

? Please select an option:
> Use an existing project
(Select the project we created earlier)

? What language would you like to use to write Cloud Functions? (Use arrow keys)
> JavaScript

? Do you want to use ESLint to catch probable bugs and enforce style? (y/N)
> y

? Do you want to install dependencies with npm now? (Y/n)
> Y

? What do you want to use as your public directory? (public)
> public

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
> N

A wild public directory appeared! Our project structure is now complete.

우리는 지금 우리의 함수를 편집할 수 있다...

SSR 기능 실행

함수/인덱스를 엽니다.js 파일, 모든 내용을 삭제하고 다음 코드를 붙여넣기

const functions = require('firebase-functions')
const { Nuxt } = require('nuxt')
const express = require('express')

const app = express()

const config = {
  dev: false
}

const nuxt = new Nuxt(config)

let isReady = false
const readyPromise = nuxt
  .ready()
  .then(() => {
    isReady = true
  })
  .catch(() => {
    process.exit(1)
  })

async function handleRequest(req, res) {
  if (!isReady) {
    await readyPromise
  }
  res.set('Cache-Control', 'public, max-age=1, s-maxage=1')
  await nuxt.render(req, res)
}

app.get('*', handleRequest)
app.use(handleRequest)
exports.nuxtssr = functions.https.onRequest(app)

한 마디로 하면 요청할 때마다 함수는 응답과 요청 대상을nuxt에 전달합니다.프로그램 렌더링을 처리하는 데 사용되는 render (req,res) 함수입니다.

기능 패키지를 업데이트합니다.json

이 함수는nuxt 프로그램과 같은 라이브러리가 필요합니다.가방을 복사하다.함수/패키지의 json 의존 항목입니다.json 의존 항목
이 글을 작성할 때 Firebase는 node 버전 10을 지원합니다.함수/패키지에 있습니다.json은 노드 엔진 버전을 8에서 10으로 업데이트할 수 있습니다.
다음은 함수/패키지의 예입니다.공백nuxt 프로젝트의 json

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "eslint .",
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "10"
  },
  "dependencies": {
    "firebase-admin": "^8.0.0",
    "firebase-functions": "^3.1.0",
    "cross-env": "^5.2.0",
    "nuxt": "^2.3.4",
    "express": "^4.16.4",
    "vuetify": "^1.3.14",
    "vuetify-loader": "^1.0.8",
    "@nuxtjs/pwa": "^2.6.0"
  },
  "devDependencies": {
    "eslint": "^5.12.0",
    "eslint-plugin-promise": "^4.0.1",
    "firebase-functions-test": "^0.1.6"
  },
  "private": true
}

Firebase를 업데이트하고 있습니다.json

전체 파일을

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

모든 요청을 함수로 바꿉니다

Using a node version above 10 can cause some issues...
You can use nvm or directly install NodeJs 10 on your computer.

모든 일을 자동화하다

정적 파일

우리는 앞에서 정적 파일이 공공 디렉터리에 저장될 것이라는 것을 알았다.그런데nuxt 정적 파일은 무엇입니까?
nuxt 프로그램 자체가nuxtbuild 명령의 결과입니다.
및 정적 파일(.jpg,.ico,.png,...)src/static 디렉터리에 저장
그래서 우리는 그것들을 모두 공공 디렉터리로 옮겨서 어떻게 하는지 보여줘야 한다...

차근차근

다음은 저희가 스크립트로 자동화할 내용입니다.

디렉터리에 이미 내용이 있는 것을 방지하기 위해 디렉터리를 정리합니다

nuxt 응용 프로그램 구축

에 구축된 응용 프로그램은 현재functions 디렉터리에 있습니다.함수/의 컨텐트를 복사합니다.nuxt/dist/directory to the public/u nuxt directory

정적 파일을 src/static/directory에서 공공 디렉터리

의 루트로 복사합니다

설치 함수 의존항 사용

The public folder should look something like this

이 스크립트들은 우리를 위해 이 모든 것을 완성할 것이다.그들은 너무 좋다.
마스터 패키지에 추가합니다.json 파일.

Windows 버전

scripts: {
    "build": "nuxt build",
    "build:firebase": "yarn clean && yarn build && yarn copy && cd \"functions\" && yarn",

    "clean": "yarn clean:public && yarn clean:functions && yarn clean:static",
    "clean:functions": "rimraf \"functions/node_modules\" && rimraf \"functions/.nuxt\"",
    "clean:public": "rimraf \"public/**/*.*!(md)\" && rimraf \"public/_nuxt\"",
    "clean:static": "rimraf \"src/static/sw.js\"",

    "copy": "yarn copy:nuxt && yarn copy:static",
    "copy:nuxt": "xcopy \"functions\\.nuxt\\dist\\*\" \"public\\_nuxt\\\" /E /Y",
    "copy:static": "xcopy \"src\\static\\*\" \"public\\\" /E /Y",

    "start:firebase": "firebase serve --only functions,hosting",

    "deploy": "firebase deploy --only functions,hosting"
}

MacOs 버전

Thanks to for his MacOs scripts version

 "scripts": {
    // ...
    "build:firebase": "yarn clean && yarn build && yarn copy && cd functions && yarn",

    "clean": "yarn clean:public && yarn clean:functions && yarn clean:static",
    "clean:functions": "rimraf \"functions/node_modules\" && rimraf \"functions/.nuxt\"",
    "clean:public": "rimraf \"public/**/*.*!(md)\" && rimraf \"public/_nuxt\"",
    "clean:static": "rimraf \"src/static/sw.js\"",

    "copy": "yarn copy:nuxt && yarn copy:static",
    "copy:nuxt": "mkdir public/_nuxt && cp -r functions/.nuxt/dist/* public/_nuxt",
    "copy:static": "cp -r src/static/* public",

    "start:firebase": "firebase serve --only functions,hosting",

    "deploy": "firebase deploy --only functions,hosting",

    // ...
  }

Still having issues? comment might help you

종말

이제 다음 명령을 실행하여 응용 프로그램을 시작할 수 있습니다.

yarn build:firebase
yarn start:firebase

배포:

yarn build:firebase
yarn deploy

Tho, 발전을 위해 당신은 여전히 사용할 수 있습니다

yarn dev

결론

현재, Firebase에서 서버에 있는nuxt 프로그램을 얻었습니다...간단하죠?
본고에서, 나는 공백 nuxt 응용 프로그램으로 예시를 하나 만들었다.이것은 최종 프로젝트 nuxt-on-firebase example repository입니다.
너는 잘못을 발견했니?나 정말 창피해!당신은 이곳에서 nuxt-on-firebase repository을 실행하여 그것을 바로잡을 수 있습니다