Fly.io 배포하기

summereuna🐥·2022년 12월 7일
0

✅ Cloning Youtube

목록 보기
4/4
post-thumbnail

헤로쿠의 무료 플랜이 11월 28일 부로 종료되었다.

ㅠㅠ 너무나 아쉽다.
다른 대체제들을 검색해 보니 Fly.io, vercel, koyeb 등등이 있는 것 같다.
Fly.io가 제일 쉬운 것 같아서 일단 이걸로 선택하고 진행했다.

📝 Fly.io로 배포하는 방법


나는 그냥 직접 배포했다.
배포 방법은 아주 간단하다. FlyDocs에 적힌대로 따라 치면 끝!

1. flyctl 다운

macOs

  • 홈브류를 사용하고 있다면 홈브류를 사용해 flyctl을 다운 받는다.
    brew install flyctl
  • 혹은 설치 스크립트를 실행하여 다운받을 수 있다.
    curl -L https://fly.io/install.sh | sh

Linux

  • 리눅스의 경우 설치 스크립트를 실행하여 다운 받으면 된다.
    curl -L https://fly.io/install.sh | sh

Windows

  • 윈도우의 경우 Powershell 설치 스크립트를 실행하여 다운 받으면 된다.
    iwr https://fly.io/install.ps1 -useb | iex

2. fly.io 로그인하기

Fly.io를 처음 이용한다면 가입 먼저!
가입 시 카드 번호를 입력하게 되어 있는데 비자나 마스터 사용가능한 카드면 다 되는 것 같다.
가입 완료 후 아래 명령어를 실행한다.

로그인 실행

flyctl auth login

그러면 브라우저가 열리는데 Fly.io 로그인 화면이 뜬다.
이미 로그인한 상태라면 버튼을 클릭하면 되고, 로그인하지 않았다면 아이디와 비번을 입력한다.

3. 앱 런치

Fly.io을 사용하면 도커 이미지로 패키지화된 모든 종류의 앱을 배포할 수 있다.
각 Fly.io 애플리케이션은 시스템에 배포 방법을 알려주는 fly.toml 파일이 필요한데, 이 파일은 flyctl launch 명령을 사용하여 자동으로 생성할 수 있다.

먼저 배포하고자 하는 프로젝트가 있는 폴더로 이동한다.

cd 프로젝트위치

런치 실행

그러고 나서 아래 명령을 입력하면 설정을 위해 몇 가지 질문이 나오는데 거기에 차례차례 답하면서 진행하면 된다.

flyctl launch

👉 설정을 위해 나오는 질문

  • 앱 이름 입력(숫자, 소문자 및 대시만 사용 가능)
    ? App Name (미입력시 앱 이름 자동 생성):

  • 배포할 지역 선택(사용자와 가장 가까운 영역이 기본적으로 선택되어 있음)
    ? Select region: (그런데 가끔 먼 곳에 설정되어 있기도 한데, 그냥 도쿄(일본) 선택하면 될듯)

  • Postgresql 데이터베이스가 필요한지 CLI에서 묻는데 N 선택해도 된다.
    ? Would you like to set up a Postgresql database now? (y/N)


(참고) 💬 패스해도 됩니다.
이 시점에서 flyctl은 사용자를 위한 앱을 만들고 fly.toml 파일에 앱을 구성하는 것을 쓴다.

//📍 fly.toml
//이런식으로 fly.toml 파일에는 이제 앱을 배포하기 위한 기본 구성이 포함되어 있다.
...
app = "hellofly"
[build]
  image = "flyio/hellofly:latest"
...
[[services]]
  internal_port = 8080
  • flyctl 명령은 항상 현재 디렉터리에 있는 파일, 특히 시작 시 앱 이름 값을 참조한다. 이 이름은 Fly.io 플랫폼에서 애플리케이션을 식별하는 데 사용된다.
  • 또한 앱이 어떻게 구축되는지와 내부 포트 설정을 확인할 수 있다.
    파일의 나머지 부분에는 응용프로그램이 배포될 때 응용프로그램에 적용할 설정이 포함되어 있다.
  • 이러한 속성에 대한 자세한 내용은 진행하면서 알게 되겠지만, 현재로서는 애플리케이션을 볼 수 있는 포트를 대부분 구성하는 것으로 충분하다.

