SvelteKit + 서지
6062 단어 githubsurgejavascriptsvelte
이 로그 항목에서는 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
브랜치에 코드를 푸시할 때마다 웹사이트가 업데이트됩니다.
Reference
이 문제에 관하여(SvelteKit + 서지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/alexanderczigler/sveltekit-surge-b4h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)