Skip to content

[Hosting] amplify env "dev", "prod" 환경에 따른 배포 스크립트 구성하기

Jump to bottom
TaeSeong Park edited this page Sep 18, 2020 · 4 revisions

amplify의 환경을 dev만 사용하다가 prod를 추가를 해서 그에 맞게 배포를 하려다 보니 amplify 배포 스크립트가 말썽이다.

frontend/kendra-button-front/amplfypush.sh

#!/usr/bin/env bash
set -e
IFS='|'
help_output () {
    echo "usage: amplify-push <--environment|-e <name>> <--simple|-s>"
    echo "  --environment  The name of the Amplify environment to use"
    echo "  --simple  Optional simple flag auto-includes stack info from env cache"
    exit 1
}

init_env () {
    ENV=$1
    AMPLIFY=$2
    PROVIDERS=$3
    CODEGEN=$4
    AWSCONFIG=$5
    CATEGORIES=$6
    echo "# Start initializing Amplify environment: ${ENV}"
    if [[ -z ${STACKINFO} ]];
    then
        echo "# Initializing new Amplify environment: ${ENV} (amplify init)"
        amplify init --amplify ${AMPLIFY} --providers ${PROVIDERS} --codegen ${CODEGEN} --categories ${CATEGORIES} --yes;
        echo "# Environment ${ENV} details:"
        amplify env get --name ${ENV}
    else
        echo "STACKINFO="${STACKINFO}
        echo "# Importing Amplify environment: ${ENV} (amplify env import)"
        amplify env import --name ${ENV} --config "${STACKINFO}" --awsInfo ${AWSCONFIG} --categories ${CATEGORIES} --yes;
        echo "# Initializing existing Amplify environment: ${ENV} (amplify init)"
        amplify init --amplify ${AMPLIFY} --providers ${PROVIDERS} --codegen ${CODEGEN} --categories ${CATEGORIES} --yes;
        echo "# Environment ${ENV} details:"
        amplify env get --name ${ENV}
    fi
    echo "# Done initializing Amplify environment: ${ENV}"
}

ENV=""
IS_SIMPLE=false
POSITIONAL=()
while [[ $# -gt 0 ]]
do
    key="$1"
    case ${key} in
        -e|--environment)
            ENV=$2
            shift
            ;;
        -r|--region)
            REGION=$2
            shift
            ;;
        -s|--simple)
            IS_SIMPLE=true
            shift
            ;;
        *)
            POSITIONAL+=("$1")
            shift
            ;;
    esac
done

set -- "${POSITIONAL[@]}"

# if no provided environment name, use default env variable, then user override
if [[ ${ENV} = "" ]];
then
    ENV=${AWS_BRANCH}
fi
if [[ ${USER_BRANCH} != "" ]];
then
    ENV=${USER_BRANCH}
fi

# Check valid environment name
if [[ -z ${ENV} || "${ENV}" =~ [^a-zA-Z0-9\-]+ ]] ; then help_output ; fi

AWSCONFIG="{\
\"configLevel\":\"project\",\
\"useProfile\":true,\
\"profileName\":\"default\"\
}"

AMPLIFY="{\
\"envName\":\"${ENV}\"\
}"

PROVIDERS="{\
\"awscloudformation\":${AWSCONFIG}\
}"

CODEGEN="{\
\"generateCode\":false,\
\"generateDocs\":false\
}"

AUTHCONFIG="{\
\"facebookAppIdUserPool\":\"${FACEBOOK_APP_ID}\",\
\"facebookAppSecretUserPool\":\"${FACEBOOK_APP_SECRET}\"\
\"googleAppIdUserPool\":\"${GOOGLE_CLIENT_ID}\",\
\"googleAppSecretUserPool\":\"${GOOGLE_CLIENT_SECRET}\"\
}"

CATEGORIES="{\
\"auth\":$AUTHCONFIG\
}"

# Handle old or new config file based on simple flag
if [[ ${IS_SIMPLE} ]];
then
    echo "# Getting Amplify CLI Cloud-Formation stack info from environment cache"
    export STACKINFO="$(envCache --get stackInfo)"
    init_env ${ENV} ${AMPLIFY} ${PROVIDERS} ${CODEGEN} ${AWSCONFIG} ${CATEGORIES}
    echo "# Store Amplify CLI Cloud-Formation stack info in environment cache"
    STACKINFO="$(amplify env get --json --name ${ENV})"
    envCache --set stackInfo ${STACKINFO}
    echo "STACKINFO="${STACKINFO}
else
    # old config file, above steps performed outside of this script
    init_env ${ENV} ${AMPLIFY} ${PROVIDERS} ${CODEGEN} ${AWSCONFIG} ${CATEGORIES}
fi

amplify.yml

version: 1
backend:
  phases:
    build:
      commands:
        - cd frontend/kendra-button-front
        - chmod +x amplfypush.sh
        - ./amplfypush.sh -e prod

