나는 개인적으로 클라이언트에서 process.env를 사용할 수 없는 것에 대해 너무 걱정하지 않을 것입니다. 우리는 이미 서버에서 '창'을 사용할 수 없다는 것을 알고 있어야 합니다. 나는 process.env가 반대 행동을 할 것이라는 것이 이해가 됩니다. (env를 가질 노드 프로세스가 없으며 브라우저는 내가 알고 있는 env 변수를 노출하지 않습니다.) 저는 process.env를 서버 비밀이 끝날 수 있는 장소라고 생각하므로 차라리 기본적으로 클라이언트 측에서는 사용할 수 없습니다.

나에게 달려 있다면 process.env.RAZZLE_INLINED_XXXXXX 변수는 빌드 중에 컴파일되고(클라이언트에서 인라인 DefinePlugin'd 문자열로 사용 가능) 다른 모든 변수는 서버 측에서만 사용할 수 있습니다.

NODE_ENV도 인라인될 수 있습니다. 대부분 빌드에 대한 설명으로 사용되며 코드가 실행되는 환경과 같은 변수가 아니기 때문입니다. 그렇게 해야 하는 몇 가지 성능상의 이유도 있습니다.

나는 PORT와 HOST가 런타임에 가변적이라는 아이디어를 좋아합니다. 다른 환경에서 동일한 빌드 아티팩트를 실행할 수 있습니다.

나는 투쟁을 확인할 수 있습니다. 현재 동작은 내가 예상한 것과 달랐고 특히 aws에서 up 배포할 때 걸려 넘어졌습니다. 이제 razzle.config.js 사용자 지정하여 모든 razzle 특정 변수에 RAZZLE_XXX 접두사가 붙고 컴파일 시간에 문자열화되도록 했습니다. 나머지는 process.env.XXX 에서 사용할 수 있습니다. 또한 process.env 통해 런타임 변수를 사용할 수 없다는 @gregmartyn의 의견에 동의합니다.

기존 React 프로젝트에서 Razzle을 설정하는 동안 이 문제에 직면했습니다. 포트는 런타임에 재정의할 수 없으며 다른 process.env 변수는 서버에서 사용할 수 없습니다.

빌드 시 현재 동작:

process.env.PORT
process.env.NODE_ENV;
process.env.ASSETS_MANIFEST;
process.env.HOSTING_SET_VARIABLE;

클라이언트와 서버 모두에 됩니다.

3000;
'development';
'/Users/[...]/build/assets.json';
undefined;

이렇게 하면 클라이언트와 서버가 정확히 동일한 프로세스 환경을 사용할 수 있지만 런타임에 재정의하거나 다른 환경 변수를 사용할 수 없습니다.

이전 버전과 완전히 호환되도록 하려면 빌드 시간에 다음으로 변환해야 합니다(서버에서 클라이언트는 동일하게 유지될 수 있음).

process.env.PORT || 3000;
process.env.NODE_ENV || 'development';
process.env.ASSETS_MANIFEST || '/Users/[...]/build/assets.json';
process.env.HOSTING_SET_VARIABLE;

이런 식으로 클라이언트와 서버 모두에서 process.env.PORT를 사용할 수 있습니다. 기본값은 3000입니다.

razzle 이 PORT=80 로 _built_ 인 경우 클라이언트는 process.env.PORT 를 80 로 변환하고 서버는 process.env.PORT || 80 합니다. 이렇게 하면 현재와 동일한 동작이 발생합니다.

화려한 함께 _run_ 경우 PORT=81 (내장형 동안 80 ), 클라이언트 환경 변수는 남아있을 것입니다 80 서버 변수가 발생합니다 동안 81 .

이 동작은 물론 예기치 않은 동작으로 이어질 수 있지만 완전한 역호환성을 유지하면서 가장 유연한 process.env 사용법을 제공합니다. 포트는 런타임에 서버에서 계속 덮어쓸 수 있으며 호스팅 플랫폼에서 설정한 다른 환경 변수는 서버에서 있는 그대로 작동합니다.

여기에서 근본적인 문제는 Razzle이 현재 여러 개의 서로 다른 기능을 하나의 개체로 묶고 기존 기능을 근본적으로 변경하려고 한다는 것입니다.

다음을 수행하려고 합니다.

1. 성능상의 이유로 process.env 변수를 상수로 바꿉니다(https://webpack.js.org/plugins/define-plugin/#usage의 축소 예제 및 https://github.com/nodejs/node/issues의 nodejs 속도 저하 참조). /3104)
2. 아이소메트릭 코드가 걱정할 필요가 없도록 이러한 상수를 서버와 클라이언트 모두에서 사용할 수 있도록 하십시오.

문제:

• process.env는 _variables_ 환경용입니다. 그것을 상수 세트로 바꾸면 예상되는 동작이 변경됩니다.
• process.env는 종종 암호를 포함한 민감한 정보를 포함하므로 클라이언트와 공유할 데이터의 좋은 소스가 아닙니다. 부분적으로 공유되고 부분적으로 공유되지 않는 경우 개발자는 이 한 가지(process.env)가 기본적으로 작동하지 않을 뿐만 아니라 키의 접두사에 따라 다른 동작을 한다는 것을 알아야 합니다.
• 환경 변수가 다른 컨텍스트에서 작동하는 방식과 다른 빌드 시 상수로 바뀌고 있습니다. 예를 들어 Docker는 빌드 시간 변수(빌드 자체에 실행 위치에 따라 변수 정보가 필요할 때 유용)와 환경 변수(사전 빌드된 이미지 하나가 다른 환경에 배포될 때 유용)를 구분합니다. Elastic Beanstalk, Heroku, et al. 똑같이 해.
• 제안된 "RAZZLE_RUNTIME_" 접두사는 자명하지 않습니다. 클라이언트 측에서 사용할 수 있고 변수가 아님을 전달해야 합니다. 인라인은 일반적으로 빌드 시 발생하는 것을 참조하는 데 사용되기 때문에 "INLINED_"가 이를 포함한다고 생각합니다. 완벽하지는 않지만("ISOMORPHIC_INLINED_"?) 짧기도 합니다.

내 선호 사항은 이 기능을 다른 부분으로 분할하고 process.env를 전혀 변경하지 않는 것입니다.
DefinePlugin은 razzle.config.js와 같은 파일을 호출하여 빌드 상수를 얻을 수 있습니다.
Redux가 configureStore(window.__PRELOADED_STATE__)를 사용하여 서버에서 클라이언트로 데이터를 전달하는 것과 유사한 패턴을 사용하는 것이 좋습니다.

이전 버전과의 호환성을 위해 업그레이드 노트는 구식 방식을 정의하는 샘플 razzle.config.js를 제공할 수 있습니다.

하나의 부록: 나는 "process.env를 전혀 변경하지 말라"고 말했습니다. 그러나 위의 내 의견에서 성능상의 이유로 process.env.NODE_ENV에 예외가 있다는 것을 알 수 있었고 "NODE_ENV" 자체는 일반적으로 "NODE_ENV = 생산은 이것이 최적화된 빌드임을 의미합니다"의 의미를 취했습니다.

@gregmartyn 성능 최적화를 위해 NODE_ENV를 설정하고 현재 작동하는 babel 사전 설정을 사용해야 합니다. 환경을 엉망으로 만든 나의 초기 추론은 프로젝트가 이미 시작된 후에 SSR이 추가되는 경우가 많기 때문에 CRA에서 훨씬 쉽게 이동할 수 있도록 하는 것이었습니다. 우리는 또한 다른 프로젝트에서 CRA를 사용하여 빌드 도구를 (약간) 단순화합니다.

응; NODE_ENV가 유용한 예외라는 데 동의했습니다. 그것은 그 자체의 것이고 빌드와 밀접하게 연결되어 있으므로 놀라운 일이 아닙니다. 사용자 지정 SSR 솔루션에서 CRA를 바로 건너뛰었으므로 CRA가 어떻게 작동하는지 잘 모르겠습니다. 이것도 문제인 것 같습니다: https://github.com/facebook/create-react-app/issues/2353

CRA 앱의 런타임 코드가 서버에서 전혀 실행되지 않기 때문에 이것이 CRA보다 Razzle에게 더 큰 문제라고 생각합니다. CRA는 process.env를 사용하여 원하는 모든 작업을 수행할 수 있습니다. 클라이언트 측 코드에 관한 한 CRA는 그렇지 않으면 비어 있기 때문입니다. 반면에 Razzle은 SSR에 대해 express를 시작하고 해당 코드는 process.env가 노드 런타임 환경 변수의 전체 세트에 액세스할 수 있는 일반적인 의미 체계를 가질 것으로 합리적으로 예상합니다. Process.env는 서버에서 실제 의미가 있으므로 CRA가 다른 사용 사례에 대해 이를 채택한 것은 유감입니다. "cra.inlines"와 같은 "process.env" 대신 다른 이름을 사용할 수 있습니다. 대신, 동형 코드는 클라이언트 측만 고려할 때 내린 결정에 영향을 받습니다.

RAZZLE_XXX 환경 변수가 모두 클라이언트에서 사용 가능하게 된 모든 곳에서 빨간색으로 표시되어야 합니다.

민감한 환경 변수를 클라이언트에 전송하지 않고 어떻게 사용합니까?

동형 코드에서 참조하지 않으면 클라이언트로 전송되지 않습니다.

@jaredpalmer 아마도이 문제는 afterjs에만 해당됩니까? 나는 서버 코드에서만 그것들을 참조하고 있습니다.

RAZZLE 접두사 없이 환경 변수를 정의하는 기능에 대한 투표를 추가하고 싶습니다. 최소한 process.env 는 서버 측에서 지워져서는 안 됩니다. 그러면 dotenv 와 같은 것을 사용하여 서버 측 환경 변수를 로드할 수 없습니다. 이것은 응용 프로그램 환경에 대한 가정을 너무 방해하는 것처럼 보입니다.

나는 현재 razzle이 클라이언트와 서버에 환경 변수를 어떻게 주입하는지에 대해 확실히 알지 못하지만, 확실히 당신은 클라이언트에서 서버에 특정한 것들을 원하지 않을 것입니다. 불행히도 이것은 지금 나에게 일종의 거래 차단기입니다.

https://github.com/jaredpalmer/razzle/issues/477#issuecomment -363538712에서 동형 반응 앱에 대해 제안된 솔루션을 다시 게시하고 있습니다.

주요 개념은 런타임 환경 변수를 적절하게 설정하기 위해 서버 실행 직전에 런타임에 주입되는 컴파일 타임에 플레이스홀더를 사용하는 것입니다. 이 솔루션은 도커 컨테이너에서 서버를 실행하기 위한 것이지만 이 RFC에 맞게 조정될 수 있습니다.

이 솔루션에서 RAZZLE_XXXX 환경 변수가 일치하고 HOST, PORT 및 REDIS_URL과 함께 주입됩니다.

저는 개인적으로 이 문제로 어려움을 겪었고 이 문제에 대한 해결책을 찾는 데 몇 시간을 보냈습니다.

이것은 webpack 컴파일에 내재되어 있으며 razzle it 자체와 관련이 없습니다.

create-react-app이 이를 처리하는 방법을 살펴보고 두 프로젝트에 걸쳐 일부 자바스크립트 및 루비 코드를 이식한 후 다음 솔루션을 사용하여 heroku의 도커 컨테이너에 razzle typescript 반응 앱을 성공적으로 배포했습니다.

환경

이 스크립트는 런타임 환경을 처리하는 모듈로 사용됩니다.

export interface EnvironmentStore {
  NODE_ENV?: string;
  [key: string]: string | undefined;
}

// Capture environment as module variable to allow testing.
let compileTimeEnv: EnvironmentStore;
try {
  compileTimeEnv = process.env as EnvironmentStore;
} catch (error) {
  compileTimeEnv = {};
  // tslint:disable-next-line no-console
  console.log(
    '`process.env` is not defined. ' +
    'Compile-time environment will be empty.'
  );
}

// This template tag should be rendered/replaced with the environment in production.
// Padded to 4KB so that the data can be inserted without offsetting character
// indexes of the bundle (avoids breaking source maps).
/* tslint:disable:max-line-length */
const runtimeEnv = '{{RAZZLE_VARS_AS_BASE64_JSON__________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________}}';
/* tslint:enable:max-line-length */

// A function returning the runtime environment, so that
// JSON parsing & errors occur at runtime instead of load time.
export const loadRuntimeEnv = (): EnvironmentStore => {
  let env;
  if (typeof env === 'undefined') {
    if (compileTimeEnv.NODE_ENV === 'production') {
      try {
        env = JSON.parse((Buffer.from(runtimeEnv.trim(), 'base64').toString()));
      } catch (error) {
        env = {};
        const overflowsMessage = runtimeEnv.slice(32, 33) !== null;
        // tslint:disable-next-line no-console
        console.error(
          'Runtime env vars cannot be parsed. Content is `%s`',
          runtimeEnv.slice(0, 31) + (overflowsMessage ? '…' : '')
        );
      }

    } else {
      env = compileTimeEnv;
    }
  }
  return env;
};

export default loadRuntimeEnv;

용법:

import { loadRuntimeEnv, EnvironmentStore } from './env';
const env: EnvironmentStore = loadRuntimeEnv();

const serverHost: string =env.RAZZLE_SERVER_HOST || 'localhost';

docker-start.js

이 스크립트는 server.js 대신 진입점으로 사용되며 실제 런타임 환경 변수로 {{RAZZLE_VARS_AS_BASE64_JSON___... }} 자리 표시자를 삽입하는 데 사용됩니다.

require('newrelic');
const logger = require('heroku-logger');
const path = require('path');
const fs = require('fs');

const PLACEHOLDER = /\{\{RAZZLE_VARS_AS_BASE64_JSON_*?\}\}/;
const MATCHER = /^RAZZLE_/i;

const InjectableEnv = {

    inject: function(file, ...args) {

        const buffer = fs.readFileSync(file, { encoding: 'utf-8' });
        let injectee = buffer.toString();

        const matches = injectee.match(PLACEHOLDER);
        if (!matches) {
            return;
        }

        const placeholderSize = matches[0].length;

        let env = InjectableEnv.create(args);
        const envSize = env.length;
        const newPadding = placeholderSize - envSize;
        if (newPadding < 0) {
            console.log('You need to increase your placeholder size');
            process.exit();
        }
        const padding = Array(newPadding).join(' ');
        env = InjectableEnv.pad(padding, env);

        const injected = injectee.replace(PLACEHOLDER, env);

        fs.writeFileSync(file, injected, { encoding: 'utf-8' });
    },

    create: function() {

        const vars = Object.keys(process.env)
            .filter(key => MATCHER.test(key))
            .reduce((env, key) => {
                env[key] = process.env[key];
                return env;
            }, {});

        vars.NODE_ENV = process.env.NODE_ENV;

        if (typeof process.env.HOST !== 'undefined' && typeof vars.RAZZLE_SERVER_HOST === 'undefined') {
          vars.RAZZLE_SERVER_HOST = process.env.HOST;
        }

        if (typeof process.env.PORT !== 'undefined' && typeof vars.RAZZLE_SERVER_PORT === 'undefined') {
          vars.RAZZLE_SERVER_PORT = process.env.PORT;
        }

        if (typeof process.env.REDIS_URL !== 'undefined' && typeof vars.RAZZLE_REDIS_URL === 'undefined') {
          vars.RAZZLE_REDIS_URL = process.env.REDIS_URL;
        }

        return Buffer.from(JSON.stringify(vars)).toString('base64');
    },

    pad: function(pad, str, padLeft) {
        if (typeof str === 'undefined')
            return pad;
        if (padLeft) {
            return (pad + str).slice(-pad.length);
        } else {
            return (str + pad).substring(0, pad.length);
        }
    }
}

const root = process.cwd();
const serverBundle = path.resolve(path.join(root, '/build/server.js'));

if (fs.existsSync(serverBundle)) {
    logger.info('Injecting runtime env');
    InjectableEnv.inject(serverBundle);
    logger.info('Launching server instance');
    require(serverBundle);
}

도커파일

# You should always specify a full version here to ensure all of your developers
# are running the same version of Node.
FROM node:8.9.4

ENV NODE_ENV=production \
    REACT_BUNDLE_PATH=/static/js/vendor.js \
    PATH=/app/node_modules/.bin:$PATH \
    NPM_CONFIG_LOGLEVEL=warn

RUN curl -o- -L https://yarnpkg.com/install.sh | bash

# use changes to package.json to force Docker not to use the cache
# when we change our application's nodejs dependencies:
COPY package.json yarn.lock /tmp/
RUN cd /tmp \
  && yarn install --production=false --pure-lockfile \
  && mkdir -p /app \
  && cp -a /tmp/node_modules /app \
  && yarn cache clean \
  && rm -rf *.*

# From here we load our application's code in, therefore the previous docker
# "layer" thats been cached will be used if possible
WORKDIR /app
ADD . /app

RUN yarn build

EXPOSE 3000

CMD ["node", "docker-start.js"]

오버플로 메시지 처리가 완료되지 않은 점 양해 부탁드리며, 도움이 되셨으면 합니다.

참조:

create-react-app용 Heroku Buildpack
create-react-app용 Heroku Buildpack의 내부 레이어

이것은 webpack 컴파일에 내재되어 있으며 razzle it 자체와 관련이 없습니다.

Razzle은 DefinePlugin을 설정하는 것입니다. 이것은 Razzle에서 해결할 수 있습니다.

나는 당신이 말하는 것을 따른다고 생각합니다. 내가 잘못 이해했는지 알려주세요. 빌드 시 서버 빌드에서 인스턴스 시작 시 문자열을 교체하는 자리 표시자를 process.env에 넣습니다. 서버 비밀을 처리하기 위한 것입니다. (클라이언트 빌드에서도 실행되지 않는 이유는 모르겠습니다.) 문제: HMR에서는 작동하지 않습니다. 해킹입니다. 임의의 4k 경계를 도입합니다. 현재 형식에서는 클라이언트와 공유해야 하는 환경 변수를 다루지 않으며 빌드 시간 상수로 남아 있습니다. 컨테이너에 대한 추가 시작 단계입니다.

내가 https://github.com/jaredpalmer/razzle/issues/528#issuecomment -377058844에서 말한 많은 부분을 다시 설명하려면

해결 방법은 Razzle과 CRA가 필요한 것보다 더 많은 기능을 process.env에 담으려 한다는 사실을 인식하는 것이라고 생각합니다. Docker와 함께 작동하도록 하기 위해 정적(빌드 시간) 및 동적(여기서는 컨테이너 시작 시간), 비밀 및 비비밀의 4가지 가능한 상태 중 하나를 갖는 필드가 있는 하나의 개체를 사용하려고 합니다. 우리는 4가지 상태(process.env.STATIC_PRIVATE_X, process.env.DYNAMIC_PUBLIC_Y, ...) 모두에 대한 접두사를 생각해낼 수 있지만 더 깨끗한 솔루션을 사용하는 것이 훨씬 더 낫다고 생각합니다.

process.env가 기본적으로 서버 비밀 저장소로 작동하는 방식으로 작동한다면 상황을 훨씬 더 쉽게 이해할 수 있습니다. 한 가지 예외가 있습니다. NODE_ENV는 빌드 타임 인라인이지만 빌드의 속성이기 때문에 괜찮습니다. 런타임에 NODE_ENV를 설정하는 것은 의미가 없습니다.

이제 클라이언트에 데이터를 가져오는 방법만 남았습니다. 이것이 process.env를 사용하는 이유를 전혀 모르겠습니다. 정적 항목에 예를 들어 razzle.build.X를 사용하고 redux와 같은 방식으로 동적 항목을 클라이언트에 전달하지 않는 이유는 무엇입니까?

Node에서 process.env가 느린 또 다른 문제가 있지만 process.env를 한 번 읽는 캐시 계층으로 해결하는 것이 가장 좋습니다.

@gregmartyn 나는 이것이 해킹이라는 데 동의합니다 ... 그리고 그것은 임의의 4K 경계를 도입합니다. 이 아이디어는 현재 CRA로 수행된 작업(게시된 참조 참조)을 기반으로 하며 서버 측 런타임 환경 변수를 위한 것입니다.

이 문제의 근본 원인을 해결하는 데 도움이 될 것으로 생각 되는 PR 을

또한 PORT & HOST 도 이상적으로는 서버 컴파일 시간에 혼자 남겨지는 것에 동의합니다.

@tgrisser 좋아요 ! 그것은 큰 개선입니다.
PORT 및 HOST 외에도 컴파일해서는 안되는 변수 목록에 PUBLIC_PATH 를 추가합니다.

민감한 사용자 지정 환경 변수가 모두 클라이언트로 컴파일되고 있음을 여전히 발견했습니다. 나는 server.js 에서만 그것들을 참조하고 있습니다. razzle 은

안녕하세요 여러분, 저는 이번 주에 직장에서 이 모든 문제를 해결하고 있습니다. 계속 지켜봐 주세요. #611이 병합될 가능성이 있습니다.

config.js를 사용하여 추가 정보의 새 가이드를 따르면 번들에서 민감한 환경 변수를 제거하는 것과 관련하여 저에게 효과적이었습니다. 대단하다 :D

v2 노트 보기

@jaredpalmer 내가 놓친 것이 있을 수 있지만 readme 문서가 의미하는 바에도 불구하고 이것은 여전히 ​​PORT와 같은 문제에 대한 문제입니다. process.env.MY_THING 는 잘 작동하지만 process.env.PORT 는 여전히 빌드 시 대체되며 런타임 시 읽지 않습니다. 따라서 Heroku 예제는 실제로 작동하지 않습니다.

이 스레드에서 논의된 PORT, HOST 등의 특별한 처리는 보지 못했습니다.

PORT를 실제 변수로 만드는 것도 #581에 의해 차단됩니다. 나는 그것을 패치하고 작동시키기 위해 PORT를 제거하는 DefinePlugin 배열을 생성하는 razzle.config.js를 사용해야 합니다. (하지만 작동합니다!)

런타임에 .env 변수를 사용하려는 사람이 있다면 이 작은 패키지를 사용하세요.
https://www.npmjs.com/package/razzle-plugin-runtimeenv

누군가 Azure에 Razzle 앱을 배포하는 방법을 조언해 주시겠습니까? 정말 힘들어요.

런타임에 .env 변수를 사용하려는 사람이 있다면 이 작은 패키지를 사용하세요.
https://www.npmjs.com/package/razzle-plugin-runtimeenv

어떻게 작동합니까? 예를 보여 주시겠습니까?

환경 변수는 실제로 런타임에 주입되어야 한다고 생각합니다. razzle 앱을 컨테이너화하면 실행되는 환경과 독립적으로 이미지를 만들고 서버를 시작할 때 환경 변수를 읽고 클라이언트 앱에 제공하고 싶습니다.

다른 접근 방식은 빌드 시간에만 발생하기 때문에 실제로 환경 변수를 사용하지 않습니다.

내가 여기에서 언급했듯이 :
https://github.com/HamidTanhaei/razzle-plugin-runtime/issues/1#issuecomment -525731273

razzle-plugin-runtime 런타임에서 .env 및 .env.development 파일을 사용할 수 있습니다. 런타임에 앱에서 환경 변수를 사용하는 기능을 추가합니다.

예를 들어 axios 구성에 사용하고 있습니다.
axios.defaults.baseURL = ${process.env.RAZZLE_APP_API_BASE_PATH}${process.env.RAZZLE_APP_API_VERSION} ;
다음과 같이 생산을 위한 생산 ENV 변수를 제공할 수 있습니다.
https://github.com/jaredpalmer/razzle#adding -temporary-environment-variables-in-your-shell

누군가 Azure에 Razzle 앱을 배포하는 방법을 조언해 주시겠습니까? 정말 힘들어요.

https://github.com/jaredpalmer/razzle/issues/906#issuecomment -467046269에서 @fabianisher 가 공유한 솔루션을 사용하여 Azure 포트 문제를 해결했습니다.