Razzle: Razzle 및 서버리스

누군가 방금 이것을 했고 그것에 대해 트윗했습니다. 멋진 예가 될 것입니다.

트윗을 찾을 수 없습니다! 당신은 그것을 가지고 있습니까?

내 짹짹이 - 방금 index.js (모든 핫로드가 발생하는 곳)를 다음으로 대체했습니다.

import awsServerlessExpress from 'aws-serverless-express'
import app from './server'
const binaryMimeTypes = [
  'application/octet-stream',
  'font/eot',
  'font/opentype',
  'font/otf',
  'image/jpeg',
  'image/png',
  'image/svg+xml',
]
const server = awsServerlessExpress.createServer(app, null, binaryMimeTypes)

export const handler = (event, context, callback) => {
  awsServerlessExpress.proxy(server, event, context)
}

그런 다음 npm run build 를 실행하고 node_modules/ 를 build/ 복사하고 node_modules/ 폴더와 함께 server.js 압축하여 AWS Lambda에 업로드합니다. public/ 모든 항목은 S3에 업로드되고 Cloudfront를 통해 전송됩니다.

Lambda -> API 게이트웨이 인프라의 경우 Terraform을 사용하고 이 가이드를 따랐습니다. https://www.terraform.io/docs/providers/aws/guides/serverless-with-aws-lambda-and-api-gateway.html

그래도 완벽하지는 않습니다. 클라이언트 측 번들(https://static.jobsok.io/)에서 로드 시 이 오류가 발생합니다.

업데이트:
나는 당신을 젠장하지 않습니다. node_modules를 삭제하고 다시 설치하면 다음과 같습니다.

File sizes after gzip:

  210.38 KB (+8 B)  build/static/js/bundle.1a960add.js
  1.96 KB           build/static/css/bundle.5865fae5.css

코드 변경 없이 - 클라이언트 측 번들이 다시 작동하도록 만들었습니다.

내 handler.js(또는 index.js)는 동일합니다.
그런 다음 webpack(project + node_modules)으로 모든 것을 빌드합니다. (이를 위해 razzle.config.js를 수정하면 됩니다.)

저는 Terraform이 아닌 서버리스로 작업하고 있습니다. 기본적으로 동일합니다. 핸들러에 대한 상대 패키지를 가져오기만 하면 됩니다(어떤 이유로 webpack은 이 패키지를 포장하지 않습니다. 아마도 다른 파일/경로에 있기 때문에 나중에 수정될 것입니다).

서버리스로 이 모든 것을 업로드하면 됩니다. 프로젝트는 https://github.com/CuistotduCoin/cuistot 에서 볼 수 있습니다.

완벽함과는 거리가 멀다.

그건 그렇고, @jaredpalmer , razzle/webpack 설정에 대해 저를 도와주시겠습니까?
최고의 성능으로 번들(node_modules 포함)에 필요한 모든 것을 포함하고 싶습니다. 예/팁이 있습니까? (Typescript 구성 사용)

@rozenmd razzle.config 를 공유할 수 있습니까?

@romainquellec 광산이 비어 있습니다 -

글쎄요, 이유는 모르겠지만 종속성에 정의된 aws-serverless-express에 액세스할 수 없습니다(더 많을 수도 있음).
그리고 이 모든 것을 최적화하기 위해 최종 빌드에서 aws-sdk를 제외하고 싶습니다(항상 람다 함수에서 사용할 수 있지만 나중에 볼 수 있음)

나는 그것이 외부에서 오는 것이라고 생각하지만 나는 그것을 알아낼 수 없습니다.

예, 나는 같은 문제가있었습니다. 내 유일한 해결책은 모든 node_modules로 server.js를 압축하는 것이 었습니다.

나는 람다에서 할 수 없습니다. 공식 제한 크기는 50mo입니다.
모두를 위한 일반적인 질문: node_modules를 razzle과 함께 좋은 성능으로 묶는 방법. 감사 해요 !

우리는 람다를 사용하지 않지만 razzle.config.js에서 기본 외부 옵션을 제거하여 모든 node_modules를 번들로 제공합니다. 이것은 빌드 폴더가 사실상 빌드 아티팩트임을 의미하기 때문에 멋지다. 그런 다음 s3에 넣은 다음 Jenkins 작업이 새 폴더를 각 서버로 가져오고 pm2를 다시 시작합니다.

@jaredpalmer - razzle.config.js 로 요점을 게시할 수 있는 기회가 있습니까?

razzle.config.js에서 기본 외부 옵션을 제거하여:

그렇게?
modify(config, { target, dev }) { if (target === 'node' && !dev) { config.externals = []; } return config; }

@romainquelec 작동합니다!!

module.exports = {
  modify: (config, { target, dev }, webpack) => {
    // do something to config
    const appConfig = config // stay immutable here

    if (target === 'node' && !dev) {
      appConfig.externals = []
    }

    return appConfig
  },
}

작동 중입니다. 좋은 ! 👍 👍
예를 추가하는 것이 좋습니다! 이번 주말에 살펴보겠습니다. @rozenmd에 참여

불행히도 이번 주말 @romainquellec에 자유 시간이 없지만 PR에 대해 검토/협력하게 되어 기쁩니다.

나는 이것을 닫는다. 가능한 한 빨리 PR을 제출할 것입니다.

@romainquellec 그 풀 리퀘스트를 해본 적이 있습니까? 여전히 서버리스 환경에서 Razzle 프로젝트를 실행하고 있습니까? 나는이 가능성을 탐구하기 시작했고이 스레드를 우연히 발견했습니다. :)

