이 기사에서는 Angular 앱 저장소를 서버와 연결하는 방법을 보여줍니다. 따라서 변경 사항을 특정 브랜치로 푸시할 때마다 서버는 정의한 스크립트를 기반으로 앱을 자동으로 빌드 및 구성하고 즉시 앱을 게시합니다.

1. Angular CLI를 사용하여 Angular 앱 만들기

Or you can download the final result HERE

ng new angular-ci-app

Make sure to choose Yes when it asks you to create the app with the Routing.

2. 새 GitHub 리포지토리 생성.

If you wonder why my GitHub is on a dark theme check this Chrome extension

3. VS Code에서 만든 앱을 엽니다.

터미널을 열고 앱을 새로 만든 리포지토리로 푸시합니다.

git remote add origin https://github.com/<Your-User-Name>/<Repo-Name>.git
git branch -M master
git push -u origin master

4. 경로로 간단한 앱 정리 및 추가.

App.Component.html을 열고 내부의 모든 항목을 삭제한 후 다음 코드를 붙여넣습니다.

App.Component.html

<style>
  button {
    margin-right: 20px;
  }
</style>
<button routerLink="/home">Home</button>
<button routerLink="/about">about</button>

<router-outlet></router-outlet>

app-routing.module.ts를 열고 다음 코드를 붙여넣습니다

.

앱 라우팅.module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { HomeComponent } from "./components/home/home.component";
import { AboutComponent } from "./components/about/about.component";

const routes: Routes = [
  { path: "", redirectTo: "/home", pathMatch: "full" },
  {
    path: "home",
    component: HomeComponent,
  },
  {
    path: "about",
    component: AboutComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

앱 폴더 내에 새 폴더를 만들고 이름을 구성 요소로 지정하고 Home 및 About 구성 요소를 만듭니다.

저장소에 변경 사항 푸시

git add .
git commit -m "creating routes"
git push

5. Netlify에 저장소 연결하기

Netlify에서 새 계정을 만들고 저를 팔로우하세요.

Git 버튼에서 새 사이트 클릭

GitHub 옵션 선택

Netlify will ask for permission

리포지토리 이름 검색

배포할 분기 선택

The selected branch will be the one which Netlify will be listening on it and whenever you push a change to it Netlify will build your app based on the configuration we will make below.
So, I will choose master for now which is the only branch we currently have.

빌드 명령

Type the build command of your app, In our case, it will be ng build

디렉토리 게시

By default Angular build your application inside a dist folder
and will create another folder inside of it with the name of your app (You will find it inside package.json) in my case its angular-ci-app
So, I will type dist/angular-ci-app

마지막으로 사이트 배포를 클릭합니다.

6. 앱 미리보기

기본적으로 Netlify는 앱의 더미 URL 이름을 제공합니다. 원하는 경우 변경할 수 있습니다Site Settings.

7. 404 페이지 문제 수정

예를 들어/home과 같은 경로가 있는 URL을 복사하여 붙여넣으면 404 페이지로 리디렉션됩니다.
이 문제를 해결하기 위해 두 가지 솔루션이 있습니다.

첫 번째 해결책:

_redirects 폴더 안에 src 파일을 만들고 다음 행을 붙여넣습니다.

/*  /index.html  200 

그런 다음 자산 배열에 대한 파일 검색 열기angular.json => projects > architect > options > assets및 추가"src/_redirects"
각도.json

"projects": {
    //...
      "architect": {
        "build": {
          //..
          "options": {
            //..
            "assets": ["src/favicon.ico", "src/assets", "src/_redirects"],

두 번째 솔루션:

다음과 같이 { useHash: true } 내부의 forRoot 함수에 대한 두 번째 인수로 app.routing.module를 넣습니다.

// ...
@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule],
})

// ...

이렇게 하면 경로 앞에 #을 추가합니다.

따라서 경로는 http://localhost:4200/#/home와 같을 것입니다.

8. 마스터 브랜치로 푸시하고 변경 사항을 확인합니다.

git add .
git commit -m "fixing 404 page"
git push

Netlify로 이동하면 자동으로 앱을 다시 빌드하기 시작했음을 알 수 있습니다.

이제 URL을 복사하여 붙여넣으면 더 이상 404 페이지로 이동하지 않습니다.

See my final Result https://angular-ci.netlify.app/#/home

팁

내 프로젝트에서 개인적으로 사용하는 몇 가지 팁을 알려 드리겠습니다.

저는 보통 demo 브랜치를 만들고 이 브랜치를 Netlify에 연결합니다.

또 다른 브랜치dev를 만들고 변경 사항을 커밋하고 푸시합니다. 변경 사항을 클라이언트에 게시하려면 dev 브랜치를 demo 브랜치로 병합하고 변경 사항을 푸시합니다.