Cypress에서 CloudBuild에서 e2e를 실행하는 방법

Cloud Build: 서버 없는 CI/CD 플랫폼 | Google Cloud
CI/CDGithub 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 .gitignoreeslint가 파일을 가로로 먹는 게 좋지 않겠지.
$ 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의 경우
  • 구축 소스 코드
  • 서버 부팅
  • 서버 부팅 상태에서 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 일본어 버전

    좋은 웹페이지 즐겨찾기