Vue.js 및 Amplify로 환경별 매개변수를 구성하는 방법

AWS에서 실행되는 API와 인터페이스해야 하는 새로운 Vue.js 프로젝트를 시작할 때 다음 코드 줄을 갖게 될 가능성이 큽니다.

import Amplify from 'aws-amplify'

Amplify.configure({
  Auth: {
    region: 'us-east-1',
    userPoolId: 'xxx',
    userPoolWebClientId: 'xxx',
    mandatorySignIn: true
  }
})

이 몇 줄의 코드를 사용하면 aws-amplify 라이브러리를 사용하여 Cognito 사용자 풀에 대해 사용자를 인증하고 등록, 로그인, 로그아웃, 잊어버린 암호 및 암호 변경과 같은 일반적인 흐름을 지원할 수 있습니다.

그러나 dev , test , staging 및 production 등 다양한 환경에서 Vue.js 프로젝트를 제공할 때 이러한 설정을 변경해야 합니다.

따라서 하드코딩하는 대신 환경 변수를 통해 주입해야 합니다. 다행스럽게도 Vue.js는 기본적으로 .env 파일의 사용을 지원합니다. 그러나 오늘 몇 시간 동안 저를 짓밟았던 주의 사항은 이러한 환경 변수에 VUE_APP_ 접두어를 붙여야 한다는 것입니다.

이것은 docs에 언급되었지만 찾고 있는 것을 알지 못하면 찾기가 쉽지 않았습니다.

Note that only NODE_ENV, BASE_URL, and variables that start with VUE_APP_ will be statically embedded into the 
client bundle with webpack.DefinePlugin. It is to avoid accidentally exposing a private key on the machine that 
could have the same name.

따라서 코드를 다음과 같이 변경합니다.

import Amplify from 'aws-amplify'

Amplify.configure({
  Auth: {
    region: process.env.VUE_APP_REGION,
    userPoolId: process.env.VUE_APP_USER_POOL_ID,
    userPoolWebClientId: process.env.VUE_APP_CLIENT_ID,
    mandatorySignIn: true
  }
})

그리고 AWS Amplify 서비스를 사용하여 이 Vue.js 애플리케이션을 배포한다고 가정하면 Amplify 콘솔에서 이를 환경 변수로 구성해야 합니다.



빌드 프로세스 중에 파일을 .env 파일로 가져옵니다. 다시 말하지만 .env 파일의 환경 변수에는 VUE_APP_ 접두사가 있어야 합니다.

따라서 amplify.yml 파일에서 build 단계 직전의 npm run build 단계에 다음 줄을 추가합니다.

- echo "VUE_APP_REGION=$REGION" >> .env 
- echo "VUE_APP_USER_POOL_ID=$COGNITO_USER_POOL_ID" >> .env 
- echo "VUE_APP_CLIENT_ID=$COGNITO_CLIENT_ID" >> .env

귀하의 amplify.yml은 아마도 다음과 같을 것입니다.

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - echo "VUE_APP_REGION=$REGION" >> .env 
        - echo "VUE_APP_USER_POOL_ID=$COGNITO_USER_POOL_ID" >> .env 
        - echo "VUE_APP_CLIENT_ID=$COGNITO_CLIENT_ID" >> .env 
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

이제 Amplify가 빌드하고 배포할 때 앱에 번들로 제공됩니다.


안녕하세요, 제 이름은 Yan Cui입니다. 저는 AWS Serverless Hero이고 팀을 서버리스로 빠르게 전환하고 AWS에서 프로덕션 준비 서비스를 구축하는 일을 전문으로 합니다.

서버리스로 어려움을 겪고 있거나 모범 사례에 대한 지침이 필요하십니까? 누군가가 아키텍처를 검토하고 비용이 많이 드는 실수를 피하도록 도와주기를 원하십니까? 어떤 경우이든 저는 도와드리겠습니다.

Email 및 을(를) 통해 저에게 연락할 수 있습니다.

Hire me.

게시물 How to configure environment specific parameters with Vue.js and Amplify이 theburningmonk.com에 처음 나타났습니다.