svelte & sveltekit를 이용해서 서비스를 만들었는데, 서버에는 어떻게 올려서 볼 수 있을까요?

예전에 svelte는 만들기는 쉬운데, 배포가 지랄맞다는 내용을 올린적이 있습니다.

이 문제에 대한 해결책은 매우 다양합니다. Saas 서비스를 이용하거나 아니면 git을 이용해서  운영서버에 자동 배포 설정하는 방법이 있습니다.

그중 github actions를 이용해서 운영하는 서버에 직접 배포하는 방법을 적어보겠습니다. 

php 에 익숙하신 분들은 배포가 뭐지 싶을 것입니다. ftp 설정해놓고 서버에서 직접 코딩하던 습관을 생각하면,

너무나도 불편한 방식이기도 합니다. 그래도 초반 세팅만 조금 수고하면 예전 ftp 배포하듯이 쉽게 할 수 있습니다.

개발 반복하는 패턴 비교(PHP 와 svelte)

PHP : 수정 -> 저장 -> 웹브라우저 새로고침(2단계)

Svelte : 수정 -> 저장 -> 웹브라우저 자동 반영(1단걔)

Svelte 에서 새로고침 버튼을 누르는 행위가 사라짐으로 개발시 행해지는 수만번의 클릭을 절약 할 수 있습니다.

배포 반복 패턴 비교(PHP 와 svelte)

PHP : 수정 -> 저장 -> 웹브라우저 새로고침 (2단계 : 수정이 곧 배포)

Svelte : 수정 -> 저장 -> git push -> 웹브라우저 새로고침(3단계)

Svelte는 git을 경유하는 로직이 추가 됩니다. 물론 아래 설정을 해준다면 말이죠.

개발과 배포가 기존 php의 경우 통합되었었다면,

최근 경향에서는 형상관리와 node.js 기반의 프론트 프레임워크들의 배포방식을 이용하려면, git 경유 방식을 사용하게 됩니다.

개발 패턴에서 새로고침을 안하게 되면 엄청 편합니다. 코드에서 브라우저로 포인터 옴겨 다니는 수고를 덜게 되죠. 이게 은근히 큽니다. 

그런데 배포는? 예 지랄맞습니다. 앞서 수동 배포 방법 알려드렸는데, 아마도 배포 내용 보시면서, 내가 할일은 아닌것 같다고 생각하시는 분들이 많았을 것이라고 봅니다.

그래서 이 지랄맞은 배포를 확 줄여서 간단하게 git push 만으로 배포가 이루어지게 할 수 있습니다.

한번 설정해 놓으면 배포 스트레스에서 해방 됩니다.

실행환경은 ubuntu 22.04 node.js 18 버전에서 실행 성공한 내용입니다.

우분투 서버에 node.js 설치되어 있어야 합니다.

그리고 node.js 서버를 뛰우기 때문에

@sveltejs/adapter-node 어뎁터 설치한 설정으로 진행합니다. 

github 를 이용해서 프로젝트를 생성합니다.

방법은 두가지 입니다.

먼저 github에 프로젝트를 생성해서 git clone를 해서 생성하는 방법

또는 내컴에서 sveltekit 프로젝트를 먼저 생성해서 github에 등록하는 방법 등을 사용할 수 있습니다.

아무튼 github에 프로젝트와 내컴의 프로젝트가 연결되어서 커밋 푸시 하면 github 로 올라가게 설정 합니다.

그리고 

서버에서 사용할 폴더에도 github와 연결해 놓습니다.

서버에 ssh 로 접속해서 프로젝트로 사용할 폴더(php와 달리 아무 위치에서 가능합니다. 찾기 편한 폴더에서 사용하시면 됩니다.)에서 git clone {ssh 방식 .git url} 으로 github와 연결합니다.

{ssh 방식 .git url} 내용은 github.com 에서 내 프로젝트의 코드로 가면 우측에 초록색 <> Code 버튼 을 클릭하면 창이 뜨는데 Local 탭에서 Clone ssh 아래 *** 개인정보보호를 위한 이메일주소 노출방지 ***:~.git을 복사 붙여 넣기하면됩니다.

ssh 키를 이용해서 접속하기 때문에 ssh 를 이용합니다.

퍼블릭 공개 git의 경우는 https 도 가능하나, 프라이빗으로 할 경우에는 반듯이 ssh 로 해야합니다. <=2023.10,13 수정

그럼 github 의 프로젝트 폴더가 복사되어서 생성됩니다.

그런데 내용을 보시면 .env.production 파일은 누락된것을 확인할 수 있습니다.

이 파일은 수작업으로 만들거나 ftp프로그램으로 업로드 해주셔야 합니다.

내컴으로 와서

내프로젝트 폴어 안에

.github/workflows 폴더를 만듭니다.(.github 폴더 만들고, workflows폴더를 만듭니다.)
그리고 workflows 폴더 안에 cd.yml 파일을 만듭니다. 파일명 cd 는 아무거나 넣어도 됩니다. workflows 폴더의 파일은 배포시 모두 읽어 들여서 실행됩니다. 그래서 파일명은 아무거나 만들시면 됩니다.

cd.yml 파일안에 내용은 아래와 같이
 

name: Node.js CI/CD

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js 18.x
      uses: actions/setup-node@v3
      with:
        node-version: 18.x
        cache: 'npm'
    - run: npm install
    - run: npm run build --if-present
    # - run: npm test

    # SSH Key 등록 (웹서버에서 github에 접근해서 git pull 하기 위함)
    # 
    - name: Install SSH key
      uses: webfactory/ssh-agent@v0.5.3
      with:
        ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}

    # 원격 서버에서 작업 실행 
    - name: Deploy FastApi MainServer(master)
      uses: appleboy/ssh-action@master
      with:
        host: karbon.kr
        username: ubuntu
        key: ${{ secrets.SSH_PRIVATE_KEY }}
        port: 22
        script: |
          cd {서버에서 git clone 한 프로젝트 폴더가 위치한 곳}
          git pull origin main
          npm install
          npm run build
          pm2 startOrRestart ecosystem.config.cjs --env production

