Web/Build and Deploy
-
EC2로 Next.js 앱 배포하기Web/Build and Deploy 2021. 10. 6. 20:13
사실 글 자체는 Next.js에 크게 초점이 맞춰져 있지는 않다. EC2를 이용해서 앱을 배포하는 것이 메인 주제이지만, 굳이 'Next.js 앱' 이라고 덧붙인 이유는 Next.js는 별도의 서버 로직을 작성할 필요가 없기 때문이다. 물론 Customizing을 원한다면 직접 서버 로직을 작성해서 EC2에다 배포해도 되긴 하지만, 대부분의 경우에는 Next.js에서 기본으로 제공해주는 서버 로직을 사용해주는 것이 좋다고 한다. 서버 로직을 직접 작성하면, Next.js의 기본 서버 로직이 갖고 있는 성능 최적화의 이점이 사라지기 때문. 1. EC2 콘솔에 접속해서 인스턴스 시작 버튼 누르기 2. Amazon Machine Image(AMI) 선택하기 AMI는 인스턴스를 시작하는 데에 필요한 정보를 제공..
-
프론트엔드 배포 일지Web/Build and Deploy 2021. 8. 24. 19:01
언젠가는 배포에 관해 공부를 해야겠다고 생각을 했다. 하지만 자바스크립트 공부만 하기에도 너무 바빴기 때문에 미루고 미뤘었다. 만약 우테코가 아니었더라면 취업하기 전에 배포를 직접 만져볼 일이 있었을까 싶기도 하고. 맨 땅에 했더라면 굉장히 막막했을텐데, 같은 팀의 백엔드 크루인 '현구막'이 도와줘서 수월하게 마칠 수 있었다. 이전 포스팅에서도 말했듯이, 디스코드로 화면공유하면서 거의 아바타 소개팅처럼 배포를 진행했던 기억. 기존에는 배포할 일이 있어도 조그마한 토이프로젝트 정도였기 때문에 그냥 Netlify에다가 올려놓기만 했었다. 그래서 이번에도 처음에는 빠른 배포를 위해 Netlify를 사용했는데, 프로젝트의 사이즈가 점점 커지기도 하고 캐싱, 최적화 세팅 등등 설정할 세부사항들이 많아져서 마냥 N..
-
프론트 배포를 위한 잡다한 사전 지식Web/Build and Deploy 2021. 8. 23. 16:57
얼마 전까지만 해도 프론트 배포라고 하면 Netlify밖에 떠오르지 않았다. (놀랍게도 실화) 하지만 프로젝트를 진행하면서 S3 + Cloudfront로 배포를 진행해야하는 상황이 발생했다. 백엔드 크루의 도움을 받아 배포를 진행하면서도 웹 관련 기본 지식이 부족했기 때문에 무슨 아바타 소개팅마냥 하라는 대로 하면서 필기만 하는 수밖에 없었다. 사실 Netlify를 통한 배포는 별도의 공부를 하지 않고도 정말 편하게 배포할 수 있다는 장점이 있지만 그 말은 곧, 인프라와 관련해서 배울 수 있는게 전혀 없다는 말이기도 했다. (근데 나중에 알고보니 Netlify도 S3보단 제한적이지만, 설정할 수 있는 옵션들이 굉장히 다양하더라.) 최근 들어 프론트엔드가 백엔드와 완전히 분리되기 시작하면서, 더 이상 배포..
-
웹팩으로 리액트 개발환경 구축하기Web/Build and Deploy 2021. 8. 18. 16:31
이번에 우아한테크코스에서 진행한 프로젝트의 개발환경을 처음 세팅할 때, 같은 팀 프론트엔드 크루와 함께 기준으로 삼았던 것은 바로 CRA였다. '우리가 CRA를 쓰던 때와 비슷하게, 아무런 불편함 없이 코딩할 수 있을 정도'로 세팅을 하자는 것. 그러면 그냥 CRA를 쓰면 되지, 왜 굳이 처음부터 세팅을 하느냐? CRA를 사용하면 불필요한 기능들까지 한 번에 딸려오기 때문에 가지치기 작업을 해줘야하는데, 그럴바에 차라리 직접 리액트 개발환경을 세팅하면서 공부를 해보자는 것이 공통된 의견이었다. 더불어 CRA를 사용하는 것이 불가능한 조건이었다는 건 비밀. ■ package.json 우선, 당연히 npm init을 통해 package.json을 만드는 것부터 시작된다. npm init 📦 웹팩(Webpac..