Next.js: Serverless Next: `next` 개발 전용 종속성을 만들고 더 작은 빌드와 더 빠른 부팅을 위해 `next-server` 도입

프론트엔드용 Now 2.0에서 볼 수 있는 콜드 스타트 ​​시간은 80mb IIRC의 이미지 크기에 대해 1.5초입니다.

Node 또는 V8 또는 콜드 평가에 상당한 시간이 소요되는 종속성을 변경하지 않고 1에 훨씬 더 가깝게 만드는 것이 가능해야 합니다(예 react 및 react-dom ).

와, 이건 굉장해!! :영형

우와 그거 굉장 하군.

next-server 대한 몇 가지 질문입니다.

1. 라이트 익스프레스 서버가 될까요?
2. 예, 고속 경로 및 next-routes 로 구성할 수 있습니까?

@Nishchit14 빌드 크기를 줄이려고 한다면 express 추가하지 않을 것입니다.

next-routes 는 여전히 잘 작동할 것이라고 확신합니다.

그래서 우리가 여기서 말하는 것은 기존 서버를 자체 패키지로 추출하는 것입니다. 따라서 이전과 같은 방식으로 작동하지만 next를 가져오는 대신 next-server를 가져옵니다.

이것은 굉장하다! 나와 내가 아는 다른 사람들은 스칸디움 ( 이 가이드 사용 )을

1) 패키지 크기. Lambda는 포함된 모든 개발 도구로 쉽게 접근할 수 있는 50MB의 하드 제한을 제공합니다.

2) 콜드 스타트. Lambda는 언제든지 더 많은 서버를 가동할 수 있으므로 빠른 부팅은 매우 중요합니다. 기존 서버도 최대 4시간 동안 작동하므로 애플리케이션의 전체 수명 주기 동안 콜드 스타트가 중요합니다.

이 이니셔티브를 보게 되어 매우 기쁘고 도움이 되어서 기쁩니다!

이것은 좋은 아이디어입니다. Nuxt.js에서도 마찬가지입니다. nuxt start -> nuxt-start 를 실행하는 데 필요한 명령이기 때문에 nuxt-start 라고 했습니다.

이것을 밀접하게 따릅니다. 가능한 것에 대한 데이터 포인트로서 www.bustle.com 은 <1s 콜드 스타트가 있는 AWS Lambda의 SSR preact 앱입니다. 배포된 전체 프로덕션 zip 파일은 166kb입니다. 이것이 모든 응용 프로그램 및 라이브러리 코드입니다. Webpack은 번들링에 사용됩니다.

@southpolesteve를 공유해 주셔서 감사합니다. 정말 인상적입니다. #목표

사용자 사례는 micro 및 micro-dev 와 매우 유사합니다.

같은 명칭을 사용하지 않는 이유는 무엇입니까? next 및 next-dev

이 예제를 사용하여 next.js와 서버리스를 어지럽히고 있으며 지금 더 작은 빌드를 수행할 수 있는 방법이 있는지 궁금합니다. 프로덕션에서 절대 필요하지 않고 serverless 또는 repack-zip 과 같은 패키지 프로그램의 구성 파일로 제외할 수 있는 node_modules 목록이 있습니까?

@Enalmada 여러 dep와 함께 next.js를 실행 중이고 material-ui 가 그 중 하나입니다. 규모 면에서 꽤 큰 앱이 있지만 Lambda에 업로드하는 빌드된 zip은 ~ 45MB입니다. 어떤 사이즈를 찾으시나요?

@albinekb 위의 166kb에 대한 southpolesteve bustle.com 응답에서 영감을 얻었으며 이 훌륭한 티켓이 완성될 때까지 dist 제외 파일에 무엇을 넣어야 하는지만 알았다면 내 "45MB"가 얼마나 쓸모없고 제거하기 쉬운지 궁금합니다. .

@albinekb 웹팩, 소포 또는 롤업을 사용하여 람다용 JS를 번들로 사용하는 것이 좋습니다. 크기를 절약할 수 있지만 일반 노드를 통해 파일 시스템을 치는 것이 꽤 느리기 때문에 부팅 시간도 절약됩니다.

ZEIT Now에 배포하고 빠른 콜드 부팅을 위해 이미지를 작게 유지하려면 Package Phobia와 같은 도구를 사용하여 설치하기 전에 npm 종속성의 크기를 확인하거나 현재 종속성의 크기를 확인할 수 있습니다. 팽창을 줄이기 위해).

