어제 test repo에 27번 시도 끝에 성공했다고 신난 나머지 프로젝트 레포에 그대로~ 복붙했다가 3시간 걸린 이야기..를 풀어보겠다.
이전 포스팅의 마지막 줄에 내가 써놓은 멘트에 내가 당했다..!
2023.11.11 - [Problem Drilling] - Github Actions 사용, Workflow 테스트 자동화 적용하기, pnpm
Github Actions 사용, Workflow 테스트 자동화 적용하기, pnpm
Github Action를 사용해서 테스트 자동화를 해보게 되었다. 우선 Github에 있는 node.js.yaml 템플릿으로 어찌저찌 구현하다가 pnpm 이라는 난관.. 그리고 working-directory 쪽에서도 헤맸고. 전혀 다른 곳에서
nami-socket.tistory.com
중요한 건, 나의 환경에 맞게 수정할 줄 알아야 한다는 것
열심히 찾아봤는데 아무도 궁금하지 않았던 것인지 아무도 말해주지 않은 것
✔️ Github Action 적용 전에 기존에 PR이 있다면 PR Event Trigger가 될까?
된다. 기존에 PR이 있어서 적용 안되는 줄 알고 브랜치를 따로 파서 적용했는데 똑같이 안됐음. 이벤트 대상 브랜치 적용에 오류가 있을 수 있다. (나의 case)
✔️ commit이 PR에 계속 남는데 reset, push -f 명령어로 이전기록 없애버리면 PR에도 삭제될까?
삭제 되긴하는데 비추합니다. 이전처럼 여러 개가 찍히진 않지만 force-pushed 키워드로 찍힌다. 세팅할 때 제대로 한다고 생각하고 log 찍혀도 두자.. 나처럼 어리석은 짓 말자!!!
Test 했던 .yml 파일
name: PR Test
on:
pull_request:
branches: [main]
jobs:
test:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [18]
steps:
- uses: actions/checkout@v3
- uses: pnpm/action-setup@v2
with:
version: 8
- name: Use Node.js 18
uses: actions/setup-node@v3
with:
node-version: 18
cache: "pnpm"
- name: Install dependencies
run: pnpm install
- name: Run tests
run: pnpm test
이때 적용한 폴더구조는 root에 node_modules, pnpm-lock.yml 파일이 있었다.
.
├── LICENSE
├── README.md
├── coverage
├── index.html
├── node_modules
├── package.json
├── pnpm-lock.yaml
├── src
│ ├── ClickCounter.js
│ ├── ClickCounterView.js
│ ├── __test__
│ │ ├── ClickCounter.test.js
│ │ ├── ClickCounterView.test.js
│ │ └── sum.test.js
│ ├── module.js
│ └── sum.js
└── vite.config.ts
프로젝트 폴더트리를 알아보자.
├── README.md
└── front
├── dist
├── index.html
├── node_modules
├── package.json
├── pnpm-lock.yaml
├── public
├── src
│ ├── App.css
│ ├── App.tsx
│ ├── __test__
│ │ └── sum.test.js
│ ├── assets
│ │ └── react.svg
│ ├── index.css
│ ├── main.tsx
│ ├── normalize.css
│ ├── sum.js
│ └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
front 폴더 속에 pnpm-lock.yaml 파일과 node_modules 폴더가 존재한다. ./github/workflows 폴더는 front 폴더와 나란히 존재한다. (.github 파일이라 숨겨져있어서 안보인다..!)
이제 내가 어떤 이슈들에 부딪혔는지 말해보겠다. 크게 보면 총 두 가지의 이슈가 있었다.
1️⃣ action 미생성 이슈
다른 test 레포에는 잘 떴는데 action이 인식되지 않은 이슈...!
Event Trigger가 되지 않았다는 것이다. on 에 브랜치 설정이 안되는 거 아닐까 했다.
# before (test 레포에는 main이었는데 프로젝트는 dev 브랜치를 main branch로 씀)
on:
pull_request:
branches: [dev]
# after
on:
pull_request:
branches:
- dev
node template은 ["dev"]로 설정되어 있다.
대괄호를 쓰려면 쌍따옴표를 넣어야 하고, 번거롭다면 - dev 형식으로 해보자.
2️⃣ Workflow Status : Failure 이슈
브랜치 설정을 해주자마자 다행히 Action 탭에 떴다. 하지만 처참히 실패!
# before
steps:
- uses: actions/checkout@v3
- name: Use Node.js 18
uses: actions/setup-node@v3
with:
node-version: 18
cache: "pnpm"
# after
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: 18
cache 부분이 삭제 되었다.
Error: Dependencies lock file is not found in /home/runner/work/frontend/frontend. Supported file patterns: pnpm-lock.yaml
떴던 오류를 보면, pnpm-lock.yml 파일을 못찾고 있다. 지정한 경로에 pnpm 세팅이 안되어있어서 그런 것으로 추정.
저 cache 부분은 dependency를 설정해주는 건데 다른 방법이 없을까 하고 pnpm/action-setup@v2 Action 레포를 들어가봤다.
(command 누르고 액션을 누르면 Open action in Github이 뜬다!)
GitHub - pnpm/action-setup: Install pnpm package manager
Install pnpm package manager. Contribute to pnpm/action-setup development by creating an account on GitHub.
github.com
# Use cache to reduce installation time 영역을 참고 할 수 있었다. 다른 케이스들도 찾아보니 pnpm cache는 step으로 따로 구현한게 많았다.
# pnpm/action-setup@v2 레포에 올려져있는 캐싱 방법
- name: Get pnpm store directory
shell: bash
run: |
echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ env.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
shell: bash 를 제거 하고 적용해보았는데 cache 설정 step은 바로 통과 되었다.
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: 18
- uses: pnpm/action-setup@v2
with:
version: 8
- name: Get pnpm store directory
run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ env.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
캐싱은 성공했다고 해도 또 실패가 떴다.
package.json 파일을 못찾고 있는 경고 메세지를 보고 폴더트리에 따라 수정해줘야함을 알게 되었다.
# before
- name: Install dependencies
run: pnpm install
- name: Run Tests
run: pnpm test
# after
- name: Install dependencies
run: |
cd front
pnpm install
- name: Run Tests
run: |
cd front
pnpm test
cd front가 중복되어서 dependencies step과 test step을 합치는 경우도 보았는데 step의 어느 부분에서 문제가 일어나는지를 알려면 최대한 분리해야된다고 생각하여 그대로 두었다.
Final .yml 파일
name: D-Scrumble
on:
push:
branches:
- dev
pull_request:
branches:
- dev
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: 18
- uses: pnpm/action-setup@v2
with:
version: 8
- name: Get pnpm store directory
run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ env.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: |
cd front
pnpm install
- name: Run Tests
run: |
cd front
pnpm test
🤦🏻 나같은 우여곡절을 겪지 않길 바라며, 정리해본다. pnpm 액션 세팅은 자료가 별로 없다.
Summary
🌟 Test 레포로 똑같은 환경에서 적용해보기
(귀찮겠지만 제일 확실한 방법일 것 같다. 아니면 PR로 만들어 놓고 나처럼.. 수많은 우여곡절을 기록하는 것도 나쁘지 않다.)
🌟 폴더 구조를 잘 생각해보자.
(node_modules. package.json, pnpm-lock.yml이 root에 없다면 해당 폴더로 접근해주어야 한다.)
🌟 Github Action Template은 참고만 하고 최대한 많은 케이스를 접해보고 적용해보아야 한다.
(추천 방법: action-setup 공식 레포에 직접 접근해본다.)
🌟 ChatGPT를 믿지 말자!
(고마울 때도 많지만 우여곡절을 더 유발할 수도 있는 도구..)
'Problem Drilling' 카테고리의 다른 글
| 브라우저에서 Excel 파일 다운로드하기: Blob과 CORS 해결과정 (0) | 2024.04.22 |
|---|---|
| Axios interceptors로 API Data 목적에 맞게 분류하기 (0) | 2024.03.03 |
| Github Actions 사용, Workflow 테스트 자동화 적용하기, pnpm (0) | 2023.11.11 |
| Open Source License 고르기, GPL? MIT? No License? (0) | 2023.11.10 |
| Vite config파일 수정해서 배포 디렉토리 상대 경로로 변경하기 (0) | 2023.10.29 |