@mbrochh 결국 풀 리퀘스트를 보지 못했지만 저는 여전히 모든 서버리스 서버사이드 렌더링을 위해 https://onlineornot.com 에서 Razzle을 사용하고

나는 또한 이 블로그 게시물을 발견했습니다: https://medium.com/@RozenMD/build -your-own-app-with-react-graphql-and-serverless-architecture-part-1-server-side-rendering-f0d0144ff5f

나는 머리 우선으로 다이빙하고 그 게시물을 따라가려고 노력해야 할 것 같아요 :)

게시물에 감사드립니다!

https://maxrozen.com/2018/08/08/start-your-own-app-with-react-part-1 이 코드 형식 지정에 대한 더 나은 링크일 것입니다.

그리고 고마워! :웃다:

Razzle을 AWS 람다에 배포한 사람이 있습니까?

또한 AWS 람다에서 Razzle에 대한 예를 찾고 있습니다. 누군가가 그것을했고 우리와 공유하게된다면 정말 감사하겠습니다.

이것이 내가 AWS CDK를 사용 하여 AWS Lambda에 Razzle 앱을 배포한 방법입니다.

RazzleStack

import * as CDK from '@aws-cdk/core';
import * as S3 from '@aws-cdk/aws-s3';
import * as S3Deployment from '@aws-cdk/aws-s3-deployment';
import * as Lambda from '@aws-cdk/aws-lambda';
import * as APIGateway from '@aws-cdk/aws-apigateway';
import * as SSM from '@aws-cdk/aws-ssm';
import * as SecretsManager from '@aws-cdk/aws-secretsmanager';

import { ConfigProps, getParam, ModeStack } from '../helpers';

