[otherpeople] Netlify로 Angular 프로젝트 배포

2021. 6. 10. 12:54

Netlify에 Angular 프로젝트 배포하기

멘토님의 말씀대로 Angular를 배우기보다는 React를 배워봐야겠지만, 이미 Angular로 만들고 있던 웹사이트는 대충이라도 마무리하기 위해서 Netlify에 Angular로 홈페이지를 서비스하는 방법을 알아본다.

Angular 프로젝트를 Netlify로 배포하는 방법은 간단하다. Build Settings에 들어가서

설정하면 배포가 완료된다. 다만, 몇가지 추가적인 설정을 해줄필요가 있다

페이지를 로드할 때 렌더링을 전부하는 대신, 미리 렌더링이 가능한 것들을 해놓음으로써 사이트 로딩을 최적화 할 수 있다.

ng add @nguniversal/express-engine 으로 Angular Universal을 add한다
npm run prerender 을 통해 pre-render한다. pre-render하면 dist/프로젝트명/browser 위치에 pre-render된 html 파일들이 생성된다.
netlify.toml 파일에 아래 구문을 추가한다

[build]
  command = "npm run prerender"
  functions = "./functions"
  publish = "dist/프로젝트명/browser"

Angular의 경우에 페이지를 새로고침하면 에러를 띄운다. 따라서 netlify.toml 에 redirects 규칙을 추가하여 정상적으로 작동하도록 한다

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

COMMENT