1탄) 구름IDE에서 개발하고 띄워보기

안녕하세요 이번에는 구름IDE에서 개발하고 개발한 사이트를 띄워보려고 합니다.

 

먼저 구름IDE 계정을 생성한 후 대시보드를 열어보겠습니다.

대시보드는 컨테이너 단위로 개발환경 및 프로젝트를 생성하고 관리하는 인터페이스 입니다.

여기서 새 컨테이너를 클릭하여 개발작업을 수행할 개발환경을 구성하는 화면으로 이동하겠습니다

 

 

컨테이너 생성에서 프로젝트의 이름 등의 프로젝트 정보와 

배포방식, 소프트웨어 스택, OS 버전 등 개발환경의 스펙을 선택하여 프로젝트를 생성할 수 있습니다.

간단한 사이트는 php로 제작하기 좋습니다. phpMyAdmin이라는 브라우저에서 실행하는 DB툴 또한 지원하고 있습니다.

저의 경우 웹컴포넌트를 수월하게 모듈화할 수 있는 vue.js(with node.js)로 개발하겠습니다. 

데이터베이스도 필요하다면 추가 모듈/패키지에서 해당 DB를 선택하여 생성을 눌러줍니다.

* 구름IDE에서 DB사용 방법은 구글님과 help.goorm, blog.goorm 을 통해서 찾으실 수 있습니다.

 

 

 

* 참고로 서비스 배포까지 생각하신다면 공개범위 Private, 배포할 플랫폼을 선택하셔야합니다.

  ① HerokuCLI 설치 및 ② API-KEY 취득 방법은 아래 사이트를 참고하시면 되겠습니다

① HerokuCLI 설치 devcenter.heroku.com/articles/getting-started-with-nodejs

② Heroku API-KEY 취득 devcenter.heroku.com/articles/authentication#api-token-storage

 

그럼 아래와 같이 프로젝트 컨테이너가 생성이 되며

실행을 누르면 프로젝트를 IDE로 접근할 수 있게 됩니다.

 

 

이 스타터팩이 어떻게 구성되어있는지 프로젝트를 한번 구동하여 확인해보겠습니다.

'프로젝트 > 실행 > 실행 명령 추가' 에서 프로젝트를 구동시키는 스크립트를 작성하고 '실행'을 클릭합니다.

* IDE에서 각 소프트웨어 스택에 따라 default 스크립트를 제공하고 있으니 스크립트 작성 없이 실행하실 수 있습니다

  다만, node 관련 스택의 경우 default 스크립트에 npm install이 포함되어 있으므로 두번째 실행부터는 install를 빼고

  npm run serve 만 입력하여 실행하시는 것이 구동속도가 빠릅니다.  

 

 

구동하셨다면 잘컴파일 되었는지 콘솔을 한번 확인해보신 후 

미리보기를 클릭하시면

프로젝트의 결과물을 확인하실 수 있습니다.

 

 

커스터마이징을

좀 해보겠습니다.

이렇게 '구름IDE로 간편하게 웹개발하기' 는 성공적

 

 

이었습니다. 

 

참편리합니다.

우린 클라우드 서비스를 통해 쉽게 개발하고 배포할 수 있는 좋은 시대에 살고있습니다.

여러분도 한번 도전해보시는건 어떻신가요.

 

다음에 다른 컨텐츠로 찾아뵐 수 있도록 하겠습니다.

코로나 조심하시고 건강하세요.

 

즐코!