Cypress에서 CloudBuild에서 e2e를 실행하는 방법
CI/CD
Github Actions
를 사용하는 경우가 많지만 GCPCloud Build
를 사용하는 방법Cypress
을 미리 적어 두겠습니다.이번 성과 창고: Hisann/nuxt-lint-tsms:ESlint, TypeScript, Mock Service Worker(mw)에 있는 모크 서버를 사용한 창고입니다.
Cloud SDK 설치
압축 파일을 다운로드하고sh 파일을 실행합니다.
$ ./google-cloud-sdk/install.sh
$ ./google-cloud-sdk/bin/gcloud init
샘플 코드 실행
Google Cloud Platform
$ git clone https://github.com/GoogleCloudBuild/cloud-console-sample-build && \
cd cloud-console-sample-build && \
gcloud builds submit --config cloudbuild.yaml
로컬 프로젝트 설정
$ gcloud auth list
$ gcloud config set project プロジェクト名(aliasではない)
$ gcloud config configurations list
gcloud를 통한 프로젝트 전환 설정 - Qita 처음에는 아무것도 하지 않고
gcloud builds submit
해보려고 했는데 잘못으로 전진하지 못했어요.브라우저의 GCP 화면에서 프로젝트를 만들고 이름을 지정하면
$ gcloud builds submit --config cloudbuild.yaml
하면 순조롭다.이 기세를 몰아 이번에 사용한nuxt의 창고hisasann/nuxt-lint-ts-msw로 실행해 보자
$ gcloud builds submit --config ./cloudbuild/lint_and_test.yaml
엘리팅 노어 볼륨 만들기
이런 착오가 생겼다.
Step #1: Oops! Something went wrong! :(
Step #1:
Step #1: ESLint: 7.32.0
Step #1:
Step #1: Error: Cannot read .eslintignore file: /workspace/.gitignore
Step #1: Error: ENOENT: no such file or directory, open '/workspace/.gitignore'
Step #1: at Object.openSync (fs.js:497:3)
Step #1: at Object.readFileSync (fs.js:393:35)
Step #1: at readFile (/workspace/node_modules/@eslint/eslintrc/lib/config-array-factory.js:142:15)
Step #1: at loadESLintIgnoreFile (/workspace/node_modules/@eslint/eslintrc/lib/config-array-factory.js:270:16)
Step #1: at ConfigArrayFactory.loadESLintIgnore (/workspace/node_modules/@eslint/eslintrc/lib/config-array-factory.js:559:32)
Step #1: at createCLIConfigArray (/workspace/node_modules/@eslint/eslintrc/lib/cascading-config-array-factory.js:165:34)
Step #1: at new CascadingConfigArrayFactory (/workspace/node_modules/@eslint/eslintrc/lib/cascading-config-array-factory.js:243:29)
Step #1: at new CLIEngine (/workspace/node_modules/eslint/lib/cli-engine/cli-engine.js:569:36)
Step #1: at new ESLint (/workspace/node_modules/eslint/lib/eslint/eslint.js:432:27)
Step #1: at Object.execute (/workspace/node_modules/eslint/lib/cli.js:292:24)
Step #1: npm ERR! code ELIFECYCLE
Step #1: npm ERR! errno 2
Step #1: npm ERR! [email protected] lint:js: `eslint --ext .js,.ts,.vue --ignore-path .gitignore .`
Step #1: npm ERR! Exit status 2
S
.esliting nore의 설정 장소는 역시 주의하는 것이 좋다. - Qita eslint --ext .js,.ts,.vue --ignore-path .gitignore .
이 일대를 읽고 하지 마세요.esliting nore를 구성해 보십시오.평소에 잘 몰랐는데
--ignore-path .gitignore
eslint가 파일을 가로로 먹는 게 좋지 않겠지.$ gcloud builds submit --config ./cloudbuild/lint_and_test.yaml
오류가 제거되었습니다!cloudbuild.처음부터 yaml을 했으면 좋겠어요.
Cloud Build에서 yaml 파일이
.gitignore
가 아닌 지정自動検出
이라면 경로 지정이 Invalid Argument인 것 같습니다.특히 이곳의 안 좋은 내용은 전혀 틀리지 않아 빠져들었다.
그래서
/cloudbuild
이름을 다시 지었어요.이렇게 되자 빌딩이 달아났다.
Node.애플리케이션 구축 | Cloud Build 문서 | Google Cloud
Server 시작 시 e2e 명령 실행
bahmutov/start-server-and-test: Starts server, waits for URL, then runs test command; when the tests end, shuts down server
나는 이것이 자주 있는 수요라고 생각하지만 e2e의 경우
cypress:run 실패
> [email protected] cypress:run /workspace
> cypress run
It looks like this is your first time using Cypress: 8.4.1
[STARTED] Task without title.
[FAILED] Your system is missing the dependency: Xvfb
[FAILED]
[FAILED] Install Xvfb and run Cypress again.
[FAILED]
[FAILED] Read our documentation on dependencies for more information:
[FAILED]
[FAILED] https://on.cypress.io/required-dependencies
[FAILED]
[FAILED] If you are using Docker, we provide containers with all required dependencies installed.
[FAILED]
[FAILED] ----------
[FAILED]
[FAILED] Error: spawn Xvfb ENOENT
[FAILED]
[FAILED] ----------
[FAILED]
[FAILED] Platform: linux (Debian - 9.13)
[FAILED] Cypress Version: 8.4.1
Your system is missing the dependency: Xvfb
Install Xvfb and run Cypress again.
Read our documentation on dependencies for more information:
https://on.cypress.io/required-dependencies
If you are using Docker, we provide containers with all required dependencies installed.
상당히 의존하는 모듈이 있는 것 같다.Introduction | Cypress Documentation
cypress/included Tags | Docker Hub
$ docker pull cypress/included:8.5.0
bahmutov/demo-docker-cypress-included: Demo running the complete Docker image cloudbuild.yaml 인상이 매우 엄숙하다
이런 느낌으로 테스트가 하는cloudbuild에 도착합니다.yaml로
cypress/included
의script 실행을 추가했습니다. cypress run
이미지에Cypress에서 사용하는 의존 모듈이 포함되지 않았습니다.chore(cloudbuild): add cloudbuild/lint_and_test.yaml · hisasann/nuxt-lint-ts-msw@6fbcf10
steps:
- name: node:14
entrypoint: yarn
args: ['install']
- name: node:14
entrypoint: yarn
args: ['run', 'lint']
- name: node:14
entrypoint: yarn
args: ['test']
- name: node:14
entrypoint: yarn
args: ['cypress']
cypress/included를 사용하여 Cypress 실행
현재의 최종 형태는 이쪽이다.
nuxt-lint-ts-msw/cloudbuild.yaml at main · hisasann/nuxt-lint-ts-msw
처음
steps:
# install dependencies
- id: install-dependencies
name: node:14
entrypoint: npm
args: ['install']
# lint and test
- name: node:14
entrypoint: npm
args: ['run', 'lint']
- name: node:14
entrypoint: npm
args: ['test']
# run cypress
- name: cypress/included:8.5.0
entrypoint: 'npm'
args: ['run', 'ci']
options:
machineType: 'E2_HIGHCPU_8'
node:14
인데Cypress를 실행하기 전에 다시 한 번 실행을 했습니다. Cypress의npm환경이 나빠서 실행할 수 없습니다.또 환경 변수
npm install
를 사용한 글이 많았지만, 현재 클라우드 빌드에서는 반대로 이것 때문에 씨프레스가 제대로 작동하지 못하고 있다.우리 창고가 큰 도움이 됐어요.
bahmutov/demo-docker-cypress-included: Demo running the complete Docker image CYPRESS_CACHE_FOLDER
via:
Running Cypress in Google Cloud Build - Stack Overflow
[Cypress] Cloud Build에서 docker run을 사용하여 Cypress를 실행하는 - UGA Boxxx
[Cypress] 로컬 클라우드 Build에서 Cypress-UGA Boxxx 실행
[Cypress] Cloud Build에서 Cypress를 실행한 후 "out of memory" 오류 - UGA Boxxx
Running Cypress in Google Cloud Build - Stack Overflow
Docker | Cypress Documentation
GiithubActions에서 Cypress를 실행하는 yaml
지허브 액션도 샘플이 많아 간단하다.
nuxt-lint-ts-msw/e2e.yml at main · hisasann/nuxt-lint-ts-msw
name: Node.js E2E
on: push
jobs:
build:
name: Node.js ${{ matrix.os }} ${{ matrix.node }}
runs-on: ${{ matrix.os }}
strategy:
matrix:
os: [ubuntu-latest]
node: [ '14' ]
steps:
- uses: actions/checkout@v2
- name: Setup node
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node }}
- name: Display version of Node.js, npm, Yarn
run: |
node -v
npm -v
yarn --version
- name: Get yarn cache
id: yarn-cache
run: echo "::set-output name=dir::$(yarn cache dir)"
- uses: actions/cache@v2
with:
path: ${{ steps.yarn-cache.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
- uses: actions/cache@v2
with:
path: node_modules
key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
- run: yarn
- name: Cypress run
uses: cypress-io/github-action@v2
with:
build: yarn build
start: yarn start
이번 성과 창고: Hisann/nuxt-lint-tsms:ESlint, TypeScript, Mock Service Worker(mw)에 있는 모크 서버를 사용한 창고입니다.기사를 쓸 때 움직이지 않았어요.
이런 오류가 발생한 것은 대략
cypress/included
의 인상이 나왔기 때문cypress:8.6.0
을 사용해야 하는데 왜 8.6.0을 사용했는지,cypress를 설치하지 않은 오류가 발생했다.Error: Command failed with exit code 1: npm run cypress:run
Step #3: at makeError (/workspace/node_modules/execa/lib/error.js:60:11)
Step #3: at handlePromise (/workspace/node_modules/execa/index.js:118:26)
Step #3: at processTicksAndRejections (internal/process/task_queues.js:95:5) {
Step #3: shortMessage: 'Command failed with exit code 1: npm run cypress:run',
Step #3: command: 'npm run cypress:run',
Step #3: escapedCommand: '"npm run cypress:run"',
Step #3: exitCode: 1,
Step #3: signal: undefined,
Step #3: signalDescription: undefined,
Step #3: stdout: undefined,
Step #3: stderr: undefined,
Step #3: failed: true,
Step #3: timedOut: false,
Step #3: isCanceled: false,
Step #3: killed: false
Step #3: }
Image Layer Details - cypress/included:8.6.0 - sha256:021f2017118ded2210359e2355f1c38ccaa0942d524b9bfac172df4bf315aa58 | Docker Hub 한마디로 8.6.0 클라우드 메이킹.yaml,cypress를 다시 쓰면run이 됩니다.
응, latest처럼 쓰이지 않았나.
고정
cypress:8.5.0
된 버전으로 사용하고 싶은데 여기는 또 다른 말입니다.추기
평소에 실수하셨다고 말씀해 주세요.
cypress/included
파일 고정 버전yarn.lock
을 사용합니다.따라서 Cypress에서 버전을 지정해야 하지만 최신 버전이 설치되어 있습니다.
chore(cloudbuild): change entrypoint from npm to yarn · hisasann/nuxt-lint-ts-msw@c78f433
오류 없이 고정
npm install
된 버전입니다.참고 문장
구성 파일 모드 구축 | Cloud Build 문서 | Google Cloud
컨테이너 이미지 구축 | Cloud Build 문서 | Google Cloud
cypress/included Tags | Docker Hub
클라우드 빌드에 대해 알아봅시다 | 향후 기술 블로그
[GCC] Cloud Run의 Nuxt입니다.js를 디자인하기 전에. - Qita.
Cypress-Type Script Deep Dive 일본어 버전
Reference
이 문제에 관하여(Cypress에서 CloudBuild에서 e2e를 실행하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/hisasann/articles/cypress-on-cloud-build텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)