Vercel의 각도 범용 ENV 변수

그래서 이 Angular Universal 기사를 모두 작성한 후 웹 사이트Fireblog.io를 Cloud Run에서 Vercel로 옮겼습니다.

Cloud Run VS AWS 람다

콜드 스타트 ​​시간이 1/4로 단축되었습니다. 빌드 시간이 15분에서 3분으로 단축되었습니다. 물론 저는 Google Cloud Run에 마력을 추가하지 않았고 한 달에 총 7달러를 호스팅에 씁니다. 나는 Vercel이 더 많은 전력을 사용하는 기본 옵션을 사용했습니다. 내 모든 기사가 여기에 교차 게시되기 때문에 내 웹 사이트가 그다지 인기가 없다는 것을 인정합니다. ☹️

많은 기사를 읽은 후 AWS Lambda는 Docker 및 Cloud Run보다 빠릅니다. 이것은 나에게 매우 중요했습니다. Google은 경쟁하기 위해 Cloud Functions 개발에 더 많은 비용을 투자해야 합니다. 그러나 Cloud Run은 스트리밍 데이터를 위한 웹 소켓과 같은 것을 지원하지만 AWS Lambda는 그러한 것을 지원하지 않는다는 점에 주목할 가치가 있습니다. 이는 데이터베이스 또는 미들웨어를 호스팅하는 경우 중요합니다.

그래서 마지막으로 해야 할 일은 Vercel에서 올바르게 작동하도록 ENV 변수를 구성하는 것이었습니다.

중포 기지

이 예에서는 Firebase 환경 변수를 사용하고 json 파일에 저장합니다. 내 기사에서 그것에 대해 읽을 수 있습니다.

기본적으로 firebase 정보를 environment.json에 넣고 environment.ts로 가져옵니다.

서버에서 Vercel의 프로젝트로 이동하고 json 키로 새 변수FIREBASE를 추가합니다.

process.env

Vercel HATE Angular의 개발자. Angular는 열등한 것이 아니라 다를 뿐입니다. ENV 변수를 사용하기 위한 탭Angular도 없습니다. 방법에 대해 알고 있지만 Angular Universal을 지원하지 않습니다. 나는 그들이 작성된 플러그인을 원한다고 생각합니다. 당신은 필요하지 않지만 나는 빗나갑니다. 아마도 누군가가 하나를 쓸 수 있습니다. 지연 로딩 모듈과 같은 고급 기능을 자체 서버리스 기능 등에 자동화하는 데 필요할 수 있습니다.

따라서 서버에서는 process.env를 사용할 수 있지만 위에 나열된 이유 때문에 브라우저에서는 사용할 수 없다는 점에 유의해야 합니다.

에서 했던 것처럼 env 변수를 파일에 추가하는 방법echo이 있을 수 있지만 클래식 스크립트 버전을 사용했습니다.

빌드 파일

set-env.js

function setEnv() {
  fs = require("fs");
  writeFile = fs.writeFile;
  // Configure Angular `environment.prod.json` file path
  targetPath = "/vercel/path1/src/environments/environment.prod.json";
  targetPath2 = "/vercel/path2/src/environments/environment.prod.json";

  // `environment.prod.json` file structure
  envConfigFile = process.env.FIREBASE;

  console.log(
    "The file `environment.prod.json` will be written with the following content: \n"
  );
  writeFile(targetPath, envConfigFile, function (err) {
    if (err) {
      console.error(err);
      throw err;
    } else {
      console.log(
        "Angular environment.prod.json file generated correctly at" +
          targetPath +
          "\n"
      );
    }
  });
  writeFile(targetPath2, envConfigFile, function (err) {
    if (err) {
      console.error(err);
      throw err;
    } else {
      console.log(
        "Angular environment.prod.json file generated correctly at" +
          targetPath +
          "\n"
      );
    }
  });
}

setEnv();

환경 폴더에 이 파일을 만듭니다. 두 개의 json 파일 복사본을 빌드해야 합니다. 하나는 서버용이고 다른 하나는 브라우저용입니다.

내 지침에 따라 scripts.config를 추가하고 scripts.vercel-build를 업데이트하십시오.

"config": "node src/environments/set-env.js",
"vercel-build": "npm run config && npm run build:ssr"

완료.

이제 서버와 브라우저 모두에서 env 변수를 채우기 위해 빌드할 때 스크립트가 실행됩니다. 서버에 있는 변수만 원하는 경우 간단하게 process.env.FIREBASE를 확인하여 가져올 수 있습니다. 문제는 개발 환경입니다.

이것이 누군가를 돕기를 바랍니다.

제이