[Final Project] CloudType-Phaser3-Docker 배포 테스트

Final Project Stack

 

내일배움캠프에서 이리 치이고 저리 치이다 보니 어느덧 최종 프로젝트의 날이 다가왔다.

 

이번 최종 프로젝트에선 클라이언트에 Phaser를 쓸려고 했는데 본격적으로 들어가기 전에 CloudType에서 어떻게 배포를 해야 될지 감이 잡히질 않았다.

 

찾아보니 클라우드타입은 도커 컨테이너 기반이고, 커스텀 도커 이미지 배포를 지원해 준다는 걸 알게 되었다.

 

CloudType

• 템플릿에서 Dockerfile 선택
  Dockerfile에 작성해 둔 Port 작성

 

연결 확인

 

Error Handling?

인프런에 있는 Phaser 강의는 Node 16 버전을 기반으로 하는데 내가 현재 사용 중인 버전은 18이다.

그래서 먼저 모듈의 버전 호환성부터 해결을 해줘야 됐다.

// npm package.json 모듈을 한번에 업데이트 시켜주는 패키지
npm install -g npm-check-updates

// 최신버전 업데이트
ncu -u

// npm 모듈 업데이트
npm update

// 모듈 설치
npm install

 

이러면 로컬에선 작동이 잘 되지만 막상 CloudType에서 배포를 하면 빌드가 되지 않는 문제가 발생했다.

아마 강의 극초반 코드여서 그런 거 같은데...

 

그래서 DocketFile에서 프로덕션 설정은 제외하고 개발환경으로 세팅해 줬다.

# Dockerfile
# Node.js 환경 설정
FROM node:18-buster

# 작업 디렉토리 설정
WORKDIR /app

# 의존성 파일 복사 및 설치
COPY package*.json ./
RUN npm install

# 애플리케이션 파일 복사
COPY . .

# 애플리케이션 실행 포트 설정 (webpack-dev-server 포트)
EXPOSE 8080

# 애플리케이션 실행
CMD ["npm", "start"]

 

Invalid Host header

다 잘된 거 같았지만 어림도 없지

배포 페이지로 들어가 보니 내가 작성하지도 않은 Invalid Host header가 출력되고 있었다.

콘솔로그에도 아무것도 안 뜨길래 이게 대체 무엇인가 싶어서 찾아보았는데 webpack-dev-server가 특정 호스트 또는 도메인에서의 요청만을 허용하도록 설정되어 있을 때 발생된다고 한다.

 

즉, 보안 목적으로 도입된 기능으로 webpack-dev-server가 예상치 못한 출처의 요청을 거부하도록 한다는 거다.

 

그래서 webpack/base.js에 devServer 설정을 추가해 줬다.

module.exports = {
  mode: "development",
  devtool: "eval-source-map",
  // ... 나머지 설정 ...

  devServer: {
    host: '0.0.0.0',
    port: 8080, // 사용할 포트 번호
    allowedHosts: 'all', // 모든 호스트를 허용
    // ... 기타 필요한 설정 ...
  },
};

 

역시.. 궁금할 땐 직접 해보는 게 제일 빠르다.

지금 제대로 된 테스트는 개발 환경 기준이지만 추후엔 프로덕션 환경으로도 테스트를 해봐야겠다.

 

레퍼런스

클라우드타입 공식문서

[JS] Phaser 게임 제작 - 뱀파이어 서바이벌 클론