Angular SPA 애플리케이션을 GitHub 페이지에 배치하고 GitHub 작업으로 CI/CD 구현

Do you want to build your first Angular App and deploy over cloud using GitHub Actions? How to deploy/publish Angular App to GitHub Pages automatically? Did you use GitHub Actions to build and deploy Angular App over GitHub Pages? Stay tuned in this article I will show you step by step from creating angular app to building and deploying using GitHub Actions.

우리 뭐 짓고 있어?

우리는 GitHub Pages에 각도 응용 프로그램을 구축하고 배치할 것이다.

각도 응용 프로그램 만들기

다음 스크립트를 실행하여 새angular 프로그램을 만듭니다.ng new sample-app

Npm 패키지 설치

ng add angular-cli-ghpages

구축의 절차는 무엇입니까

✔️ 건조

✔️ 가죽면

✔️ 테스트

GitHub 작업 작성

작업으로 GitHub 워크플로우를 만듭니다.이제 days GitHub actions runner 기본 설정CI=true을 참조하십시오.Learn more here …

워크플로우 이름

name: Angular GitHub CI # 👈

주 분기의 트리거

mainbranch가 새로운 추진을 받을 때 작업을 터치합니다.

on:
  push:
    branches:
      - main # 👈

노드 버전

ubuntu-latest에서 여러 노드 버전을 실행합시다.

jobs:
  ci:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [10.x, 12.x]
        # 👆

주의, 우리가 사용하는 것은 node10와 node12이다. 따라서 한 번에 두 개의 작업이 병행 운행되고, 한 작업은 10번 운행된다.x 및 1개용12.x

소스 코드 체크 아웃

코드부터 검사합시다.

steps:
  - uses:
      actions/checkout@v2
      # 👆

노드 환경 설정

- name: Use Node.js $
- uses: actions/setup-node@v1
  with:
    node-version:
      $
      # 👆

GitHub 캐시 사용

GitHub 캐시를 사용하여 저장하십시오node_modules.Caching GitHub Workflow dependencies here에 대해 자세히 알아보십시오.

더욱 진행한다

다음에 우리는 반드시 조건부로 노드 패키지를 설치해야 한다.Learn more here …

- name: Install Dependencies
  if:
    steps.cache-nodemodules.outputs.cache-hit != 'true'
    # 👆 if cache hits the skip this step.
  run: npm ci

건축 공사

프로젝트를 컴파일하기 위해 내장 production mode 을 실행합시다.우리는 -- --prod를 통과해야만 실행할 수 있다ng build --prod.

- name: Build
  run: npm run build -- --prod

임정 프로젝트

임정이 뛰라고.

- name: Lint
  run: npm run lint

테스트 항목

생산 모드에서 테스트를 실행합시다.테스트를 실행할 때 다음을 확인해야 합니다.

✔️ 저희가 사용하는 것은 크롬 헤더 브라우저"browsers": "ChromeHeadless"와

입니다.

✔️ 코드 덮어쓰기 생성"codeCoverage": true,

✔️ 소스 매핑 무시"sourceMap": false

👁️ 시계 모드가 아닌지 확인“watch”: false

위의 모든 설정은 angular.json 파일에서 완료할 수 있습니다.
파일 식별 항목 이름angular.json으로 이동합니다.

테스트 대상으로 이동합니다.projects.sample-app.architect.test

다음 생산 코드 설정을 추가합니다.

"configurations": {
  "production": {
    "sourceMap": false,
    "codeCoverage": true,
    "browsers": "ChromeHeadless",
    "watch": false
  }
},

그것은 보기에 다음과 같다.

       "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "configurations": { 👈
            "production": {
              "sourceMap": false,
              "codeCoverage": true,
              "browsers": "ChromeHeadless",
              "watch": false
            }
          },👈
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },

main.yml 파일에 다음 스크립트를 추가합니다.구축 기계에서 운행할 때 상술한 생산 테스트 설정을 사용할 것이다.

- name: Test
  run: npm run test -- --prod

GitHub 워크플로우 트리거

이제 우리의 업무 절차를 볼 때가 되었다.계속해서 변경 사항을 GitHub로 밀어넣고 GitHub의 작업 탭을 확인합니다.

두 작업 모두 완료되었습니다.

전체 YAML 파일

GitHub 페이지에 Angular 애플리케이션 배포

다음 단계는 당신의 프로젝트가 CI 업무 아래의 모든 절차를 통과했다는 것을 알게 되면 됩니다.

✔️ 건조

✔️ 가죽면

✔️ 테스트

다음에 우리는 응용 프로그램을 어딘가에 배치해야 한다.이 예에서, 나는 우리의 응용을 GitHub Pages에 배치할 것이다.

GitHub 페이지

GitHub 페이지는 무료이며, 정적 사이트를 위탁 관리할 수 있습니다.거기에 angular 프로그램을 배치하는 절차를 설명해 드리겠습니다.

