AWS - GitHub Actions_ react

목표
 front GitHub Action을 사용해 workflow 자동화
 
 참고 
 https://github.com/Kwak-Minju/FIRSTSTEP_FE_AWS.git
 https://kalswn.tistory.com/entry/AWS-CodeDeploy-Flask <= S3 버킷 생성 참조

 

#1 S3 버킷 생성

https://kalswn.tistory.com/entry/AWS-CodeDeploy-Flask 참조

AWS - CodeDeploy _ Flask

#2 GitHub Actions에서 사용할 사용자를 생성하고 권한을 부여

firststepGitActionUser

 

#3 GitHub 레포지터리에 Secrets를 추가

 

#4 GitHub Actions 워크플로우를 작성

 

name: Deploy to Amazon EC2

on:
  push:
    branches: [ "main" ]

env:
  AWS_REGION: ap-northeast-2
  S3_BUCKET_NAME: firststepbucket
  CODE_DEPLOY_APPLICATION_NAME: ReactApplication
  CODE_DEPLOY_DEPLOY_GROUP_NAME: ReactDeployGroup

permissions:
  contents: read

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

    - 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: ${{ env.AWS_REGION }}

    - name: Upload to AWS S3
      run: |
        aws deploy push \
          --application-name ${{ env.CODE_DEPLOY_APPLICATION_NAME }} \
          --s3-location s3://$S3_BUCKET_NAME/$GITHUB_SHA.zip \
          --ignore-hidden-files \
          --source .

    - name: Deploy to AWS EC2 from S3
      run: |
        aws deploy create-deployment \
          --application-name ${{ env.CODE_DEPLOY_APPLICATION_NAME }} \
          --deployment-config-name CodeDeployDefault.AllAtOnce \
          --deployment-group-name ${{ env.CODE_DEPLOY_DEPLOY_GROUP_NAME }} \
          --s3-location bucket=$S3_BUCKET_NAME,key=$GITHUB_SHA.zip,bundleType=zip

 

**ERROR

npm build 시 오류 

1.  Line 20:7: React Hook useEffect has a missing dependency: 'boardId'. Either include it or remove the dependency array react-hooks/exhaustive-deps

 

해결 // eslint-disable-next-line react-hooks/exhaustive-deps 추가

 useEffect(() => {
        axios.get(`${process.env.REACT_APP_SERVER_URL}/boardlist/${boardId}/commentlist`)
        .then(response => {
            setComments(response.data)
            console.log(response.data)
        }).catch(error => console.log(error));
        // eslint-disable-next-line react-hooks/exhaustive-deps <==  추가
    },[])

 

2. Line 10:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text

 

해결 웹 표준에 따라 img 태그는 alt를 작성 <img src = {image} alt = "face"/>

<img src={backgroundImg} alt = "face"/> 	<= 수정

 

3. Line 41:31: Expected '!==' and instead saw '!=' eqeqeq

 

해결 !=를 !== 로 수정

 

4. Line 1:10: 'useEffect' is defined but never used no-unused-vars

 

해결 사용하지 않는 모듈, 함수, 변수 등을 삭제

 

#5 GitHub Actions 확인