[Project] Team Project 10일차

신재욱·2023년 5월 29일
0
post-thumbnail

📒 오늘의 TIL

1️⃣ AWS 프론트엔드 배포

  • AWS 프론트엔드 배포 과정에서 인스턴스에 이전에 작업한 내용을 Git으로 내려받아 배포해보았다. 기본적으로 AWS에서 제공하는 용량으로 빌드하는 과정에서 어려움이 있었다. 그러나 우리는 용량을 늘리는 대신 노드의 버전을 업그레이드하여 최적화를 높였다. 이로써 용량이 제한된 상황에서도 배포를 가능하게 만들었다.
  • 물론, 나중에 도커를 설치한다면 이 방법으로는 문제를 해결할 수 없고, 결국 인스턴스 용량을 늘려야 할 것이다. 그러나 현재 단계에서는 아직 인스턴스에 올린 서비스가 완성된 서비스도 아니기 때문에, 우선적으로 검색하여 노드 버전을 업그레이드하는 방식으로 문제를 해결했다.
  • 사실 배포 과정에서는 이전에 배우고 정리한 자료를 기반으로 따라하기만 해서 아직 완전히 이해한 것은 아니다. 노드 버전을 올리는 방식이 옳은 방법인지도 확실하지 않다. 또한, 동적 배포와 정적 배포에 대한 이해도도 아직 부족한 것 같다. 좀 더 찾아보고 공부해봐야겠다. 머리가 복잡하다.

🧑‍💻 궁금한 점

  • 정적배포 동적배포

✍ 알게된 점

  • AWS 프론트엔드 배포 과정은 다음과 같은 단계로 이루어진다.
  1. 인스턴스 생성 : AWS에서는 EC2(Elastic Compute Cloud)를 사용하여 가상 서버(인스턴스)를 생성한다. 인스턴스는 운영체제와 필요한 리소스(메모리, CPU 등)를 가지고 있다.

  2. 애플리케이션 설정 : 인스턴스에 애플리케이션을 설치하고 필요한 구성을 설정한다. 이 단계에서는 웹 서버(Nginx, Apache 등)를 설치하고, 환경 변수, 포트 번호 등을 구성한다.

  3. 코드 배포 : Git과 같은 버전 관리 시스템을 사용하여 프론트엔드 코드를 인스턴스로 배포한다. 이전에 작업한 코드를 가져와서 실행한다.

  4. 의존성 설치 : 애플리케이션에 필요한 패키지나 라이브러리를 설치한다. 이를 위해 npm(Node Package Manager)과 같은 도구를 사용한다.

  5. 빌드 및 번들링 : 프론트엔드 애플리케이션을 빌드하고 번들링하여 필요한 파일을 생성한다. 이 단계에서는 JavaScript, CSS, 이미지 등의 파일을 압축하고 최적화한다.

  6. 정적 배포 : 정적 파일(HTML, CSS, JavaScript, 이미지 등)을 웹 서버에 업로드하여 배포한다. 정적 배포는 주로 CDN(Content Delivery Network)을 통해 전 세계의 사용자에게 빠르게 제공된다.

  7. 동적 배포 : 동적 요청을 처리하기 위해 백엔드 서버와 연동한다. 이를 위해 API Gateway, Lambda 함수, 서버리스(AWS Serverless) 등을 사용하여 동적 데이터를 제공한다.

💡 번들링?

번들링은 여러 개의 모듈 또는 파일을 하나의 번들 파일로 결합하는 과정을 말한다. 프론트엔드에서는 주로 JavaScript 모듈을 번들링하여 하나의 JavaScript 파일로 만든다. 번들링을 통해 모듈 간의 의존성을 해결하고, 네트워크 요청 수를 줄여 로딩 속도를 향상시킬 수 있다. 번들링 도구(예: Webpack, Parcel)를 사용하여 번들링 작업을 자동화하고 최적화된 번들 파일을 생성한다.

💫 느낀점

  • 어렵군
profile
1년차 프론트엔드 개발자

0개의 댓글