Flutter 를 이용해 Web 을 개발하고 Netlify 로 배포하기까지의 과정을 서술합니다.

Web 배포

우선 Flutter 프로젝트를 만들 때 Web 을 체크해서 만들어준다.
이후 개발과정은 그냥 Flutter 를 이용해 개발하는 것과 다르지 않다.

이 글을 쓰는 이유는 Netlify 를 이용해 Flutter Web 을 배포하는데 발생한 오류들을 해결하는 것을 담았다.

우선 Netlify 에서는 플러그인 형식으로 Flutter 배포를 도와주는 확장이 있다.
배포 환경을 구성해보고 Integrations 탭에 가서 Flutter 를 검색한다면 나올 것이다.

해당 플러그인을 다운로드하고 활성화하면 사실상 Flutter Web 배포는 끝났다고 봐도 된다.
이후에는

해당 형식으로 Build setting 을 구성해주면 된다.
그럼 배포 완!

Cors 를 겪다.

분명 Spring Boot GraphQL 로 직접 만든 서버는 Cors 에 대해 접근을 허용해주었다.
하지만 local 로 실행한 서버라 그런지 Https 가 아닌 Http 였고, 해당 API 를 Https 에서 호출을 하게되니 Cors 에러를 겪게된 것이다.

구글링을 통해 해결법을 알게 되어 공유하려 한다.
왜냐하면 구글링을 통해 읽은 해결법을 이해하고 적용시키기 쉽지 않았고, 나온 해결법의 경우 대부분 React 글이었기 때문이다. ( 물론 처리하는 근본적인 방법은 같다 )

우선 API 를 호출하는데 있어 공통이 되는 주소를 확인하고, 대치해준다.

원본 - GraphQL 서버를 호출하기 때문에 이렇게 설정
String HTTP_LINK = "http://{IP 혹은 도메인}/graphql";

수정본
String HTTP_LINK = html.window.location.href.contains('localhost')
	? "http://{IP 혹은 도메인}/graphql"
    : "api"; // 해당에서 api 로 쓰여져있는 건 후술할 .toml 파일에서 설정한 것과 같은 값으로 해야한다.

수정본에서 localhost 를 확인한 이유는 local 에서 Chrome 으로 Flutter 프로그램을 실행할 때를 구분하기 위해서이다. 무작정 api 로 바꿔준다면, local 에서 실행했을 때 서버를 호출하지 못할 것이다.

후에 프로젝트의 Root 폴더 or Root 경로에 netlify.toml 파일을 만들고 아래와 같이 구성한다.

[[redirects]]
  from = "/api"
  to = "http://{IP 혹은 도메인}/graphql"
  status = 200
  force = true
  headers = {X-From = "Netlify"}

위의 내용은 /api 가 포한된 것을 호출하면 to 로 구성된 것으로 대치한다는 내용이다.
이렇게 호출할 경우 cors 또한 발생하지 않는다.

그렇다면 왜?

개발자도구를 열어서 확인해보자.

개발자 도구를 열어 확인해보면 실제로는 Https 로 시작되는 Netlify 주소에 우리가 설정한 /api 라는 엔드포인트로 서버가 호출되는 것을 볼 수 있다.
때문에 Https to Http 가 아닌 .toml 파일의 설정을 이용해서 Https to Https 로 보여지게 속이는 것이다.

이렇게 해서 Local 로 실행한 서버와 연동을 확인할 수 있다.