스벨트 프로젝트를 시작합니다.

새로 만들어서 시작하기.

프로젝트를 생성합니다.

npm create svelte@latest my-app

생성한 폴더로 들어갑니다.

cd ./my-app

 git과 연결작업을 합니다.

깃저장소 초기화

git init

현재 폴더의 모든 폴더 및 파일을 스테이징

git add .

첫커밋 생성

git commit -m "깃 최초 등록"

깃레파지토리 생성

github.com 이나 gitlab.com 또는 사설 git 에서 레파지토리 저장소를 만든후

git remote add origin {레파지토리 주소.git}

마직막 생성 커밋, git 에 반영 push

git push -u origin master

git 올려둔 프로젝트 받이서 시작하기

git에 기존 프로젝트가 있으면, 

git clone {프로젝트 url}

로 시작하면 됩니다.

저는 주로 VSCode 에서 F1 키를 눌러 git clone 라고 치면 

git:복제(재귀) 선택후 나오는 창에 git url을 입력해서 시작합니다.

gitlab을 사용하는 경우에는 간단하게 vscode 에서 실행하기 버튼이있어서 바로 실행되는 편리한 방법도 있습니다.

의존성 모듈 다운로드

npm i

실행확인

npm run dev

웹브라우저에서 싱행화면 실시간 확인

http://localhost:5173

/src/routes 폴더 안에 폴더와 파일을 만들면서 라우팅을 잡아가고

파일안의 내용을 변경하면서 실시간으로 변경된 웹을 보면서 개발을 진행합니다.

그리고 배포 해야겠다. 배포 해볼까? 시점에

node-adapter 를 설치합니다.

npm i @sveltejs/adapter-node

node-adapter 설정을 해줍니다.

svelte,config.js 파일을 열어

//import adapter from '@sveltejs/adapter-auto'; <= 여기는 주석처리하고

import { vitePreprocess } from '@sveltejs/kit/vite';

import adapter from '@sveltejs/adapter-node'; //<= 여기 추가해줍니다.

/** @type {import('@sveltejs/kit').Config} */

const config = {

// Consult https://kit.svelte.dev/docs/integrations#preprocessors

// for more information about preprocessors

preprocess: vitePreprocess(),

kit: {

adapter: adapter({

out: 'build',

precompress: false,

envPrefix: '',

polyfill: true,

})

}

};

export default config;

그리고 로컬에서 테스트 빌드를 합니다.

에러가 나면 빌드해도 실행이 되지 않기 때문에

서버에 올리기 전에 빌드 되는지 확인하는 절차 입니다. 에러나면 그부분 수정해주시고 반복하면서 빌드성공을 시킵니다.

npm run build

에러가 나지 않으면

git commit

git push 

이렇게 로컬 내PC에서어의 작업을 마무리합니다.

이제 git 에 빌드가 성공한 내 프로젝트가 업로드 되어있게 됩니다.

그럼 서버로 접속합니다.

터미널이나 putty, 파워셀 등 여러 ssh 접속 도구를 이용합니다.

aws 나 cafe24 클라우드서버에 접속시에는  pem 키를 이용하는 경우가

있는데, 퍼미션 에러가 나는 경우가 있습니다. 이경우는 pem 파일의 사용자가 범용으로 되어 있어서  나는 에러로

사용자를 1인으로 지정하고 권한의 범위를 읽기 및 쓰기로 축소 해줘야합니다.

우선

node.js 가 설치되어 있어야합니다.

설치가 되어있다는 가정하게

node 는 apache 나 nginx 처럼 특정 폴더를 지정해서 해당 폴더로 접속하면 스크립트가 실행하는 방식을 사용하지 않습니다.

그래서 스크립트 위치는 아무데나 잡으면 됩니다.

 서버상의 기억하기 좋은 위치에 구분하기 쉬운 폴더를 생성해서 그곳에서 파일을 지정해서 프로그램 실행하듯이

node 파일을 실행하면 그파일 설정에 따라 서버가 뛰워지게 됩니다.

