19. Flutter - 클라우드 서비스 개념, CORS(Cross-Origin Resource Sharing)

IaaS, SaaS, PaaS, CORS
홍윤's avatar
Oct 10, 2024
19. Flutter - 클라우드 서비스 개념, CORS(Cross-Origin Resource Sharing)

1. 플랫폼 구축 과정

💡
notion image
IaaS, SaaS, 그리고 PaaS와 같은 클라우드 서비스 개념을 설명하고 있으며, 특히 IaaS를 기반으로 플랫폼을 구축하는 과정을 다룹니다. 또한 테스트 환경과 운영 환경에서 JAR 파일을 실행하고 이를 모니터링하는 프로세스에 대해 설명하고 있습니다.

주요 내용:

  1. 클라우드 서비스 모델:
      • IaaS (Infrastructure as a Service): 인프라를 가상화하여 제공하는 클라우드 서비스. 서버, 네트워크, 스토리지 등의 하드웨어 자원을 제공하며, 사용자는 그 위에서 원하는 운영체제 및 애플리케이션을 설치하고 실행할 수 있습니다.
      • SaaS (Software as a Service): 완성된 소프트웨어를 서비스 형태로 제공하는 모델.
      • PaaS (Platform as a Service): 개발자들이 애플리케이션을 개발, 배포, 관리할 수 있도록 필요한 플랫폼을 제공하는 서비스.
  1. IaaS로 플랫폼 만들기:
      • 그림에서 DockerCI/CD를 언급하고 있으며, 이를 통해 플랫폼을 구축합니다.
      • Docker는 컨테이너 기술로, 애플리케이션과 그에 필요한 라이브러리, 설정 등을 한데 묶어 배포할 수 있는 도구입니다.
      • CI/CD는 지속적인 통합(Continuous Integration)과 지속적인 배포(Continuous Delivery)를 자동화하는 시스템입니다. 이를 통해 코드를 자동으로 빌드하고 배포하는 과정을 간소화합니다.
  1. 윈도우 환경에서 테스트:
      • 윈도우 환경에서 JAR 파일을 실행하여 모든 컨트롤러가 정상적으로 작동하는지 확인하는 단계가 포함되어 있습니다.
      • 이 과정에서 실패할 수 있는 시나리오도 테스트해야 함을 언급하고 있으며, 이는 윈도우 환경에서만 테스트하지 말고 다른 환경(리눅스 등)에서도 테스트해보는 것이 중요하다는 것을 의미합니다.
  1. 테스트 서버와 운영 서버:
      • 테스트 서버: 리눅스 운영체제에서 JDK 21을 사용하여 JAR 파일을 실행하고 테스트합니다.
      • 운영 서버: 최종 배포된 애플리케이션이 배포되는 서버로, 마찬가지로 리눅스와 JDK 21 환경에서 실행됩니다.
      • 이 과정에서 환경이 다를 수 있기 때문에 윈도우에서의 테스트뿐만 아니라 리눅스 환경에서도 제대로 동작하는지 확인하는 것이 중요합니다.
  1. 모니터링:
      • 모니터링 과정에서는 로그알림 시스템을 언급하고 있습니다. 즉, 운영 중인 서버에서 로그 데이터를 수집하고, 문제가 발생했을 때 적절한 알림을 받는 것이 필요합니다. 이를 통해 시스템 상태를 실시간으로 추적하고, 장애가 발생했을 때 빠르게 대응할 수 있습니다.

요약:

  • IaaS를 활용하여 인프라 환경을 구축하고, 이를 기반으로 애플리케이션을 배포하는 과정에서 DockerCI/CD를 사용해 플랫폼을 자동화하고 효율적으로 관리합니다.
  • 개발 환경에서부터 운영 환경에 이르기까지 다양한 테스트를 거쳐 애플리케이션이 올바르게 작동하는지 확인하며, 운영 중에도 모니터링을 통해 시스템의 상태를 실시간으로 관리합니다.
 

2. CORS(Cross-Origin Resource Sharing)

💡
notion image
이 그림은 CORS(Cross-Origin Resource Sharing) 문제와 관련된 설명을 다루고 있습니다. CORS는 웹 브라우저가 다른 도메인, 프로토콜 또는 포트에서 실행 중인 리소스에 대해 제한적으로 접근을 허용하는 보안 정책입니다. 여기서는 Flutter 애플리케이션, Jar 파일(백엔드 서버), 그리고 크롬 브라우저를 통한 JS(자바스크립트) 통신에서 발생하는 CORS 문제를 설명하고 있습니다.

주요 내용:

  1. 로컬 환경에서의 통신:
      • Flutter 애플리케이션과 **Jar 파일(백엔드 서버)**가 같은 로컬 네트워크(로컬 컴퓨터)에서 실행되고 있습니다.
      • Flutter 애플리케이션이 192.168.0.9:8080에서 실행 중인 백엔드(Jar 파일)로 요청을 보내고 있습니다. 이때, 동일한 IP와 포트를 사용하기 때문에 CORS 문제가 발생하지 않습니다.
  1. CORS 설정:
      • CORS(Cross-Origin Resource Sharing): CORS는 웹 브라우저가 다른 출처(도메인, 포트, 프로토콜 등)의 서버에 요청을 보낼 때 발생하는 보안 정책입니다.
      • 그림에서는 프론트엔드에서 192.168.0.9:8080으로 요청을 보낼 수 있도록 CORS 설정을 해야 한다고 명시하고 있습니다. 이를 통해 특정 서버에서만 요청을 허용할 수 있도록 설정할 수 있습니다.
  1. 크롬 브라우저에서의 CORS 거부:
      • 크롬 브라우저에서 **자바스크립트(JS)**를 통해 192.168.0.8:5000으로 요청을 보낼 때, CORS 정책에 의해 요청이 거부됩니다. 이 경우 클라이언트와 서버가 다른 IP 또는 포트를 사용하기 때문에 동일 출처가 아니라고 판단되어 CORS 에러가 발생하는 것입니다.
  1. IP가 달라서 통신 불가:
      • 그림의 하단에서, IP가 다르면 통신이 불가능하다는 점을 강조하고 있습니다. 예를 들어, 192.168.0.9:8080192.168.0.8:5000은 서로 다른 IP와 포트를 사용하기 때문에, 동일 출처 정책에 따라 브라우저에서 기본적으로 요청을 차단하게 됩니다.

요약:

  • CORS 문제는 브라우저 보안 정책 때문에 발생하며, 다른 출처(도메인, IP, 포트 등)로 요청을 보낼 때 발생합니다.
  • 로컬에서 실행 중인 Flutter 애플리케이션Jar 파일과 통신할 때는 동일한 네트워크에서 작동하므로 문제가 없지만, 크롬 브라우저에서 다른 IP나 포트로 통신하려고 할 때는 CORS 정책 때문에 요청이 차단될 수 있습니다.
  • 이 문제를 해결하기 위해서는 백엔드 서버에서 CORS 설정을 통해 허용할 도메인과 포트를 명시적으로 열어줘야 합니다.
Share article

Uni