4. 앱 배포

이제 컨테이너화된 앱을 배포할 준비가 되었다. 커맨드라인에 다음 명령어를 실행하면 된다.

배포 실행

flyctl deploy

(참고) 💬 패스해도 됩니다.

  • 위 명령어를 입력하면 내 프로젝트의 fly.toml 파일을 검색하여 앱 이름을 확인한다.
  • 그런 다음 flyctl은 Fly.io 플랫폼에 애플리케이션을 배포하는 프로세스를 시작한다.
  • flyctl이 완료되면 명령줄로 돌아간다.

⚠️ 오류 발생!

여기까지 하고 내 프로젝트의 경우 배포시 오류가 발생했다.

=> ERROR [builder 8/8] RUN npm install && npm run build

배포시 위 오류가 발생하며 배포에 실패했는데, 이유는 바벨을 인식하지 못해서 그런것이라고 한다.

Dockerfile 파일에 이렇게 적혀있다.

NPM will not install any package listed in "devDependencies" when NODE_ENV is set to "production",
to install all modules: "npm install --production=false".
Ref: https://docs.npmjs.com/cli/v9/commands/npm-install#description

따라서 npm install --production=false을 추가하여 아래와 같이 명령어를 바꾸고 Dockerfile을 저장하자.

그러면 오류가 발생하지 않고 잘 배포된다.


📝 환경 변수 설정


환경 변수는 다음 명령어를 통해 설정할 수 있다.

fly secrets set 변수명=값

환경 변수를 하나씩 설정할 때 마다 배포가 되는데.. 그래서 환경 변수 설정하는데 시간이 좀 걸린다 ^^!

⚠️ 환경 변수 설정 시 오류 발생

대부분의 환경 변수 설정은 잘 진행되었다. 그런데 mongodb의 클러스터를 연결하는 DB_URL의 경우 계속 zsh: no matches found가 뜨는게 아닌가! 🤯

뭔가 잘못 되었다 싶어 이거저거로 url을 감싸서 설정을 시도했으나 모두 되지 않았고 결국 커뮤니티에 먼저 이 길을 간 선배들에게 질문을 남겼다.

그랬더니 아주 간단하게도, ""로 내 connection path값을 감싸면 된다는 답변이 달렸다.
path니까 ""로 감싸는건 어쩌면 당연한 걸지도.. 감사합니다. 흑..🥲

순식간에 문제가 해결되었고 모든 환경변수 설정을 마무리 했다. 👍


📝 배포한 앱 열기


아래 명령어를 입력하면 방금 배포한 앱(사이트)이 열린다.

fly open

📝 CORS 설정


문제는 계속 된다. 하핫!
내가 만든 프로젝트는 잘 열리는데 웹 사이트의 모든 이미지와 비디오가 깨졌다.
콘솔을 열어보니 cors 문제가 가득가득 빨간색으로 표시되어 있었다.

당연하다^^!
도메인이 변경되었기 때문에 내가 사용하고 있는 storage에 배포된 내 사이트 url을 CORS 설정에 넣어야 한다.
그래야 내 사이트에서 storage에 저장된 이미지와 비디오 파일을 잘 받을 수 있다.

AWS S3 버킷을 사용 중이기 때문에 버킷 권한에서 아래와 같이 CORS 설정을 하면 된다.

그러고 나면, CORS 문제가 해결된다.
헤더에 내 사이트의 도메인 주소가 들어가 있으니 스토리지에서 이미지, 비디오 파일을 잘 받아온다.

😇 Fly.io로 배포하기 완료!

👉 배포 완료된 사이트 구경하기

profile
Always have hope🍀 & constant passion🔥

0개의 댓글