Feat/test11

.github/workflows/cd-feat.yaml

@@ -1,4 +1,4 @@
-name: Manage S3 Buckets for Feature Branch PRs
+name: feature 브랜치 전용 S3 버킷 상태 관리
 
 on:
   pull_request:
@@ -33,29 +33,60 @@ jobs:
           aws-region: ap-northeast-2
 
       - name: Determine S3 bucket name with branch name
-        id: extract-bucket-name
+        id: generate-bucket-name
         env:
           FEATURE_BRANCH: ${{ github.head_ref }}
         run: |
-          # feat/ 이후의 문자열만 추출
-          BUCKET_NAME=$(echo $FEATURE_BRANCH | sed 's|^feat/||')
-          echo "Bucket name determined: $BUCKET_NAME" # For debugging
-          echo "bucket=$BUCKET_NAME" >> $GITHUB_ENV
+          # feat/ 이후의 문자열만 추출, empty string일 경우 exit
+          BUCKET_NAME=$(echo "${{ github.head_ref }}" | 
+            sed -e 's/feat\///' |  # feat/ 접두사 제거
+            tr '[:upper:]' '[:lower:]' |  # 대문자를 소문자로 변환
+            sed -e 's/[^a-z0-9-]/-/g' |  # 허용되지 않는 문자를 대시로 대체
+            sed -e 's/^-*//; s/-*$//' |  # 시작과 끝의 대시 제거
+            cut -c1-50)  # 최대 길이 제한
 
-      - name: Handle Build Deployment and S3 Buckets
+          echo "bucket-name=zipline-fe-$BUCKET_NAME" >> $GITHUB_OUTPUT
+
+      - name: Manage S3 Buckets
         env:
-          S3_BUCKET: zipline-fe-${{ env.bucket }}
+          S3_BUCKET: ${{ steps.generate-bucket-name.outputs.bucket-name }}
         run: |
-          if [ "${{ github.event.action }}" = "opened" ] || [ "${{ github.event.action }}" = "reopened" ]; then
-            echo "Deploying and creating S3 bucket: $S3_BUCKET"
+          if [[ "${{ github.event.action }}" == "opened" || "${{ github.event.action }}" == "reopened" || "${{ github.event.action }}" == "synchronize" ]]; then
+            echo "Set S3 bucket config: $S3_BUCKET"
+            if ! aws s3api head-bucket --bucket $S3_BUCKET 2>/dev/null; then
             aws s3api create-bucket --bucket $S3_BUCKET --region ap-northeast-2 --create-bucket-configuration LocationConstraint=ap-northeast-2
+
+            aws s3api delete-public-access-block --bucket $S3_BUCKET
+
+            aws s3api put-bucket-policy --bucket $S3_BUCKET --policy '{
+              "Version": "2012-10-17",
+              "Statement": [
+                {
+                  "Effect": "Allow",
+                  "Principal": "*",
+                  "Action": "s3:GetObject",
+                  "Resource": "arn:aws:s3:::'$S3_BUCKET'/*"
+                }
+              ]
+            }'
+
+            aws s3 website s3://$S3_BUCKET --index-document index.html --error-document index.html
+          fi
+
             aws s3 sync ./dist s3://$S3_BUCKET/ --delete
-          elif [ "${{ github.event.action }}" = "synchronize" ]; then
-            echo "Sync local job and S3 bucket: $S3_BUCKET"
-            aws s3 sync ./dist s3://$S3_BUCKET/ --delete
+
           elif [ "${{ github.event.action }}" = "closed" ] && [ "${{ github.event.pull_request.merged }}" = "true" ]; then
             echo "Deleting S3 bucket: $S3_BUCKET"
+            aws s3 rm s3://$S3_BUCKET --recursive
             aws s3 rb s3://$S3_BUCKET --force
           else
             echo "No action needed"
           fi
+
+  reusable_cd:
+    needs: cd-feat
+    if: github.event.action == 'opened'
+    uses: ./.github/workflows/preview-comment.yaml
+    with:
+      bucket_name: $S3_BUCKET
+      pr_number: ${{ github.event.pull_request.number }}"

.github/workflows/cd.yaml

@@ -1,4 +1,4 @@
-name: Build and Upload to S3
+name: 빌드 및 S3 업로드
 
 on:
   push:

.github/workflows/delete-feat-bucket.yaml

@@ -1,4 +1,4 @@
-name: Delete S3 Buckets for Merged Branch
+name: 작업 완료된 feature 브랜치의 S3 버킷 삭제
 
 on:
   pull_request:

.github/workflows/preview-comment.yaml

@@ -0,0 +1,24 @@
+name: PR에 Feature 브랜치 주소 코멘트 추가
+
+on:
+  workflow_call:
+    inputs:
+      bucket_name:
+        required: true
+        type: string
+      pr_number:
+        required: true
+        type: number
+
+jobs:
+  comment:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: comment PR
+        uses: thollander/actions-comment-pull-request@v3
+        with:
+          message: "🍐 배포 주소: ${{ inputs.bucket_name }}.s3-website.ap-northeast-2.amazonaws.com/"
+          pr-number: ${{ inputs.bucket_name}}

src/App.css

@@ -3,6 +3,7 @@
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
+  background: aqua;
 }
 
 .logo {