SvelteKit + 서지

그래서 저는 이미 몇 가지 프로젝트에서 Svelte와 Sapper를 사용해 보았고 처음 시도하는 동안 매우 빠르게 사랑에 빠졌습니다. 나는 Svelte가 내 마음에 딱 맞는 완벽한 수준의 단순함을 가지고 있다고 생각합니다. Sapper와 이제 SvelteKit은 단일 페이지 애플리케이션 이상을 만들고 싶을 때마다 내장된 라우팅 등으로 상황을 더욱 좋게 만들었습니다.

이 로그 항목에서는 SvelteKit 프로젝트를 설정하고 surge을 사용하여 정적 웹 사이트로 배포하는 기본 사항을 다룰 것입니다.

빈 프로젝트 만들기

npm init 명령을 사용하여 새 프로젝트를 설정할 수 있습니다. 이 명령은 SvelteKit 데모 앱을 원하는지 아니면 Skeleton 프로젝트(빈 사이트)를 원하는지 묻습니다. Skeleton 프로젝트에는 그 위에 사이트를 구축하는 데 필요한 모든 것이 있지만 예제를 보고 싶다면 데모 앱을 선택할 수 있습니다.

# NOTE: I am using node stable (17) for this.
# Create a new SvelteKit site inside the folder "my-website".
npm init svelte@next my-website

이 작업을 마치면 디렉토리로 이동하여 실행하여 사이트가 어떻게 보이는지 확인하십시오.

cd my-website
npm install

npm run dev -- --host --open
# The --host flag is optional but convenient if you want to view your site from your phone for example.

https://kit.svelte.dev/docs에 훌륭한 문서가 있으므로 여기에서는 Svelte의 기본 사항에 대해 자세히 설명하지 않겠습니다.

정적 사이트 구축 및 배포

npm run dev 명령을 로컬로 실행하면 사용자의 편의를 위해 사이트가 라이브 다시 로드와 함께 노드 프로세스로 호스팅됩니다. 그러나 배포하려는 경우 GitHub Pages 또는 surge 과 같은 정적 웹 호스트만 있으면 됩니다.

SvelteKit에는 정적 사이트를 컴파일하는 빌드 명령이 함께 제공됩니다. 프로젝트 내의 build 폴더에 모든 것을 출력합니다.

npm run build

배포 중

이 로그에서는 급증을 사용합니다. 저는 명령줄을 통해 모든 것을 할 수 있고 예를 들어 자체 고유 URL에 기능 분기를 배포하는 것이 매우 쉽기 때문에 급증을 좋아합니다. 먼저 npm을 사용하여 전체적으로urge를 설치한 다음 명령줄 앱을 실행하기만 하면 됩니다. 서지를 처음 실행하면 계정을 생성하라는 메시지가 표시됩니다.

# Make surge available globally.
npm install -g surge

# Deploy a first version.
# NOTE: When asked about project simply add "build" to the suggested path.
#       When asked about domain, accept the suggested domain for now.
surge

그리고 짜잔! 귀하의 새로운 SvelteKit 웹사이트가 운영 중입니다.

맞춤 도메인

서지로 배포할 때 자체 도메인을 사용하기 쉽습니다. 서지를 실행하고 제안을 선택하는 대신 원하는 도메인을 대신 입력하십시오. 그런 다음 Surge에서 DNS 구성 방법을 알려줍니다.

GitHub 작업

이제 GitHub를 사용한다고 가정하면 메인 브랜치에 무언가를 푸시/병합할 때마다 웹 사이트가 자동으로 배포되기를 원할 수 있습니다. 이는 Damian Świstowski's GitHub Action을 사용하여 쉽게 달성할 수 있습니다.

먼저 GitHub 리포지토리에 몇 가지 비밀을 만들어야 합니다. 이는 설정 -> 비밀 페이지를 통해 수행됩니다. 급증 시 등록하는 데 사용한 이메일 주소가 포함된 surge_login라는 암호를 추가합니다. 그런 다음 명령줄에서 surge_token를 실행하여 얻은 surge token라는 또 다른 암호를 추가합니다. (암호를 취급하는 것처럼 이 토큰을 취급하십시오!)

이 두 가지 비밀이 준비되면 리포지토리에 다음 워크플로우를 추가할 수 있습니다. GitHub Actions에 익숙하지 않은 경우; 리포지토리 내에 .github/workflows라는 폴더를 만듭니다. 그런 다음 deploy.yaml라는 파일을 만들고 다음 코드를 붙여넣습니다.

name: Publish

on:
  push:
    branches:
      - main # Limit deploys to the "main" branch

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - name: Clone repo
        uses: actions/checkout@v2

      - name: Build
        uses: actions/setup-node@v2
        with:
          node-version: 17.x
      - run: npm ci
      - run: npm run build

      - name: Publish to surge.sh
        uses: dswistowski/[email protected]
        with:
          domain: 'www.my-domain.dev' # Your custom domain (change this!)
          project: 'build' # Deploy the contents of the build dir
          login: ${{ secrets.surge_login }}
          token: ${{ secrets.surge_token }}

25행에서 도메인을 변경해야 합니다!

이제 main 브랜치에 코드를 푸시할 때마다 웹사이트가 업데이트됩니다.