간단한 안내서에서 저는 Gitlabs CI/CD 파이프라인을 사용하여 각도 있는 사이트를 Google의 Firebase 호스트에 배치하여 저를 위해 모든 구축과 배치를 완성하는 방법을 보여 드리겠습니다.
나는 또한 등단/생산 구축을 할 것이다. 이렇게 하면 등단과 테스트/방송 중의 물건을 볼 수 있다. 내가 기뻐할 때 나의 변경 사항을 환매main/master지점으로 미루고 Gitlab는 모두 생산에 배치할 것이다.
좋습니다. 우선 터미널에서 다음 명령을 사용하여 Firebase CLI를 설치해야 합니다.

npm install -g firebase-tools

완료 후 Firebase Console로 이동하여 두 개의 새 프로젝트를 만듭니다.
이 프레젠테이션에서 나는 두 개를 만들었다fir-hosting-demo-staging화목하다fir-hosting-demo-prod만약 당신이 임시 저장해서 생산하고 싶다면, 두 개의 독립된 프로젝트가 필요합니다. 만약 당신이 원하지 않는다면, 하나의 프로젝트를 창설하기만 하면 됩니다.
일단 그것들이 만들어지면, 당신의 시각으로 돌아가서, 우리는 해야 할 준비 작업이 있습니다.
터미널을 사용하여 각도 응용 프로그램을 탐색하고 다음 명령을 실행합니다.firebase init옵션hosting을 강조 표시하고 옵션Use an existing project을 강조 표시합니다.
화살표 키를 사용하여 얻은 목록에서 임시 항목을 선택합니다.
그리고 이 질문을 받게 될 거예요.

What do you want to use as your public directory?

이 경로는 angular.json 에서 outputPath 에 대해 설정된 경로입니다. 이 경로는 ng build 를 실행할 때 모든 내용의 경로입니다.
이것은 내 각도 응용 프로그램의 이름이기 때문에 나에게 그것은 dist/firebase-hosting-demo 이다.그래서 그렇게 만들었어.
그리고 리셋 방향을 묻는 질문을 받게 될 것입니다. 각도 응용 프로그램으로서 yes 모든 내용을 index.html 로 리셋해야 합니다.
이 명령을 실행하면 다음과 같이 새로 생성된 파일.firebaserc을 엽니다.

{
  "projects": {
    "default": "fir-hosting-demo-staging"
  }
}

프로젝트 이름을 바꾸고 싶어서 default 를 staging 로 계속 변경합니다.

{
  "projects": {
    "staging": "fir-hosting-demo-staging"
  }
}

우리는 지금 생산 위탁 관리를 추가하여 터미널에서 다음 명령을 실행해야 한다.firebase use --add그리고 현재 Firebase 프로젝트의 목록을 가져와 만든 생산 프로젝트를 선택하십시오.
그리고 너는 반드시 그것에게 별명을 주어야 한다. 나는 나를 부르는 것을 좋아한다production..firebaserc 파일로 이동하면 다음과 같습니다.

{
  "projects": {
    "staging": "fir-hosting-demo-staging",
    "production": "fir-hosting-demo-prod"
  }
}

너는 지금 프로젝트의 종착역에서 운행할 수 있다firebase use staging, 이 항목은 firebase use production 과 같은 임시 저장 항목으로 전환됩니다.
현재 모든 설정이 정확하면 테스트 구축/배치를 계속할 수 있습니다.
터미널에서 실행을 통해 사용 중인지 확인stagingfirebase use staging명령을 사용하여 Angular 응용 프로그램 만들기ng build일단 구축되면 dist 폴더가 있어야 합니다. 그 안에 당신의 응용 프로그램이 있습니다. 저에게는 dist/firebase-hosting-demo 폴더가 있습니다.
명령firebase deploy --only hosting을 계속 실행하고 Firebase를 관찰하면 출력 폴더에서 모든 구축 파일을 가져와 Firebase staging branch에 업로드합니다.
완료되면 Firebase cli가 위탁 관리 URL로 되돌아옵니다. 응용 프로그램을 옮기는 것을 볼 수 있습니다.
생산 지점에 대해 같은 조작을 실행하고 실행 명령을 생산 firebase use production 으로 전환한 다음 같은 firebase deploy --only hosting 과 같은 파일을 Firebase의 생산 프로젝트로 전송할 수 있습니다.
이것은 테스트에 있어서 매우 좋지만, 당신이 어느 지점에 있는지, 어떤 항목을 사용하고 있는지, 당신의 코드를 구축하고 전송해야 한다는 것을 기억하면 좀 지루해질 것이다.
이것이 바로 우리가 Gitlab을 이용하여 당신을 위해 모든 일을 완성할 수 있는 곳입니다.
다른 CI/CD 도구도 이렇게 할 수 있습니다. 저는 Gitlab을 주로 사용합니다.
이제 모든 설정이 끝났으니 다음 단계로 넘어가자!

