Netlify에 Angular 앱 배포

안녕하세요 여러분, 이것은 DEV 커뮤니티의 첫 번째 게시물입니다. 이 게시물에서는 Netlify에서 Angular 애플리케이션을 배포하는 방법을 설명합니다.

Netlify는 무엇입니까

문서에 따라

Netlify는 최신 웹 프로젝트를 자동화하기 위한 올인원 플랫폼입니다. 호스팅 인프라, 지속적인 통합 및 배포 파이프라인을 단일 워크플로우로 교체하십시오. 프로젝트가 성장함에 따라 서버리스 기능, 사용자 인증 및 양식 처리와 같은 동적 기능을 통합합니다.

하지만 나에게 netlify는 웹 앱을 배포하고 호스팅할 수 있는 플랫폼입니다.

CLI에서 Angular 앱 만들기

필요한 디렉터리로 이동하고 다음 명령을 실행하여 각도 앱을 만듭니다.

ng new angular-netlify
ng serve

첫 번째 명령은 디렉토리에 각도 앱을 만드는 것이고 두 번째 명령은 앱이 로컬 호스트에서 실행 중인지 확인하는 것입니다.

http://localhost/4200 주소의 브라우저에서 각도 앱을 볼 수 있습니다.

Netlify에 배포할 Angular 앱의 변경 사항

src 폴더에 _redirects라는 파일을 만들고 아래 줄을 삽입합니다.

/*  /index.html 200

_redirects에 대해 자세히 알아보기

angular.json 파일에서 projects.architect.build.options.assets로 이동하고 다음을 추가합니다.

{
                "glob": "_redirects",
                "input": "src",
                "output": "/"
 }

Netlify에 앱 배포

먼저 Netlify 계정이 필요합니다. 가지고 있지 않다면 이것을 사용하십시오 Netlify Signup

파일을 업로드하거나 git 저장소를 Netlify 계정에 연결하여 앱을 배포할 수 있습니다. 저는 git repo를 netlify와 연결하는 것을 선호합니다. 이는 이후 게시물에서 논의할 특정 이점이 있기 때문입니다.

netlify에 git repo 연결하기

Netlify 계정에 성공적으로 가입하고 로그인하면 다음과 유사한 대시보드가 ​​표시됩니다.


Git에서 새 사이트를 클릭합니다. Github/Gitlab/Bitbucket을 통해 로그인하라는 새 화면이 나타납니다.


성공적으로 로그인한 후 저장소에 액세스하려면 자신을 대신하여 netlify에 권한을 부여해야 합니다.



그런 다음 해당 리포지토리를 선택하고 빌드 설정을 구성해야 하는 다음 단계를 진행합니다.

코드가 있는 적절한 분기를 선택했는지 확인하십시오.



또한 게시 디렉토리가 dist/[앱 이름]에 있는지 확인합니다. 제 경우에는 아래 그림과 같습니다.



이제 배포 사이트 버튼을 누르는 것이 좋습니다. 앱을 배포하는 데 몇 분 정도 걸리며 배포된 앱에 액세스할 수 있는 URL이 제공됩니다.

다음
다음 포스팅에서는 Firebase를 이용한 인증을 추가하도록 하겠습니다.