폴더를 만든후 git clone 를 해야하는데 git 이 설치되어 있지 않으면 git를 설치합니다.

그리고  

깃과 폴더를 연결해 줍니다.

git clone {git주소}

git 에서 내용을 다운로드 받습니다.

git pull 

계정을 등록하지 않았으면 매번

git 계정 id 와 password를 입력하게 됩니다.

다운로드 되었는지 확인합니다.

해당 폴더에서 모듈을 다운로드 합니다.

npm install 

서버에서 빌드합니다.

npm run build

간혹 서버의 메모리가 적은경우 중간에 빌드가 팅기는 경우가 있습니다

빌드시 사용할 메모리의 최고치를 설정할 수있으니 로컬에서 잘되던 빌드가 서버에서 잘안되면 메모리 설정을 해보는 것을 추천드립니다.

실행을 해봅니다.

빌드 폴더로 가서(앞의 설정에서 build 로 했서 build 폴더가 생성되었을 것입니다.) 첫 실행파일인 index.js 생성되었는지 확인후

node ./build/index.js

그러면 index.js 파일 제일 아래 쪽에 port 번호로 설정된 포트 번호(기본값 3000)로

node 서버가 실행됩니다.

프록시패스를 걸어 놓았으면 주소로 접속해 돌아가는지 확인합니다.

자체적으로 확인하려면

curl http://localhost:3000 하면 페이지에 렌더링된 html 코드 내용이 출력됩니다.

얼추 html 을 볼 줄 알면, 내용이 잘 나오는지 확인 할 수 있습니다.

node ./build/index.js 로 실행을 하면, 서버가 다운될 수 있습니다.

에러가 나면 서버가 멈추게 되는데, 이 에러가 가벼운 에러여도 잘 멈춥니다.

그래서 심각한 에러가 아닌이상 서버가 지속적으로 실행을 유지하게 하는 여러 라이브러리가 있습니다.

forever 이나 pm2 등이 있습니다.

저는 그중에 pm2 를 애용합니다.

pm2 를 글로벌로 설치를 합니다.

sudo npm install pm2 -g

pm2로 서버 실행

pm2 start ./build/index.js

실행 프로세스 확인

pm2 list

pm2 무중단 실행을 지원하면서 cpu별 병렬 처리도 지원합니다.

그래서 cpu 코어의 숫자를 확인해서 실행시 사용할 코어의 숫자를 옵션으로 걸어주면

여러개의 스레드를 동시에 뛰우게 됩니다.

접속자의 수가 많게 되면 분산처리되어 서비스의 속도 향상에 유용하게 사용될 수 있을 것입니다.

node 서버가 실행되고 있지만,

도메인을 연결해주지 않으면 외부에서 접속할 수가 없습니다.

그래서 nginx 와 apache 의 설정으로 프록시 패스를 걸어줍니다.

설정한 도메인으로 접속하면 localhost:포트번호로 이동하라고 이렇게 패스를 걸어주면,

도메인에 접속하면 위 포트로 연결되게 됩니다.

이방식으로 도메인을 연결하고 서비스를 진행하면 됩니다.

좀 장황하고 복잡한데,

이런걸 단순화 시키기 위해서 클라우드나 Saas 서비스에서는 이과정을 더욱 단순화 시켜서

자신들의 서비스를 이용하기 위한 호객행위로 사용합니다.

이런 서비스를 이용하셔도 되고 

난 내가 직접 서버 다 컨트롤해야 한다. 나중에 대박 나더라도 내가 직접 관리해서

비용 적게 들게해서 이익을 많이 남기겨야겠다는 근본주의를 표방하는 저 같은 사람은

위의 방식으로 하시면 됩니다.

그리고 한발더 나아가서 좀더 작업 설정을 하시면

위 복잡한 방식도 간단한 방식으로 압축해서 ci/cd 자동화 설정을 이용해서 위 철차를

개발 및 push 만으로 단순화 시킬 수도 있습니다. 

그건 다음편에 계속됩니다.