readme에는 또한 팽창과 싸우는 데 도움이 되는 유사한 도구가 많이 있습니다. 여기에서 확인하십시오: https://github.com/styfle/packagephobia

이것은 다음 7 릴리스에서 해결되어야 하지 않았습니까? :(

지금 zeit에 배포하고 빠른 콜드 부팅을 위해 이미지를 작게 유지하려면 Package Phobia와 같은 도구를 사용할 수 있습니다.

빌어먹을 개미: https://packagephobia.now.sh/result?p=antd

@Enalmada 아마도 라이브러리 자체가 아니라 책임이 있는 antd의 종속성일 것입니다. 나는 https://packagephobia.now.sh/result?p=%40material-ui%2Fcore 에 대해 조사하고

이것은 다음 7 릴리스에서 해결되어야 하지 않았습니까? :(

이 점을 명확히 하기 위해 Next.js 7은 Serverless Next.js의 기반을 마련하고 약 5개의 경로를 제거하고 실제로 프로덕션에 필요한 경로는 2개만 남깁니다.

롤업 작업을 위해 next.js를 사용해본 사람이 있습니까? 아주 가까워진 것 같아요... 60m dist 파일에서 롤업을 실행하면 크기가 6m로 줄어듭니다. 불행히도 dist 파일은 실제로 시작되지 않으며 롤업 중 경고인 next.js 코드의 단일 순환 종속성 때문이라고 생각합니다. 누군가가 next.js 코드에서 순환 종속성을 제거할 가능성에 대해 평가할 수 있다면 우리 모두는 훨씬 더 작은 빌드와 더 빠른 부팅에 매우 가까울 것입니다.
https://github.com/zeit/next.js/issues/5392

이것을 밀접하게 따릅니다. 가능한 것에 대한 데이터 포인트로서 www.bustle.com 은 <1s 콜드 스타트가 있는 AWS Lambda의 SSR preact 앱입니다. 배포된 전체 프로덕션 zip 파일은 166kb입니다. 이것이 모든 응용 프로그램 및 라이브러리 코드입니다. Webpack은 번들링에 사용됩니다.

@southpolesteve 웹팩 번들 구성에 대해 무엇이든 공유할 수 있습니까?

@shauns 불행히도, 저는 더 이상 Bustle에 있지 않으며 더 이상 볼 코드가 없습니다

@southpolesteve 걱정 마세요! 적어도 webpack에서 그 위치를 아는 것이 좋습니다.

다음 서버에 대한 소식이 있습니까? 나는 이번 달에 몇 가지 커밋을 보았다.

카나리아 분기를 확인하십시오.

언제 출시할 예정인가요?

현재 타임라인을 공유할 수 없습니다.

이 오류를 완화하는 데 도움이 될 수 있습니다.
https://spectrum.chat/zeit/general/unable-to-import-module-now-launcher-error~2662f0ba-4186-402f-b1db-2e3c43d8689a

방금 착륙 #5927

@timneutkens next 를 devDependencies로 이동하고 next-server 를 내 종속성에 추가해야 하나요? 아니면 babel을 통해 자동으로 수행하나요?
https://github.com/zeit/next.js/blob/canary/packages/next/build/babel/plugins/next-to-next-server.ts

@Skaronator #5927을 사용하여 구현하는 경우 둘 다 아닙니다. 사양에 따라 페이지당 하나의 번들을 출력하므로 종속성이 필요하지 않습니다. 즉, .next/serverless/index.js 요구( require('./.next/serverless/index.js') )한 다음 render 메서드라고 부를 수 있습니다.

const page = require('./.next/serverless/index.js')

page.render(req, res)

그러면 페이지가 렌더링되고 응답이 완료됩니다.

굉장해!
나는 이것을 시도하고 있지만 aws 람다에서 작동하도록 하는 데 문제가 있습니다. 누구든지 팁이 있습니까?

커스텀 익스프레스 서버가 더 이상 필요하지 않을 것 같아요. 경로에 따라 서버리스 파일만 있으면 됩니다 🤔

편집하다
이것은 작동하는 것처럼 보이지만 빌드 단계를 최적화하는 방법을 보려면 더 깊이 파고들 필요가 있습니다.

const serverless = require("serverless-http");
const http = require('http');
const app = require('./.next/serverless/index.js');
const server = new http.Server((req, res) => app.render(req, res))
app.prepare().then(() => {
    const handler = serverless(server, {
        binary: binaryMimeTypes
    });
    return handler(event, context, callback);
});

"커스텀 서버"와 "서버리스"를 혼동하고 계신 것 같습니다. 해당 API는 완전히 분리되어 있으며 서버리스에는 .prepare 메소드가 없습니다. 준비할 것이 없으므로 즉시 페이지를 html로 렌더링하고 완료합니다. render 호출 시 응답.

const serverless = require("serverless-http");
const http = require('http');
const page = require('./.next/serverless/index.js');
const server = new http.Server((req, res) => page.render(req, res))
const handler = serverless(server, {
  binary: binaryMimeTypes
});
handler(event, context, callback);

사실, 그리고 위의 코드가 왜 작동했는지(어쩌면 단지 캐시였을 수도 있음) 그러나 serverless-http 가 http.Server 를 지원하지 않는 것처럼 보이기 때문에 나와 귀하의 코드 중 어느 것도 작동하지 않았습니다. 람다 event 개체가 필요한 렌더링 req 매개변수를 대체할 수 없기 때문에 page.render(req, res) 반환할 수 없습니다.

사용이 표현 또한, 내가 원하는하지 않습니다 / KOA /는이 다음 새 기능의 전체 목적을 .. 휴식 때문에 (어떤 serverless-http 그것을 사용에 괜찮다고 그래서 dependencie 무료입니다)

나는 아이디어가 없다 :/

아마도 이것은 @guillaumebreux https://github.com/zeit/now-builders/blob/master/packages/now-node-bridge/bridge.js에 도움이 될 것입니다.

@timneutkens 감사합니다. 도움을 주셔서 감사합니다.
하지만 지금은 작동하지 않습니다. 여전히 다음 오류가 있습니다. typeError: Parameter "url" must be a string, not undefined

이 스레드를 오염시키는 것을 멈추고 계속 파고들며 해결책을 찾으면 예제를 작성하겠습니다 😄

나는 약간 불분명하다. 이 스레드는 서버가 없는 앱과 필요한 모든 서버 측 npm 패키지를 함께 웹팩으로 포함하는 사전 컴파일된 서버의 두 가지 시나리오에 적용되는 것처럼 보입니다.

이 스레드의 첫 번째 댓글에 있는 gif는 내가 관심 있는 시나리오인 후자의 시나리오를 고려하는 것으로 보입니다. 이 npm 패키지 일 수도 있고 아닐 수도 있는 next-server 하는 것 같습니다 . 리포지토리가 연결되어 있지 않으며 버전 태그 중 하나가 8.0.0-canary.7(다음 버전 태그)이지만 Google이나 GitHub 검색을 통해 찾을 수 없었습니다. 올바른 패키지.

내가 지금까지 쓴 것이 정확합니까? 그렇다면 카나리아에 있더라도 조기에 액세스할 수 있는 방법이 있습니까?

내 현재 솔루션(명백한 이유로 in prod 에서 사용하지 않음 )은 next.config.js config.externals 에서 함수를 제거하는 것입니다. 것처럼 보이지만 이해할 수 없는 이유로 클라이언트 측에서 스타일이 늦게 로드되어 모든 페이지 로드에서 0.5초 동안 스타일이 지정되지 않은 페이지가 생성됩니다. (내 직감은 선택한 테마에 따라 다른 스타일 시트를 로드하는 테마 컨텍스트가 있고 서버가 공통 공급업체 번들을 만들기 위해 코드 분할이 잘 되지 않기 때문입니다.)

나는 node_modules 200MB의를 설치 한 다음 내 가난한, 작은 생산 VM 내가 업데이 트를 밀어마다에 컴파일 이분을 보낼 필요가 없도록 미리 빌드 된 서버를 생산할 수있을 싶어요.

* "prod"는 이 프로젝트가 미션 크리티컬하거나 그다지 전문적이지 않기 때문에 느슨하게 사용됩니다.

이것을 밀접하게 따릅니다. 가능한 것에 대한 데이터 포인트로서 www.bustle.com 은 <1s 콜드 스타트가 있는 AWS Lambda의 SSR preact 앱입니다. 배포된 전체 프로덕션 zip 파일은 166kb입니다. 이것이 모든 응용 프로그램 및 라이브러리 코드입니다. Webpack은 번들링에 사용됩니다.

Next.js 8 서버리스 타겟은 기본적으로 42Kb의 zip 크기를 가지고 있습니다.

굉장해! 기대됩니다!

@dfoverdx와 정확히 같은 질문이 있습니다. 실행에 필요한 모든 node_modules도 포함하는 서버 빌드를 만들고 싶습니다. 나는 Express와 함께 사용자 정의 서버를 사용하고 있으므로 해당 종속성이 패키지에 포함될 것으로 기대하지 않지만 이제 서버에 _all_ 종속성도 설치해야 합니다(react, next, axios, ...).

이것이 기본적으로 어떻게 설정되어 있지 않은지 이해가 되지 않습니까?
모든 종속성을 패키징하고 최소화할 수 있으면 서버 측 성능이 크게 향상되어야 합니까? 아니면 제가 완전히 틀렸습니까?

다음과 같이 webpack 구성의 externals 섹션을 덮어쓰면 대부분의 종속성이 포함됩니다.

module.exports = {
  webpack: (config, { dev }) => {
    config.externals = [];
    return config;
  })
};

그러나 서버에는 여전히 react 및 react-dom이 필요합니다. 그것들도 포함시키는 방법을 알 수 없습니다 ...

불행히도 현재 서버리스 모드로 사용자 정의 서버를 생성할 수 없습니다. 그리고 일반 모드를 사용하는 경우 .next에서 생성된 _app.js가 예를 들어 next/router에 의존하기 때문에 다음 및 모든 종속성을 포함해야 합니다.

비서버리스 모드도 다음에 번들로 제공되지 않는 이유는 무엇입니까?

불행히도 현재 서버리스 모드로 사용자 정의 서버를 생성할 수 없습니다. 그리고 일반 모드를 사용하는 경우 .next에서 생성된 _app.js가 예를 들어 next/router에 의존하기 때문에 다음 및 모든 종속성을 포함해야 합니다.

다음 8부터는 server.js에서 'next' 대신 'next-server'를 요구할 수 있으며 그렇게 하면 로컬 개발 중에만 핫 리로딩을 잃게 됩니다. 이론적으로 중간 서버에서 CI 빌드를 수행하고 Webpack 관련 종속성을 프로덕션 인스턴스에 복사하지 않는 기능을 제공합니다. 그러나 우리는 아직 우리 프로젝트에서 그것을 시도하지 않았습니다.

@ElvenMonky 는 1년 전부터 이와 같은 것을 기다리고 있지만 문서나 예제에서 이에 대한 내용을 찾을 수 없습니다.

@timneutkens 이것을 확인해 주 시겠습니까?

그렇다면 그러한 설정을 실험하고 문서/예제에 대한 PR을 보낼 수 있습니다.

다음 8부터는 server.js에서 'next' 대신 'next-server'를 요구할 수 있으며 그렇게 하면 로컬 개발 중에만 핫 리로딩을 잃게 됩니다.

불행히도 이것은 작동하지 않습니다.

먼저 서버 대상으로 실행 중인 서버리스 빌드는 "대상이 서버가 아닐 때 서버를 시작할 수 없습니다. https://err.sh/zeit/next.js/next-start-serverless " 메시지와 함께 능동적으로 차단됩니다.

그런 다음 일반 빌드를 수행하기로 결정한 경우 빌드 파일은 next 패키지의 항목을 직접 참조합니다(예 next/router 서버 측 컴파일된 _app.js 파일의 next 및 webpack 어쨌든 프로덕션 빌드에 있어야 함을 의미합니다.

@ElvenMonky

다음 8부터는 server.js에서 'next' 대신 'next-server'를 요구할 수 있으며 그렇게 하면 로컬 개발 중에만 핫 리로딩을 잃게 됩니다.

다음은 여기에서 볼 수 있듯이 내부적으로 Babel 플러그인으로 수행하는 것입니다.
https://github.com/zeit/next.js/blob/709850154754278d2fc86b987eebe1b3f0565255/packages/next/build/babel/plugins/commonjs.ts#L5 -L32

@sheerun #7011에서도 언급했듯이 next-transpile-modules 플러그인을 사용하여 next 모듈을 트랜스파일하면 해결되지 않은 next/router 종속성을 제거할 수 있습니다.

솔루션을 설명하기 위해 사용자 지정 익스프레스 서버에 대한 예제를 분기하고 조정했습니다. https://github.com/ElvenMonky/next.js/tree/custom-next-server-express/examples/custom-server-express

추신: 내 애플리케이션이 동적 경로와 정적 콘텐츠 제공은 물론이고 TODO에 나열된 모든 항목이 필요하다는 사실에 상관없이 #5927에 대해 여전히 매우 흥분하고 있습니다.
좋은 소식은 위의 솔루션이 https://www.npmjs.com/package/next-serverless 사용자 지정 서버 설정과 잘 작동하여 앞서 언급한 제한 없이 예를 들어 AWS Lambda에 다음으로 배포할 수 있다는 것입니다.

다음 8부터는 server.js에서 'next' 대신 'next-server'를 요구할 수 있으며 그렇게 하면 로컬 개발 중에만 핫 리로딩을 잃게 됩니다.

이 조언을 사용했지만 불행히도 next 가 필요한 next/config 가 필요한 런타임 구성 을 사용할 수 없습니다.

이유는 모르겠지만 require('next/config') 는 다음 버전 8.0.3의 node_modules에 next 설치되지 않은 상태에서 프로덕션에서 작동했지만 다음 버전 8.1.0에서는 작동하지 않습니다.

다음/구성을 next-runtime-config 와 같은 다른 패키지로 이동할 수 있습니까?
또는 next-runtime-vars (next.config.js와 혼동을 피하기 위해 config라는 용어를 사용하지 않음).

허용되는 경우 알려주시면 PR을 작성하겠습니다.

안녕 모두들! 이 문제는 Next.js 8부터 구현되었으며 Next.js 9에서도 여전히 존재합니다. 완료되면 이 문제를 닫겠습니다. 😌

죄송합니다. 이 문제와 혼동했습니다: https://github.com/zeit/next.js/issues/7011
대상을 확인하지 않았습니다: "서버리스"

일부 "next/*" 는 다음과 같이 "next-server/*" 로 대체될 수 있습니다.

• 다음/구성 -> 다음 서버/구성
• 다음/amp -> 다음 서버/amp
• 다음/동적 -> 다음 서버/동적
• 다음/상수 -> 다음 서버/상수
• 다음/헤드 -> 다음 서버/헤드

그러나 이 문제의 OP에서 언급한 이러한 최적화에 대한 지원이 없는 몇 가지가 있습니다.

• 다음/라우터 -> 다음 서버/dist/lib/라우터/라우터(아마도)? (서버에서 사용하는 경우 비어 있거나 오류가 발생해야 함)
• 다음/링크 ?

서버(AKAIK)에서도 인라인되므로 필요하지 않습니다.

• 다음/앱
• 다음/문서
  

안녕 모두들! 이 문제는 Next.js 8부터 구현되었으며 Next.js 9에서도 여전히 존재합니다. 완료되면 이 문제를 닫겠습니다.

안녕하세요 @Timer - 당신은 servless 대상을 말하는 것입니까, 아니면 'next'를 'next-server'로 바꾸는 것입니까?

next를 다음 서버로 교체하면 packages.json 종속성도 업데이트되지 않는 한 node_modules 폴더 크기가 변경되지 않습니다.

사용 가능한 두 가지 접근 방식의 예가 있습니까? 서버리스 사용 사례는 AWS Lambda에 배포하는 것입니다.

초기 문제에 설명된 접근 방식은 serverless 대상으로 발전했으므로 이를 사용하는 것이 좋습니다.

@timneutkens serverless 대상은 동적 경로를 사용하는 사용자 지정 서버의 문제를 해결하지 않으며 해결할 수도 없습니다. #5927 동적으로 생성된 페이지, 자산 접두사, 사용자 지정 _app, _document 및 _err: 기본적으로 TODO 목록에 명시된 모든 것을 사용해야 하는 제 경우와 같이 실제 비즈니스 응용 프로그램에 대한 솔루션이 아닙니다.
next-server 는 webpack 및 babel과 같은 이상한 개발 전용 종속성 없이 프로덕션에 배포할 수 있는 부분 솔루션을 제공합니다. 그러나 이것은 우리가 여기에서 논의하는 몇 가지 핵과 woodoo 춤으로 수행할 수 있습니다.

나는 당신이 이 차이점을 이해하고 있다는 인상을 받았고 @rauchg 가 설명한 대로 초기 문제에 대해 언젠가 더 강력한 솔루션을 보기를 희망했습니다.