위 내용을 쓰실 때 들여쓰기에 민감하니 이부분 주의 하시기 바랍니다.

그리고 push 에 사용하는 브런치를 확인해서 위의 main 부분을 해당 브런치로 변경해주시면 됩니다.
 

설정 내용을 보면 ${{ secrets.SSH_PRIVATE_KEY }} 보안키 설정하는 부분이 있습니다.

보안키는 2군데에서 사용합니다. 2군데를 별도로 만들어도 되고(보안이 더욱 좋음) 위 내용처럼 한개를 공유해도 작동은 하나 그만 큼 보안에는 취약해지는 것입니다. 우선 해깔리니 전 한번에 가겠습니다.

위 보안키는 github 에서 우분투 서버에 접속하는데 1번 그리고 우분투 서버에서 반대로 github 에 접속하는데 1번 이렇게 상호 서로의 내용에 접속하는데 각각 사용됩니다.

보안키는 우분투 서버에서 생성합니다.

터미널에서 ssh 로 서버에 접속하여

ssh-keygen -t rsa -b 4096 -C "키설명 주로 이메일"

이렇게 입력하면 아래와 같이 질문이 나오는데 그냥 다 엔터로 지나갑니다.

Enter file in which to save the key : 저장소 위치 물음 그냥 엔터

Enter passphrase : 비번 설정 할거나교 물음 비번 넣던가 그냥 엔터(보안 설정 강화하시려면 비번 넣고 잘 보관)

Enter same passphrase again : 비번 다시 물음 위 비번 넣던가 그냥 엔터

cd ~ 하시면 내 홈 폴더로 가게 되는데 여기에서

ls -la 하시면 .ssh 폴더가 보입니다 이 폴더로 들어 갑니다.

cd .ssh 그러면 앞에서 생성한 키 파일 2개가 동시에 보이게 됩니다.

/home/{내아이디}/.ssh/id_rsa(비공개키)

/home/{내아이디}/.ssh/id_rsa.pub(공개키)

내용을 보려면

cat ~/.ssh/id_rsa 또는 .ssh 폴더에 있다면 그냥 cat id_rsa 입력하면

-----BEGIN OPENSSH PRIVATE KEY-----

{키내용} 

-----END OPENSSH PRIVATE KEY-----

이렇게 나옵니다.

위내용을 -----BEGIN OPENSSH PRIVATE KEY----- 포함 -----END OPENSSH PRIVATE KEY----- 까지 복사합니다.

마우스 드래그하고 ctrl + c 하면 됩니다.

그리고 github.com 의 프로젝트페이지의 setting(설정) 탭을 클릭하면 좌측에

Secrets and variables 메뉴 펼치면, Actions 메뉴로 클릭해서 들어갑니다.

그러면, Secrets 탭에 Repository secrets 카드가 보입니다. 여기에 키를 추가 해야합니다.

우측 상단 초록색 버튼 New repository secret 누르시면 
Name : SSH_PRIVATE_KEY
Secret : 앞에 복사한 키를 붙여 넣기 합니다.

초록 버튼 Add secret 클릭해서 추가합니다.

Secrets and variables  에 잘 등록되었는지 확인합니다. 잘등록되어 있으면 목록에 SSH_PRIVATE_KEY 가 보입니다.

그리고 

다시 서버로와서 터미널에서

authorized_keys 파일 이 있는데 이파일에 id_rsa.pub 공개키의 내용을 추가합니다.

파일을 열어서 추가해도 되고 아래와 같이

cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys

를 입력하면 간단하게 추가 됩니다.

여기까지 하셨으면 

git commit 하고 push 해보면

github.com 프로젝트 Actions(액션) 탭에 드어가시면 commit 할때 작성한 코멘트가 목록에 보이고 뭔가 작동하는 모습을 볼 수 있습니다.

해당 작동 목록을 클릭해서 들어가면 좀더 세부적인 로고의 내용을 확인할 수 있습니다.

이제 마지막으로 무중단 배포 프로그램인 pm2 를 설치하고 설정하면 배포는 설정은 끝납니다.

서버에서

sudo npm i -g pm2 

pm2설치합니다.

그리고 내컴에서 

ecosystem.config.cjs 파일을 만들고 그 안에

module.exports = {

apps: [

{

name: 'Project Name',

script: 'build/index.js',

instances: 1,

autorestart: true,

watch: false,

max_memory_restart: '1G',

env: {

NODE_ENV: 'production',

PORT: 3000

// 기타 환경 변수 설정

},

},

],

};

내용을 넣고 저장합니다.

그리고 git commit & push 하시면

자동 배포 마무리됩니다.

서버에서 해당 포트로 접속하면 배포가 되는 것을 확인 할 수 있습니다.

정상적으로 배포가 되는 것을확인하셨다면

이제는 

git commit & push 하시면 서버에 배포가 됩니다.

내컴에서 개발할때 새로고침 없어져서 편하고

배포도 github actions 이용하면 예전에 ftp 올리듯이 쉽게 원큐로 됩니다.

그러면서 형상관리는 덤이죠.

브런치를 main 으로 해놓으시면 git push 할때마다 배포가 되는데, 협업하시는 중이라면,

배포용 브런치를 따로 만드셔서 예를 들어 master 브런치를 따로 만들던가 하셔서 

최종 배포는 master 가 push 가 될때만 되도록 이렇게 이원화 하는 것도 좋은 방법입니다.