export class RazzleStack extends ModeStack {
  constructor(app: CDK.App, id: string, props: ConfigProps) {
    super(app, id, props);

    /**
     * S3 bucket to the /public folder
     */
    const publicBucketName = `my-razzle-app-bucket-public-files-${this.mode}`;
    const bucketPublicFiles = new S3.Bucket(this, publicBucketName, {
      publicReadAccess: true,
      bucketName: publicBucketName.toLowerCase(),
    });

    /**
     * Store S3 bucket name
     */
    new SSM.StringParameter(this, `MyRazzleAppBucketAssetsName${this.Mode}`, {
      description: `My Razzle App S3 Bucket Name for Assets on ${this.Mode}`,
      parameterName: `/${props.name}/S3/Assets/Name`,
      stringValue: bucketPublicFiles.bucketName,
    });

    /**
     * Store S3 domainName name
     */
    new SSM.StringParameter(this, `MyRazzleAppBucketAssetsDomainName${this.Mode}`, {
      description: `My Razzle App S3 Bucket DomainName for Assets on ${this.Mode}`,
      parameterName: `/${props.name}/S3/Assets/DomainName`,
      stringValue: bucketPublicFiles.bucketDomainName,
    });

    /**
     * Deploy public folder of build to `my-razzle-app-bucket-public-files-${this.mode}` bucket
     */
    new S3Deployment.BucketDeployment(this, `${publicBucketName}-deploy`, {
      sources: [S3Deployment.Source.asset('./build/public')],
      destinationBucket: bucketPublicFiles,
    });

    /**
     * Environment Variables for SSR Function
     */
    const environmentKeys = [
      'NODE_ENV',
      'RAZZLE_GRAPHQL_URL',
      'RAZZLE_MAPBOX_ACCESS_TOKEN',
      'RAZZLE_GOOGLE_RECAPTCHA_SITE',
      'RAZZLE_GA_ID',
    ];

    const environmentSecret = SecretsManager.Secret.fromSecretAttributes(
      this,
      `MyRazzleAppEnvironmentSecret${this.Mode}`,
      {
        secretArn: getParam(this, `MyRazzleAppSecretsArn${this.Mode}`),
      },
    );

    let environment: { [key: string]: string } = {};
    for (const key of environmentKeys) {
      environment[key] = environmentSecret.secretValueFromJson(key).toString();
    }

    /**
     * Razzle SSR Function
     */
    const myRazzleAppSsrFunction = new Lambda.Function(this, `MyRazzleAppSSRFunction${this.Mode}`, {
      description: `Lambda Function that runs My Razzle App SSR on ${this.Mode}`,
      code: Lambda.Code.fromAsset('./build', {
        exclude: ['public', 'static', '*.json'],
      }),
      handler: 'server.handler',
      runtime: Lambda.Runtime.NODEJS_12_X,
      memorySize: 512,
      timeout: CDK.Duration.seconds(5),
      environment,
      tracing: Lambda.Tracing.ACTIVE,
    });

    /**
     * Razzle ApiGateway
     */
    const razzleSsrApiGatewayName = `MyRazzleAppSSRApiGateway${this.Mode}`;
    const api = new APIGateway.RestApi(this, razzleSsrApiGatewayName, {
      description: `ApiGateway that exposes My Razzle App SSR on ${this.Mode}`,
      binaryMediaTypes: ['*/*'],
      endpointTypes: [APIGateway.EndpointType.REGIONAL],
      deployOptions: {
        stageName: this.mode,
      },
    });
    const integration = new APIGateway.LambdaIntegration(myRazzleAppSsrFunction);
    const root = api.root;
    const pathApi = api.root.addResource('{proxy+}');

    root.addMethod('GET', integration);
    pathApi.addMethod('ANY', integration);

    /**
     * Razzle ApiGateway ID
     */
    new SSM.StringParameter(this, `MyRazzleAppAPIGatewayRestId${this.Mode}`, {
      description: `My Razzle App ApiGateway ID on ${this.Mode}`,
      parameterName: `/${props.name}/APIGateway/ApiId`,
      stringValue: api.restApiId,
    });
  }
}

@jgcmarins의 razzletack 설정에 대해 설명합니다. 이것을 사용하는 방법을 단계별로 수행할 수 있습니까? razzle 문서에 추가하고 싶습니다.

https://razzle-git-canary.jared.vercel.app/deployment-options/aws

도움이 필요합니다. 누가 도와줄 수 있습니까?

@fivethreeo 는 단계별로 AWS 계정에서 CDK를 설정하고 몇 가지 추가 플래그로 cdk deploy 를 실행하는 것보다 라이브 \o/

https://razzle-git-canary.jared.vercel.app/deployment-options/aws 에서 누락된 것이 있습니까?
?

경로가 아닌 도메인으로 무대를 만들고 싶습니다. rds, 키 회전, TypeOrm, typegraphql, Formik 및 jwt를 사용하여 완전한 기능의 예를 만들 수 있지만 razzle 자체의 예는 아닙니다.

달리 빠진 것은 없습니다.