From 34b400a44715832764a7d84da4b04398e65945ed Mon Sep 17 00:00:00 2001 From: hwinkr Date: Fri, 23 Aug 2024 09:20:46 +0900 Subject: [PATCH 1/3] =?UTF-8?q?chore:=20=ED=94=84=EB=A1=A0=ED=8A=B8?= =?UTF-8?q?=EC=97=94=EB=93=9C=20=EB=A6=AC=EC=86=8C=EC=8A=A4=20=EB=B9=8C?= =?UTF-8?q?=EB=93=9C=20dev,=20prod=20=EA=B5=AC=EB=B6=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/package.json b/frontend/package.json index 0f0723115..f1d85990f 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -6,7 +6,8 @@ "scripts": { "prod": "webpack server --open --config webpack.prod.js", "dev": "webpack server --open --config webpack.dev.js", - "build": "webpack --config webpack.prod.js && npm run sentry:sourcemaps", + "build:prod": "NODE_ENV=production webpack --config webpack.prod.js && npm run sentry:sourcemaps", + "build:dev": "NODE_ENV=development webpack --config webpack.dev.js", "sentry:sourcemaps": "sentry-cli sourcemaps inject ./dist && sentry-cli sourcemaps upload -o momo2024 -p momo-harry-test /dist", "lint:css": "stylelint '**/*.styles.ts' --fix", "test": "jest", From 26fe05856fdfc4dbe55fe8739bfc2ed2489e7281 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Fri, 23 Aug 2024 09:23:14 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EA=B8=B0=EC=A1=B4=20front-cd=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=A0=9C=EA=B1=B0=20&=20dev,=20prod=20?= =?UTF-8?q?=ED=99=98=EA=B2=BD=EC=9D=84=20=EA=B5=AC=EB=B6=84=ED=95=9C=20yml?= =?UTF-8?q?=20=ED=8C=8C=EC=9D=BC=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/frontend-dev-cd.yml | 92 +++++++++++++++++++ .../{frontend-cd.yml => frontend-prod-cd.yml} | 10 +- 2 files changed, 97 insertions(+), 5 deletions(-) create mode 100644 .github/workflows/frontend-dev-cd.yml rename .github/workflows/{frontend-cd.yml => frontend-prod-cd.yml} (91%) diff --git a/.github/workflows/frontend-dev-cd.yml b/.github/workflows/frontend-dev-cd.yml new file mode 100644 index 000000000..3172aa4da --- /dev/null +++ b/.github/workflows/frontend-dev-cd.yml @@ -0,0 +1,92 @@ +name: 모모 프론트엔드 배포 자동화 워크플로우 + +on: + push: + branches: ["develop"] + +permissions: + checks: write + +jobs: + detect-changes: + runs-on: ubuntu-latest + permissions: + pull-requests: read + outputs: + backend: ${{ steps.filter.outputs.backend }} + frontend: ${{ steps.filter.outputs.frontend }} + steps: + - uses: actions/checkout@v4 # Push 이벤트이기 때문에 checkout 해야 함 + with: + ref: develop + - uses: dorny/paths-filter@v3 + id: filter + with: + base: "develop" # 해당 브랜치의 last commit과 변경점 비교 + filters: | + backend: + - 'backend/**' + frontend: + - 'frontend/**' + + fe-build: + needs: detect-changes # jobs들은 병렬로 실행됨, needs 키워드를 사용해서 특정 job이 완료(성공)면 실행하도록 설정 + if: ${{ needs.detect-changes.outputs.frontend == 'true' }} + runs-on: ubuntu-latest + defaults: + run: + shell: bash + working-directory: ./frontend + + steps: + - name: 모모 레파지토리의 코드를 가져와요 :) + uses: actions/checkout@v4 + + - name: 노드 버젼을 설정해요 :) + uses: actions/setup-node@v4 + with: + node-version: "lts/*" + + - name: 이전 의존성을 저장해둔게 있나~? 확인해요 :) + id: cache + uses: actions/cache@v4 + with: + path: "frontend/node_modules" + key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} + restore-keys: | + ${{ runner.os }}-node- + ${{ runner.os }} + + - name: package-lock.json을 활용해서 의존성을 깨끗하게 설치해요 :) + if: steps.cache.outputs.cache-hit != 'true' + run: npm ci + + - name: .env 파일을 생성해요 :) + run: | + echo "${{ secrets.MOMO_FE_ENV_DEV }}" >> .env + + - name: 프론트엔드 리소스를 빌드해요 :) + run: npm run build:dev + + - name: 프론트엔드 리소스 결과물을 깃허브 레파지토리 artifacts로 업로드해요 + uses: actions/upload-artifact@v4 + with: + name: momoResources + path: frontend/dist + + deploy: + needs: fe-build + runs-on: [self-hosted, linux, ARM64, dev] + env: + CLOUDFRONT_DISTRIBUTION_ID_DEV: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID_DEV}} + steps: + - name: 모모 깃허브 레파지토리 artifacts로 부터 빌드 결과물을 다운받아요 :) + uses: actions/download-artifact@v4 + with: + name: momoResources + path: ./frontend/dist + - name: aws에 배포하고 cloudfront 캐싱을 무효화해요 + working-directory: ./frontend/dist/ + run: | + aws s3 sync ./ s3://techcourse-project-2024/momo-dev --delete + aws cloudfront create-invalidation --distribution-id "$CLOUDFRONT_DISTRIBUTION_ID_DEV" --paths "/*" diff --git a/.github/workflows/frontend-cd.yml b/.github/workflows/frontend-prod-cd.yml similarity index 91% rename from .github/workflows/frontend-cd.yml rename to .github/workflows/frontend-prod-cd.yml index 6ad2579a5..4b82786f7 100644 --- a/.github/workflows/frontend-cd.yml +++ b/.github/workflows/frontend-prod-cd.yml @@ -2,7 +2,7 @@ name: 모모 프론트엔드 배포 자동화 워크플로우 on: push: - branches: ["develop"] + tags: release-** permissions: checks: write @@ -63,10 +63,10 @@ jobs: - name: .env 파일을 생성해요 :) run: | - echo "${{ secrets.MOMO_FE_ENV }}" >> .env + echo "${{ secrets.MOMO_FE_ENV_PROD }}" >> .env - name: 프론트엔드 리소스를 빌드해요 :) - run: npm run build + run: npm run build:prod - name: 프론트엔드 리소스 결과물을 깃허브 레파지토리 artifacts로 업로드해요 uses: actions/upload-artifact@v4 @@ -78,7 +78,7 @@ jobs: needs: fe-build runs-on: [self-hosted, linux, ARM64, dev] env: - CLOUDFRONT_DISTRIBUTION_ID: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID}} + CLOUDFRONT_DISTRIBUTION_ID_PROD: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID_PROD}} steps: - name: 모모 깃허브 레파지토리 artifacts로 부터 빌드 결과물을 다운받아요 :) uses: actions/download-artifact@v4 @@ -89,4 +89,4 @@ jobs: working-directory: ./frontend/dist/ run: | aws s3 sync ./ s3://techcourse-project-2024/momo --delete - aws cloudfront create-invalidation --distribution-id "$CLOUDFRONT_DISTRIBUTION_ID" --paths "/*" + aws cloudfront create-invalidation --distribution-id "$CLOUDFRONT_DISTRIBUTION_ID_PROD" --paths "/*" From 16a87bd43ebc1382d4159907d88c70ea47444b2b Mon Sep 17 00:00:00 2001 From: hwinkr Date: Fri, 23 Aug 2024 09:56:32 +0900 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20workflow=20=EC=9D=B4=EB=A6=84=20?= =?UTF-8?q?=EC=88=98=EC=A0=95,=20prod-cd=20=ED=8C=8C=EC=9D=BC=20filter=20?= =?UTF-8?q?=EB=94=94=EB=A0=89=ED=84=B0=EB=A6=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/frontend-dev-cd.yml | 2 +- .github/workflows/frontend-prod-cd.yml | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/.github/workflows/frontend-dev-cd.yml b/.github/workflows/frontend-dev-cd.yml index 3172aa4da..c53b658b6 100644 --- a/.github/workflows/frontend-dev-cd.yml +++ b/.github/workflows/frontend-dev-cd.yml @@ -1,4 +1,4 @@ -name: 모모 프론트엔드 배포 자동화 워크플로우 +name: 모모 프론트엔드 배포 자동화 워크플로우(dev) on: push: diff --git a/.github/workflows/frontend-prod-cd.yml b/.github/workflows/frontend-prod-cd.yml index 4b82786f7..a33260307 100644 --- a/.github/workflows/frontend-prod-cd.yml +++ b/.github/workflows/frontend-prod-cd.yml @@ -1,6 +1,7 @@ -name: 모모 프론트엔드 배포 자동화 워크플로우 +name: 모모 프론트엔드 배포 자동화 워크플로우(prod) on: + workflow_dispatch: push: tags: release-** @@ -18,11 +19,11 @@ jobs: steps: - uses: actions/checkout@v4 # Push 이벤트이기 때문에 checkout 해야 함 with: - ref: develop + ref: main - uses: dorny/paths-filter@v3 id: filter with: - base: "develop" # 해당 브랜치의 last commit과 변경점 비교 + base: "main" # 해당 브랜치의 last commit과 변경점 비교 filters: | backend: - 'backend/**'