스벨트 배우기.. > JS프레임워크

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

JS프레임워크

스벨트 배우기.. 정보

SVELTE 스벨트 배우기..

본문

우선 틀불님과 임종필님에 소스코드 공유해주신걸로 참고해서 보고 있습니다. (공유해주셔서 감사해요)

api는 좀 볼피드님이 깃헙으로 올려주신 자료가 있다보니 그걸로 좀 버그하고 에러부분을 수정하면서 잠깐 쓰고 있는데

스벨트 언어가 좀 생소하지만... 전에 뷰2를 공부 좀 한게 있다보니.. 혼자서 해결해보려하는데

.env 파일이 없기에... 틀불님이 올려주신 자료만 있으면 참고해서 공부하려해요.. 공유 가능하시다면 따로 알려주시면 감사하겠습니다.. 

그리고 배포할때도 좀 뭔가 다른가봐요 배포 경로를 어디로 잡아야되나요??

추천
1
  • 복사

댓글 4개

.env.development
VITE_API_ENDPOINT ="그누보드/api"
VITE_BASE_ENDPOINT ="http://localhost:3000"
VITE_SERVER_URL ="그누보드"
VITE_DEBUG_MODE = true
VITE_GOOGLE_RECAPTCHA_SITE_KEY =""
VITE_GOOGLE_RECAPTCHAA_SEC_KEY=""

.env.production
VITE_API_ENDPOINT ="그누보드/api"
VITE_BASE_ENDPOINT ="http://localhost:3000"
VITE_SERVER_URL ="그누보드"
VITE_DEBUG_MODE = false
VITE_GOOGLE_RECAPTCHA_SITE_KEY =""
VITE_GOOGLE_RECAPTCHAA_SEC_KEY=""

이렇게 두파일을 svelte.config.js 파일이 있는 폴더에 만들어서 올려두시면 됩니다.



배포는 방법이 다양한데요. 그누보드 사용하시는 분들 습성상,

내가 직접 운영하는 서버에서 배포하시는 경우를 생각하면,
서버에 node.js를 설치하시고

.gitignore 파일에 명시되어 있는 폴더들을 제외하고 제외하고 서버에 아무 공간에 올려줍니다.
ftp 로 하셔도 되고 git을 연결하시면 git에 올려두시고 git pull로 내려 받아서 하셔도 됩니다.
.gitignore 는 git에 연동할거냐는 것을 설정하는 파일입니다. 이곳에 명시되면, 연동안하게 됩니다.
아무래도 git으로 하는게 최근 트렌트를 따르는 것일 겁니다.


node 서버를 별도로 돌리기 때문에 apache, nginx 가 접근하는 폴더가 아닌 폴더에 올려두시면됩니다.
일반 js 불러서 사용하는게 아니라, 별도의 apache 나 nginx처럼 별도의 웹서버를 돌리게 되니
이부분 해깔리시면 안됩니다.
express 서버 돌리시는 것과 비슷합니다.

이중
.env.production 파일은 수동으로 올려주시겨나 새로 생성해서 내용을 채워주셔야합니다.
민감한 내용이라서 git에 올려두지 않고 직접 관리하라고 별도로 빼두는 용도의 파일입니다.
그래서 직접 옮기셔야합니다.

그리고 node 의 npm 을 이용해서
모듈을 재설치 해줍니다.
npm i
이렇게 하면 모듈이 모두 현재 OS에 맞는 모듈로? 재설치 됩니다.

여기에서도 바로
npm run dev 로 실행여부를 확인할수도 있습니다.


sveltekit 에 adapter-node 설치해서(svelte.config.js 에 빌드하면 결과물 저장될 폴더 설정:build)
npm run build 로 빌드하시고

index.js 파일이 보이는데, 이곳에서 포트 확인하시고
node ./index.js 하시면 해당 포트로
http://localhost:3000 나 http://127.0.0.1:3000
접속할 수 있게 됩니다.
이렇게 node 웹서버가 실행되면 외부에서 접속할때
일반도메인으로 접속하면, 저 http://localhost:3000으로 패스하도록
웹서버의 proxy_pass 설정을 하셔야합니다.
apache 나 nginx 에서 설정을 해주시면 됩니다.

저는 주로 nginx 를 사용해서 예시를 들여드리면,
nginx 의 경우 /etc/nginx/conf.d/ 이폴더에
도메인.nginx.conf 라고 도메인 연결설정하는 설정이 있는데
여기에

location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
  }
@들불 와!!!!!!! 진짜 너무너무 감사해요!! 방금전에 제가 질문 남겼다가... 다시 처음부터 읽고나서... 하는방법 터득했어요!!!! 진짜 속시원하게 알려주셔서.. 너무 감동 받았습니다!!
감사.
임종필 = 틀불 = 들불 같은사람입니다. 들불로 닉네임 변경하려는데, 오타가 나와서 잠시 틀불로 글올린게 있네요.
© SIRSOFT
현재 페이지 제일 처음으로