[T2] Frontend 배포 시 AWS CodeDeploy에서 NPM이 정상적으로 동작하지 않습니다.

[choi3179]

Issue

• T2-Papillon/front-vue#93
• Github action으로 AWS CodeDeploy는 정상적으로 동작합니다.
• appspec.yml로 지정한 start.sh로 npm 동작 시 발생하는 오류입니다.
• dist 디렉토리의 소유자가 root:root로 생성되고 정적 파일도 정상적으로 생성되지 않는 문제
• 그럼으로써 nginx 도커 컨테이너에 dist 디렉토리를 volume으로 잡을 수 없는 문제

4/6까지 확인한 내용

• EC2 인스턴스에 npm을 설치 후 bash 쉘이 npm 경로를 잡지 못 하는 경우는 아니었습니다.
• 셔뱅(#!로 시작하는 라인으로 스크립트의 맨 앞에서 이 파일이 어떤 명령어 해석기의 명령어 집합인지를 시스템에 알려주는 역할) 문제도 아니었음

#!/usr/bin/env bash

cd /home/ubuntu/app/papplan

# 터미널 로그 확인
# set -x

# vue 프로젝트 빌드
/home/ubuntu/.nvm/versions/node/v20.11.0/bin/npm install
/home/ubuntu/.nvm/versions/node/v20.11.0/bin/npm run build

# 생성된 빌드 파일의 소유자 변경
# sudo chown -R ubuntu:ubuntu dist

# public 디렉토리의 권한 변경
# sudo chmod -R +w public

sudo docker compose -f docker-compose.yml up -d --build --force-recreate

• EC2 내부에서 수동으로 쉘 스크립트를 실행했을 경우 정상적으로 빌드가 되는 것으로 보아 appspec.yml로 스크립트를 실행했을 경우에 npm 관련 모든 동작이 안되는 것으로 예상됩니다.

[pySatellite]

아래를 참고하여 npm build 를 docker 안에서 수행 후 결과물을 그 안에서 복사하여 사용하는 방법도 고려해보세요. ec2 에 npm 을 설치할 필요가 없으니 좋을거 같아요.

https://v2.ko.vuejs.org/v2/cookbook/dockerize-vuejs-app.html#Real-World-Example

[choi3179]

아래를 참고하여 npm build 를 docker 안에서 수행 후 결과물을 그 안에서 복사하여 사용하는 방법도 고려해보세요. ec2 에 npm 을 설치할 필요가 없으니 좋을거 같아요.

https://v2.ko.vuejs.org/v2/cookbook/dockerize-vuejs-app.html#Real-World-Example

• 관련 방법도 테스트해 보았으나 npm이 똑같이 동작하지 않았습니다.

[choi3179]

해결방법

• npm 명령을 workflow에서 실행

.github/workflows/action.dev.yml 수정

name: Deploy2aws 🚀

on:
    push:
        branches:
            - dev
    pull_request:
        types:
            - closed

jobs:
    deploy:
        environment: dev
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v3

            # node 버전 세팅 - local 버전과 일치 
            - name: Set up Node.js
              uses: actions/setup-node@v3
              with:
                  node-version: '20.11.0'
  
            # 환경 변수 파일 생성 - Github secrets로 히든 처리
            - name: Create .env.production file
              run: |
                  echo "VITE_APP_TITLE=production" > .env.production && \
                  echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" >> .env.production

            - name: Install dependencies
              run: npm install

            # npm 빌드
            - name: Build Vue project
              run: npm run build

            # AWS 인증 (IAM 사용자 Access Key, Secret Key 활용)
            - name: Configure AWS credentials
              uses: aws-actions/configure-aws-credentials@v1
              with:
                  aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
                  aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
                  aws-region: ${{ vars.AWS_REGION }}

            # 빌드 결과물을 S3 버킷에 업로드
            - name: Upload to AWS S3
              run: |
                  aws deploy push \
                    --application-name ${{ vars.CODE_DEPLOY_APP_NAME }} \
                    --ignore-hidden-files \
                    --s3-location s3://${{ vars.S3_BUCKET_NAME }}/$GITHUB_SHA.zip \
                    --source .

            # S3 버킷에 있는 파일을 대상으로 CodeDeploy 실행
            - name: Deploy to AWS EC2 from S3
              run: |
                  aws deploy create-deployment \
                    --application-name ${{ vars.CODE_DEPLOY_APP_NAME }} \
                    --deployment-config-name CodeDeployDefault.AllAtOnce \
                    --deployment-group-name ${{ vars.CODE_DEPLOY_DEPLOYMENT_GROUP_NAME }} \
                    --s3-location bucket=${{ vars.S3_BUCKET_NAME }},key=$GITHUB_SHA.zip,bundleType=zip

• npm 관련 동작을 workflow로 이동 후 생성된 정적파일과 환경 변수 파일을 한번에 EC2에 배포
• dist 디렉토리 소유자 ubuntu:ubuntu 확인
  
• 배포 정상 테스트 완료

[pySatellite]

깔끔하게 엑션을 사용해서 빌드까지 하는법을 찾아 주셨네요. 귀감이 되는 질답이므로 바로 닫지 않고 발효 시켰다 클로즈 할께요. 감사합니다.