1. Cloudtype을 선택한 이유
무료다!
github 연동 및 배포가 가능하다!
모두의 플랫폼팀, 클라우드타입
클라우드타입은 클라우드 기반 애플리케이션을 빠르게 개발하고 배포할 수 있는 클라우드 애플리케이션 플랫폼입니다.
cloudtype.io
로그인 후, 새 프로젝트를 생성한다.
2. DB(MariaDB) 배포하기
2.1 Cloudtype 배포
Cloudtype은 MySQL을 지원하지 않기 때문에 MariaDB로 변경하려고 한다.
먼저 Cloudtype에서 MariaDB 템플릿을 선택한다.
DB 접속 시 사용할 Root Password을 입력하고,
더 많은 옵션에서 Database Name, Username, Password을 입력한 후 배포한다.
도메인 탭에서 MariaDB의 호스트와 포트 번호를 확인할 수 있다.
2.2 TCP 외부 접속 허용
외부에서 DB에 접속하려면 TCP 외부 접속을 허용해주어야 한다.
프로젝트 우측에 설정 버튼을 클릭한다.
방화벽 > TCP 외부 접속 허용하기 > 적용하기 해주면 외부 접속이 가능해진다!
3. Back-end 설정
3.1 MariaDB 설치
먼저 npm으로 mariadb를 설치한다.
npm install mariadb
3.2 DB 설정 정보 변경
데이터베이스 설정 파일에서 방금 설정한 MariaDB 접속 정보로 변경해준다.
dialect는 mariadb로 변경해준다.
{
username: USERNAME,
password: PASSWORD,
database: DATABASE,
host: HOST,
port: PORT,
dialect: "mariadb"
}
4. Back-end 배포하기
4.1 Cloudtype 배포
Github 프로젝트 > Code > Local 탭의 Clone 부분
여기서 HTTPS URL을 복사한다.
Cloudtype에서 Git URL로 배포하기를 누르고, 방금 복사한 URL을 붙여넣기 해준다.
(한 저장소 내에 client와 server 폴더가 같이 있어서 서브 디렉토리를 따로 지정해주었다.)
필요한 환경 변수들을 추가해주었고, 포트 번호도 지정했다.
DB 설정 정보를 환경 변수로 관리하고 있었기 때문에, 여기에 추가해주었다.
마지막으로 package.json 파일의 scripts를 참고해서 command를 작성해준다.
그리고 배포하기 버튼 클릭!
도메인 탭에서 서버 주소를 확인할 수 있다.
5. Front-end 배포하기
5.1 package.json
client의 package.json 파일에서 proxy부분을 방금 확인한 서버 주소로 변경해준다.
//전
"proxy": "http://localhost:8080"
//후
"proxy": "서버 도메인"
5.2 Cloudtype 배포
서버 배포 때와 마찬가지로, Github 프로젝트 > Code > Local 탭의 Clone 부분
HTTPS URL을 복사한다.
Cloudtype에서 Git URL로 배포하기를 누르고, 방금 복사한 URL을 붙여넣기 해준다.
(한 저장소 내에 client와 server 폴더가 같이 있어서 서브 디렉토리를 따로 지정해주었다.)
언어/프레임웍은 React로 선택해주고, 필요한 환경 변수들을 추가해준다.
package.json 파일의 scripts 부분의 빌드 스크립트를 추가해준다.
그리고 배포하기 버튼 클릭!
도메인 탭에서 프론트엔드 도메인을 확인할 수 있다.
6. Back-end cors 처리
6.1 cors 설치
npm install cors
6.2 cors 적용
app.js 파일에 아래 코드를 추가해준다.
(방금 확인한 프론트엔드 도메인)
origin이 프론트엔드 도메인인 요청을 허용해주는 것이다.
const cors = require('cors');
const app = express();
app.use(
cors({
origin: "프론트엔드 도메인",
credentials: true,
})
);
변경된 내용을 push한 뒤, Cloudtype에서 재배포하면!
배포 완료~!🥰