amplfypush.sh 파일의 -e (environment) 를 prod로 했는데, amplify build에서는 dev의 CloudFormation Stack의 리소스 정보를 받아온다.

# Executing command: ./amplfypush.sh -e prod
2020-09-17T14:08:44.115Z [INFO]: # Getting Amplify CLI Cloud-Formation stack info from environment cache
2020-09-17T14:08:44.148Z [INFO]: # Start initializing Amplify environment: prod
2020-09-17T14:08:44.149Z [INFO]: STACKINFO={
                                 "awscloudformation": {
                                 "AuthRoleName": "amplify-kendrabuttonhosting-dev-213422-authRole",
                                 "UnauthRoleArn": "arn:aws:iam::213888382832:role/amplify-kendrabuttonhosting-dev-213422-unauthRole",
                                 "AuthRoleArn": "arn:aws:iam::213888382832:role/amplify-kendrabuttonhosting-dev-213422-authRole",
                                 "Region": "us-west-2",
                                 "DeploymentBucketName": "amplify-kendrabuttonhosting-dev-213422-deployment",
                                 "UnauthRoleName": "amplify-kendrabuttonhosting-dev-213422-unauthRole",
                                 "StackName": "amplify-kendrabuttonhosting-dev-213422",
                                 "StackId": "arn:aws:cloudformation:us-west-2:213888382832:stack/amplify-kendrabuttonhosting-dev-213422/e2d50750-abdf-11ea-9c3d-0a0a0dac92f4",
                                 "AmplifyAppId": "dcj1fh5deo5r3"
                                 },

원래 AWS 문서의 Deploying the Backend with Your Front End 를 참고해서 amplifyPush 스크립트를 사용하려고 했는데 에러가 계속 발생했었다.

그래서 찾았던 게 amplify-console github issue에 떠돌던 amplifypush 스크립트 내용을 긁어다가 직접 amplfypush.sh 파일을 만들어 그 안에 넣어서 빌드 이미지에서 실행을 시키는 방식으로 배포를 잘 해왔었다.

그런데 지금 긁어왔다는 스크립트 내용을 보니 지금까지 내가 써 왔던 스크립트 내용과 조금 달랐다. 정확한 출처를 잊어버린듯 하다;

현재 amplify-console 리포에 있는 amplifyPush.sh 내용을 다시 확인 해 보니 swaminator가 공유한 쉘스크립트와 동일해서 이번엔 로컬에서 내가 만든 파일을 활용하지 않고 amplifyPush 스크립트를 다시활용 해 보기로 한다

version: 1
backend:
  phases:
    build:
      commands:
        - cd frontend/kendra-button-front
        - amplifyPush -e prod
        # - chmod +x amplfypush.sh
        # - ./amplfypush.sh -e prod
...

이제 아래 에러가 나온다

auth headless is missing the following inputParams facebookAppIdUserPool, facebookAppSecretUserPool, googleAppIdUserPool, googleAppSecretUserPool
2020-09-18T13:18:00.265Z [INFO]: Error: auth headless is missing the following inputParams facebookAppIdUserPool, facebookAppSecretUserPool, googleAppIdUserPool, googleAppSecretUserPool

이 부분은 내가 이전에 겪었던 문제로써, 자체적으로 해결한 사례를 Wiki 문서: [Hosting] Amplify CLI 4.24.0 버전에 나오는 빌드에러 해결하기에 공유했었다.

해당 wiki문서에 링크 해 둔 aws-amplify github issue 에서 해결책이 나온 듯 하다.

  • Amplify 콘솔에서 아래 환경 변수 이름에 소셜 정보를 채워넣어 보도록 한다.
Configure build settings: Expand the Environment variables section to add the following environment variables (You would need to add only the variables corresponding to the social platforms you have configured during the Auth CLI setup):
AMPLIFY_FACEBOOK_CLIENT_ID
AMPLIFY_FACEBOOK_CLIENT_SECRET
AMPLIFY_GOOGLE_CLIENT_ID
AMPLIFY_GOOGLE_CLIENT_SECRET
AMPLIFY_AMAZON_CLIENT_ID
AMPLIFY_AMAZON_CLIENT_SECRET

이제 소셜 환경변수 정보 가져오는 문제는 해결됐다..

그치만 여전히 dev CloudFormation stack의 정보를 받아온다..

amplify-console의 이슈 검색을 해보다가 해결법을 공유한 스레드가 있어서 보고 amplify.yml에다가 아래 내용을 넣었다.

envCache --set stackInfo ""

그리고 amplifyPush 스크립트 최신 내용을 커스텀 쉘스크립트파일인 frontend/kendra-button-front/amplifypush.sh 에 업데이트했다.

드디어 빌드에 성공했다..

Clone this wiki locally