스벨트 창시자 리치헤리슨 형이 웹팩 번들 만들던 실력으로 리엑트 비슷한거 만들었었는데,

리엑트가 페이스북에서 만들어 배포하면서 이름도 비슷하고 해서 접고, 다시 심기일전하여 만든게 Svelte 

스벨트 이야기해보겠습니다.

 

지금까지 스벨트는 쉽고, 빠르고, 용량작고.... 돌려 말하면 나쁘다는 것만 다뺀 다이어트 결정판 front end 프레임워크로

소문나 있습니다.

 

그러나 이렇게 좋은 것에는 그에 상응하는 대가가 따르는법.

 

스벨트로 장난치다가 그럼 납품 좀 해볼까 하면? 어 뭐지 ~ 산으로 감!

빌드해서 배포하려고하면, 어 이건 내가 알던 자바스크립트가 아니 잖아?

 

자바스크립트는 자고로 cdn 으로 불러와서 파일 젤 위나 아래에 붙여주면 일해야하는 하는 것이거늘...

스벨트는 눈씻고 찾아봐도 그렇게 하는 방법이 없습니다.

 

우선 스벨트는 php 처럼 바로 ftp에 올려서 쓰기는 힘듭니다.

특정 페이지에만 스벨트 쓴다는 것도 어렵습니다.

node.js 웹서버 돌려서 프로젝트 전체를 스벨트로 구성해서 올려야 합니다.

 

방법은 다음과 같습니다.

우선 내컴에 node.js 를 설치하고

 

스벨트 프로젝트를 생성합니다.

npm create svelte@latest myporject

 

생성한 프로젝트의 폴더로 이동 합니다.

cd myporject

 

node module 설치

npm install

 

svelte 개발 확인용 실행

npm run dev

 

이렇게하면 svelte kit 이 설치되어 실시간 개발 확인 서버가 실행됩니다.

그러면 svelte 파일을 수정하면 실시간으로 수정내용이 반영되어 빠른 개발 편집이 가능합니다.

중간에 문법이 심하게 틀린 상태에서 저장하면 run 상태가 해제 되니 실행중인가 확인하면서

다시 실행해주면서 코드를 수정해 나갑니다.

 

그리고 서버에 올리기 위한 최종 빌드를 위해서 스벨트 아답터를 설치합니다.

노드 웹서버 이용은 adapter-node를 이용합니다.

아답터들이 여러개 있는데, Saas 서비스에 업로드용 아답터가 많이 있습니다.

클라우드 플레어라든가 바셀 이라던가 여러가지가 있습니다. 이런 서비스를 이용하면 노드서버 구성안하고 

바로 올릴 수 있어서 편합니다. 아마도 스벨드 개발 뒷배후 세력들이 아닌가 싶습니다. 스벨트의 실질적 수익원!

우리가 자체적으로 운영하는 서버에 직접 운영하려면 노드 서버를 이요하면 됩니다.

그리서 노드 아답터를 설치합니다.

npm install adapter-node 

그리고 각 설정들 문서보면서 파일들에  설정 코드 넣으면서 진행합니다.

 

그리고 최종 빌드를해서 이상 여부를 체크 해줍니다.

npm run build

정상적으로 빌드가 완료되면 done 가 출력됩니다.

done 가 출력되면, 이제 서버에 올려도 됩니다.

 

이상태에서 코드 수정하고 운영중인 웹서버에서 서비스하려면

우선 웹서버에도 node.js 설치합니다.

php 호스팅만으로는 안됩니다. node.js 같이 되는 호스팅 이용하면됩니다.

아니면 리눅스 서버 클라우드 등등 이용합니다.

 

지금가지 작업한 폴더 전체 스벨트 소스를 서버로 이동시킵니다.

이동 방법은 현재 만들어 놓은 파일을 그대로 웹서버에 ftp로 올려도 되고(비추천 : 불필요한 양이 많음)

git 을 이용해 github 에 올리고 github 에서 웹서버로 git pull 로 다운로드 받아도 됩니다.

jenkins 를 이용해 이 과정을 자동화 할 수도 있습니다.(이렇게 하는게 편함)

 

그리고 웹서버에서 다시한번

npm install 을 실행시켜주면,

내컴의 node.js 와 서버의 node.js 가 윈도우용과 리눅스용이 서로 달라도

알아서 리눅스용으로 node module 을 다시 설치해서 사용할 수 있게 해줍니다.

 

그리고 

npm run build

하면, 검파일 한참하고 최종 done 출력하면 뭔가 폴더가 만들어 집니다.

전 최종 결과물을 build 폴더에 저장하라고 설정해서

 

build 폴더가 보이는데, 이곳으로 가서 보면

index.js 파일이 보입니다.

요놈을 실행하면 node 서버가 실행됩니다.

node ./index.js

그러면, http://서버ip:3000 으로 접속하면 

만들어 놓은 svelte 가 실행됩니다.

 

그런데 이렇게만 놓고 몇시간 지나면 서버가 내려가 있습니다

나의 프로그램이 완벽하면 안내려가는데, 조금 민감한 문제가 생겨도 서버가 죽습니다.

그래서 

에러가 나서 멈춰도 다시 실행되도록 재시작 프로그램을 이용해 실행을 합니다.

forever 이나 pm2 를 이용하면 되는데, pm2 를 추천합니다.

pm2 start ./index.js 이렇게 해주면 중간에 멈추지 않고 계속 실행 됩니다.

 

 

그럼 도메인은 어떻게 연결하냐고요?

프록시 패스로 연결시켜 줍니다. nginx 나 apache 설정에서 프록시 패스를 걸어줍니다.

도메인으로 접근하면 localhost:포트번호 로 이동하라고 패스해주는 역할을 합니다.

 

서버에 올리려면 좀 열일 합니다.

php 처럼 파일만 올리면 되는게 아니닙니다.

그래도 스벨트를 쓰시겠습니까?

전 쓴다에 한표

 

그래서 저도 처음에는 스벨트를 서버에 올려서 사용하지 않고 훨씬 쉬운방법인

하이브리드 앱으로 만들어서 납품을 했습니다.

 

오히려 앱으로 만드는데 훨씬 더 단순하고 쉽습니다.