Ng 배포 사용

ng deploy는 Angular CLI 명령으로, GitHub 페이지에 Angular Application을 자동으로 배포하는 데 사용됩니다.ng deploy를 실행할 때, 생성기를 실행해서 배치를 수행합니다.
프로젝트 루트 디렉터리의 명령줄에서 스크립트 angular-cli-ghpages 를 실행하고 ng add angular-cli-ghpages builder를 설치합니다.

로컬 컴퓨터에서 GitHub 페이지로 배포

GitHub 페이지 서버에서는 정적 파일을 성공적으로 호스팅할 수 있도록 base-href 를 repository name 에 제공해야 합니다.GitHub 저장소 이름은 angular-ci-cd-with-github-actions이므로 배포 스크립트는 다음과 같습니다. ng deploy --base-href=/angular-ci-cd-with-github-actions/package.json에 다음 스크립트 추가

    "deploy": "ng deploy --base-href=/angular-ci-cd-with-github-actions/"

로컬 컴퓨터에서 deploy 명령을 실행하여 테스트할 수도 있습니다 npm run deploy

너의 응용 프로그램은 GitHubPage에서 실시간이다

GitHub 저장소 설정으로 이동하여 사이트가 게시되었음을 확인합니다.2-5분을 기다렸다가 프로그램을 찾아보세요.

GitHub 페이지에서 웹 사이트가 시작되어 실행되고 있음

Angular 어플리케이션을 배포하기 위한 GitHub 작업 업데이트

그런 다음 GitHub 페이지에 애플리케이션을 배포할 수 있도록 워크플로우를 업데이트합니다.다음 두 가지 절차는 우리가 앞의 절차를 통과할 때 실행할 것이다.if: success() 또는 if: always()를 지정하지 않는 한 if: failure()는 항상 억제됩니다.따라서, 나는 단계에if조건을 추가하지 않았다.

변경 로그 작성

저장소에 이름이 TOKEN_GITHUB_ACTION인 비밀을 추가합니다.

다음에 변경 로그를 Conventional ChangeLog Action 로 만들 것입니다.

- name: Conventional Changelog Action
  id: changelog
  uses: TriPSs/conventional-changelog-action@v3
  with:
    github-token: $
    output-file: 'false'

GitHub 릴리스 작성

다음에 우리는 Conventional ChangeLog Action를 사용하여 우리의 환매 협의를 표시하고 GitHub 발행판을 만들 것이다.참고: 변경 사항이 없으면 게시가 작성되지 않습니다.

GitHub 페이지에 배포

마지막으로 GitHub 페이지에 애플리케이션을 배치합니다.

- name: Deploy
  run: |
    npm run deploy

YAML 완료, GitHub 페이지에 angular 응용 프로그램 배포

이것은 제 것입니다 final workflow:

이제 변경을 추진하면 워크플로가 트리거되고 CI/CD가 성공합니다.🆒!

몽땅 완성하다🎉 당신의 angular ci/cd를 무료로 드세요!내 거야 demo site live

제 글을 끝까지 읽어주셔서 감사합니다.나는 네가 오늘 약간의 특별한 것을 배웠으면 한다.만약 당신이 이 글을 좋아한다면, 당신의 친구에게 공유하고, 건의나 생각이 있으면, 댓글창에 쓰십시오.

풀 스택 개발자 되기💻

나는 Fullstack Master에서 가르친다.만약 당신이 소프트웨어 개발자가 되고 싶다면, 당신의 운영자를 새로운 소프트웨어 엔지니어나 수석 개발자/프로그래머로 발전시켜라.우리의 모든 개발 교육 계획을 구독하는 것을 고려하다.많은 프로그래밍 실습을 통해 Angular, RxJS, JavaScript, 시스템 구조 등을 배울 수 있습니다.저희는 매달 회원 계획을 가지고 있습니다. 귀하는 저희의 모든 동영상 수업, 슬라이드 쇼, 원본 코드 다운로드와 매달 동영상 통화를 무한히 방문할 수 있습니다.

구독All-Access Membership PRO plan을 통해 현재와 미래의 각도 노드를 방문하십시오.js와 관련 과정.

PRO 플랜의 모든 정보를 보려면 All-Access Membership ELITE plan를 구독하십시오.또한 Rupesh 월 1회 현장 질의응답 화상 통화를 통해 질문/질문을 던지고 도움말, 팁 및 팁을 얻을 수 있습니다.

Your bright future is awaiting for you so visit today FullstackMaster and allow me to help you to board on your dream software company as a new Software Developer, Architect or Lead Engineer role.

💖 말하다👋 내놔!
루페시 티발리
설립자Fullstack Master
이메일: [email protected]
웹 사이트: www.rupeshtiwari.com|www.fullstackmaster.net