Gitlab 회사

만약 당신의 코드가 모두 Gitlab에 저장된다면, 내가 좋아하는 작업 방식은 세 가지가 있는데, master, staging, develop 등이다.master와 staging는 모두 보호된 지점으로 Gitlab의 통합 요청을 통해서만 로컬로 전송할 수 있습니다.
그래서 나는 코드의 develop 지점으로 전환할 것이다.git checkout -b develop우리는 CI 영패가 필요합니다. 이것은 Firebase 영패입니다. Gitlab은 우리를 대표하여 일을 할 수 있습니다.둘 중 하나를 가져오려면 터미널에서 명령을 실행하십시오.

firebase login:ci

로그인하고 권한을 요청하는 데 사용할 팝업 창이 브라우저에 나타납니다. 이 작업을 마치고 터미널로 돌아가면 약간 이렇게 보이는 CI 영패를 얻을 수 있습니다.

1//03s000000000000000000000F-L9I00000000000000W-_000000Tg

나는 일부러 이 시범을 위해 나의 것을 바꾸었다. 너의 시범 안에는 제로가 많지 않을 것이다.
gitlab로 이동합니다. 이 영패를 프로젝트에 저장해야 하기 때문입니다.
gitlab의 Repo에서 설정 >CI/CD를 누르고 변수 부분을 확장합니다.Add Variable 버튼을 클릭하면 이러한 창이 나타납니다.

변수FIREBASE_TOKEN를 호출하고 ci:login에서 얻은 값을 붙여넣습니다.변수를 보호하거나 차단하지 않았습니다. 이 옵션을 검사할 때 Gitlab에 문제가 발생할 수 있습니다.
변수를 저장하면 우리는 이 부분의 설정을 완성할 수 있다.
우리 코드로 돌아가서 프로젝트 ROOT 단계에서 .gitlab-ci.yml 라는 새 파일을 만듭니다.이것은 Gitlab에 프로젝트 구축에 필요한 설명을 제공하는 파일입니다.
파일에 다음 내용을 붙여넣습니다.

stages:
    - build
    - deploy

image: node:12.13.0-alpine

cache:
    paths:
        - node_modules/

build-staging:
    stage: build
    rules:
        - if: $CI_COMMIT_BRANCH == "staging"
    script:
        # Install dependencies
        - npm install
        # Build App
        - npm run build
    artifacts:
        paths:
            # Build folder
            - dist/firebase-hosting-demo
        expire_in: 1 hour

deploy-staging:
    stage: deploy
    script:
        - npm install -g firebase-tools
        - firebase use --token $FIREBASE_TOKEN staging
        - firebase deploy --only hosting -m "Pipeline $CI_PIPELINE_ID, build $CI_BUILD_ID" --non-interactive --token $FIREBASE_TOKEN
    rules:
        - if: $CI_COMMIT_BRANCH == "staging"

build-production:
    stage: build
    rules:
        - if: $CI_COMMIT_BRANCH == "master"
    script:
        # Install dependencies
        - npm install
        # Build App
        - npm run build
    artifacts:
        paths:
            # Build folder
            - dist/firebase-hosting-demo
        expire_in: 1 hour

deploy-production:
    stage: deploy
    script:
        - npm install -g firebase-tools
        - firebase use --token $FIREBASE_TOKEN production
        - firebase deploy --only hosting -m "Pipeline $CI_PIPELINE_ID, build $CI_BUILD_ID" --non-interactive --token $FIREBASE_TOKEN
    rules:
        - if: $CI_COMMIT_BRANCH == "master"

이 파일의 기능에 대해 자세히 설명하지는 않겠지만, 본질적으로는 Angular 응용 프로그램을 구축하고 배치하지만, Git 지점에 따라 서로 다른 Firebase 프로젝트를 사용합니다.
따라서 우리의 생각은 develop 지점에서 코드 변경을 하는 것이다.일단 당신이 만족하면 코드를 제출하고 원격 개발 지점으로 전송하세요.develop 에서 staging 로 갈 준비가 되었을 때, 통합 요청을 한 다음, Gitlab가 파이프를 시작하여 Angular 응용 프로그램을 구축하고 Firebase에 배치하는 것을 지켜보세요.
기꺼이 출시할 때, Gitlab에서 staging 부터 master 까지의 합병 요청을 실행하면 생산 환경에 다시 구축하고 배치합니다.
처음 실행하는 데 시간이 좀 걸릴 수 있습니다. 이것은 제 gitlab-ci.yml 파일에서 캐시 node_modules 를 지정했기 때문입니다. 그러나 이렇게 하면 그 다음에 실행하는 파이프가 더 빠를 것입니다!
당신이 나의 가이드를 좋아하길 바랍니다. 만약 무슨 문제가 있으면 언제든지 저에게 연락 주세요!