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/ कॉपी करते हैं, server.js को node_modules/ फ़ोल्डर के साथ ज़िप करते हैं, और इसे AWS लैम्ब्डा में अपलोड करते हैं। public/ में सब कुछ फिर S3 पर अपलोड हो जाता है और Cloudfront के माध्यम से भेजा जाता है।

लैम्ब्डा के लिए -> एपीआई गेटवे इंफ्रास्ट्रक्चर मैंने टेराफॉर्म का इस्तेमाल किया और इस गाइड का पालन किया: https://www.terraform.io/docs/providers/aws/guides/serverless-with-aws-lambda-and-api-gateway.html

हालांकि अभी भी सही नहीं है - क्लाइंट-साइड बंडल (https://static.jobsok.io/) से लोड पर यह त्रुटि प्राप्त करना:

अद्यतन:
मैंने आपको नहीं छोड़ा, नोड_मॉड्यूल्स को हटाना और पुनः स्थापित करना मुझे दिया:

File sizes after gzip:

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

बिना किसी कोड परिवर्तन के - क्लाइंट-साइड बंडल को फिर से कार्यात्मक बना दिया

मेरा हैंडलर.जेएस (या इंडेक्स.जेएस) वही है।
फिर, मैं वेबपैक (प्रोजेक्ट + नोड_मॉड्यूल) के साथ सब कुछ बनाता हूं। (इसके लिए आपको केवल razzle.config.js को संशोधित करना होगा)

मैं सर्वर रहित काम कर रहा हूं, टेराफॉर्म नहीं। मूल रूप से वही। बस हैंडलर के लिए सापेक्ष पैकेज आयात करने की आवश्यकता है (किसी कारण से, वेबपैक इसे पैक नहीं करता है, हो सकता है कि यह किसी भिन्न फ़ाइल/पथ पर हो, बाद में ठीक हो जाएगा)।

सर्वर रहित यह सब अपलोड करें, और बस। आप इस परियोजना को यहां देख सकते हैं: https://github.com/CuistotduCoin/cuistot

यह एकदम सही, और पोंछने से बहुत दूर है।

वैसे, @jaredpalmer , क्या आप मुझे वेबपैक कॉन्फिगरेशन में मदद कर सकते हैं?
मैं सर्वश्रेष्ठ प्रदर्शन के साथ बंडल, (नोड_मॉड्यूल शामिल) पर आवश्यक सभी चीजों को शामिल करना चाहता हूं। कोई उदाहरण/सुझाव? (टाइपप्रति विन्यास के साथ)

@rozenmd क्या आप अपना razzle.config साझा कर सकते हैं?

@romainquellec मेरा खाली है -

खैर, मुझे नहीं पता क्यों, लेकिन मैं निर्भरताओं (शायद अधिक) में परिभाषित aws-serverless-express तक पहुंच नहीं सकता।
और उन सभी को अनुकूलित करने के लिए, मैं अंतिम निर्माण से एडब्ल्यूएस-एसडीके को बाहर करना चाहता हूं (यह हमेशा लैम्ब्डा फ़ंक्शन में उपलब्ध होता है, बाद में इसे देखेगा)

मुझे लगता है कि यह बाहरी से आ रहा है, लेकिन मैं इसका पता नहीं लगा सकता।

हाँ, मेरे पास एक ही मुद्दा था। मेरा एकमात्र समाधान सभी नोड_मॉड्यूल के साथ सर्वर.जेएस को ज़िप करना था

मैं लैम्ब्डा पर नहीं कर सकता। आधिकारिक सीमा आकार 50mo है।
सभी के लिए सामान्य प्रश्न: नोड_मॉड्यूल्स को रैज़ल के साथ अच्छे परफ़ के साथ कैसे बंडल करें। धन्यवाद !

हम लैम्ब्डा का उपयोग नहीं करते हैं, लेकिन हम razzle.config.js में डिफ़ॉल्ट बाहरी विकल्प को हटाकर अपने सभी नोड_मॉड्यूल को बंडल करते हैं। यह अच्छा है क्योंकि इसका मतलब है कि बिल्ड फ़ोल्डर प्रभावी रूप से एक बिल्ड आर्टिफैक्ट है। फिर हम इसे s3 पर डालते हैं, फिर हमारा जेनकिंस कार्य प्रत्येक सर्वर पर नया फ़ोल्डर खींचता है और pm2 को पुनरारंभ करता है।

@jaredpalmer - किसी भी मौके पर आप उस razzle.config.js साथ एक सार पोस्ट कर सकते हैं?

razzle.config.js में डिफ़ॉल्ट बाहरी विकल्प को हटाकर:

उस तरह ?
modify(config, { target, dev }) { if (target === 'node' && !dev) { config.externals = []; } return config; }

@romainquellec जो काम करता है !!

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 लेकिन

मैं इसे बंद कर रहा हूं। जल्द से जल्द पीआर प्रस्तुत करेंगे।

@romainquellec क्या आप कभी भी उस पुल अनुरोध को करने के आसपास

@mbrochh ने अंत में पुल अनुरोध नहीं देखा, लेकिन मैं अभी भी अपने सभी सर्वर रहित सर्वरसाइड प्रतिपादन के लिए https://onlineornot.com पर रैज़ल का उपयोग कर रहा हूं।

मुझे यह ब्लॉग पोस्ट भी मिली: 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 कोड स्वरूपण के लिए शायद एक बेहतर लिंक है।

और धन्यवाद! :मुस्कुराओ:

क्या किसी ने रैज़ल को एडब्ल्यूएस लैम्ब्डा में तैनात किया है?

मैं एडब्ल्यूएस लैम्ब्डा पर रैज़ल के लिए एक उदाहरण भी ढूंढ रहा हूं। अगर किसी ने इसे किया है और हमारे साथ साझा करने में खुशी हुई है, तो वास्तव में सराहना करेंगे।

इस प्रकार मैं एडब्ल्यूएस सीडीके के साथ

रैज़लस्टैक

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 उस रैज़लेटैक सेटअप के बारे में। क्या आप इसका उपयोग करने के लिए चरण-दर-चरण कर सकते हैं? मैं इसे रेज़ल डॉक्स में जोड़ना चाहूंगा।

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

मुझे इस पर कुछ मदद चाहिए, क्या कोई मुझे हाथ दे सकता है?

@fivethreeo कदम दर कदम CDK को AWS खाते में सेटअप करना होगा और कुछ अतिरिक्त झंडे के साथ cdk deploy चलाना होगा और यह लाइव है \o/

क्या https://razzle-git-canary.jared.vercel.app/deployment-options/aws से कुछ और गायब है
?

मैं एक पथ के बजाय एक डोमेन के साथ मंच करना चाहूंगा। हो सकता है कि rds, key रोटेशन, TypeOrm, typegraphql, Formik और jwt के साथ एक पूर्ण विशेषताओं वाला उदाहरण बनाएं, लेकिन उदाहरण के रूप में स्वयं razzle में नहीं।

अन्यथा कुछ भी गुम नहीं है।