vite github pages deployer
v1.4.0
Vite 애플리케이션을 Github 페이지에 한 눈에 배포하세요.
vite build 도구로 사용하는 한 모든 프런트엔드 프레임워크에서 사용할 수 있습니다. Vue, React, Svelte... 이름을 지정하세요! - name: Vite Github Pages Deployer
uses: skywarth/[email protected]
이 작업을 작업의 yaml 파일에 적절하게 추가하기만 하면 사용할 수 있습니다.
이 단계는 '결제' 단계 뒤에 배치하세요.
- name : Vite Github Pages Deployer
uses : skywarth/[email protected]
id : deploy_to_pages steps 바로 앞에 환경 섹션을 배치해야 합니다. 이를 통해 환경 탭에서 환경을 릴리스할 수 있습니다.
environment :
name : demo
url : ${{ steps.deploy_to_pages.outputs.github_pages_url }}환경 및 아티팩트를 성공적으로 릴리스하려면 작업에 대한 적절한 권한을 설정해야 합니다. 그렇지 않으면 권한 오류가 발생할 수 있습니다.
권한 선언은 jobs: 섹션.
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions :
contents : read
pages : write
id-token : write무엇을 해야 할지, 어떤 작업이 무엇인지, 사용법 섹션에서 코드 조각을 어디에 배치해야 할지 모르는 경우 다음 단계를 따르세요.
./.github/workflows/vite-github-pages-deploy.yml 경로에 작업 파일을 만듭니다. 따라서 본질적으로 프로젝트 루트에 .github 폴더를 만들고 거기에 yml 파일을 만듭니다.master 브랜치로 푸시하거나 작업 탭에서 다음 수동 실행 시 이 작업이 실행되고 프로젝트가 github 페이지에 배포됩니다. name : Vite Github Pages Deploy
on :
# Runs on pushes targeting the default branch
push :
branches : ["master", "main"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch :
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions :
contents : read
pages : write
id-token : write
concurrency :
group : " pages "
cancel-in-progress : false
jobs :
# Build job
build :
runs-on : ubuntu-latest
environment :
name : demo
url : ${{ steps.deploy_to_pages.outputs.github_pages_url }}
steps :
- name : Checkout
uses : actions/checkout@v3
- name : Vite Github Pages Deployer
uses : skywarth/vite-github-pages-deployer@master
id : deploy_to_pages
실제로 보고 싶으십니까? 물론입니다. 이 vue 프로젝트로 이동하여 실시간으로 확인하세요: https://github.com/skywarth/country-routing-algorithm-demo-vue
public_base_path (선택사항)| 유형 | 기본 | 예시 값 |
|---|---|---|
string | /{your-repo-name} 또는 / CNAME이 있는 경우 | /my-vite-project |
Vite의 공개 기본 경로 문자열은 라우팅, 기록 및 자산 링크에 영향을 미칩니다. GitHub Pages는 하위 도메인 아래 디렉터리에 앱을 저장하므로 적절하게 제공해야 합니다. Vercel과 같은 대체 플랫폼에 배포할 계획이라면 간단히 / 제공해야 합니다.
일반적인 상황에서는 이 매개변수를 제공/재정의할 필요가 없습니다. 조치를 취하면 해당 매개변수가 저장소 이름으로 적절하게 설정됩니다.
public_base_path 해결되는 방법은 다음과 같습니다.public_base_path 매개변수/입력이 제공되면 관계없이 사용됩니다.public_base_path 매개변수/입력이 제공되지 않은 경우:CNAME 파일이 있는 경우 public_base_path 기본값은 / 로 확인됩니다.CNAME 없으면 public_base_path 기본값은 /{your-repo-name} 으로 확인됩니다. 여기에서 CNAME 확장에 대한 제안을 확인하세요.
이 입력의 대체 기본값에 대한 제안에 대해 Greg Sadetsky에게 감사드립니다. 또한 GitHub 페이지 사용자 정의 도메인 설정 및 이러한 변경 사항의 테스트 단계를 설명하는 데 협력해 주셔서 감사합니다.
build_path (선택사항)| 유형 | 기본 | 예시 값 |
|---|---|---|
string | ./dist | - ./deploy- ./dist/browser |
빌드 프로세스 후에 GitHub 페이지를 루트 디렉터리로 사용하려는 폴더를 선택하세요. 간단히 말해 ./dist 와 같은 빌드 출력 디렉터리입니다. vite 구성을 ./dist 이외의 폴더로 내보내는 경우 이를 매개변수로 전달해야 합니다.
install_phase_node_env (선택 사항)| 유형 | 기본 | 예시 값 |
|---|---|---|
string | dev | - dev- production- staging- test- my-little-pony-env |
종속성 설치에 사용될 노드 환경입니다. 종속성으로 'vite'가 있는 환경을 사용하는 것이 중요합니다 . 일반적으로 자연스럽게 해당 env는 dev 입니다.
vite 종속성으로 포함하는 NODE_ENV를 제공하지 않으면(package.json 확인) 빌드 단계에서 sh: 1: vite: not found 받게 됩니다.
build_phase_node_env (선택 사항)| 유형 | 기본 | 예시 값 |
|---|---|---|
string | production | - dev- production- staging- test- my-little-pony-env |
빌드 단계에 사용될 노드 환경입니다. 노드 빌드는 환경에 따라 변경되는 경향이 있으므로 유효한 NODE_ENV 값을 제공할 수 있습니다(예: 프로덕션에서 디버깅 기능 숨기기).
artifact_name (선택사항)| 유형 | 기본 | 예시 값 |
|---|---|---|
string | github-pages | - what-a-cool-artifact- ah-yes-ze-artifact |
노출된 아티팩트의 원하는 이름입니다. 이 이름은 작업에 표시되며 아티팩트 이름으로 사용됩니다.
package_manager (선택사항)| 유형 | 기본 | 예시 값 |
|---|---|---|
string | npm | - npm- yarn |
선호하는 패키지 관리자를 나타냅니다. 종속성을 설치하고 dist 빌드하는 데 사용됩니다. 예를 들어 프로젝트의 패키지 관리자로 yarn 선호/사용하는 경우 package_manager: 'yarn' 입력으로 전달한 다음 yarn install 및 yarn build 로 사용할 수 있습니다.
debug_mode (선택사항)| 유형 | 기본 | 예시 값 |
|---|---|---|
string | 'false' | - 'true'- 'false' |
디버그 모드를 제어합니다. 문자열, 'true' on입니다. 켜져 있으면 특정 단계에 대한 특정 정보가 출력됩니다. 주로 개발에 사용되지만 환경 및 변수를 검사하는 데 원하는 대로 사용하십시오.
github_pages_url| 유형 | 예시 값 |
|---|---|
string | - 'https://skywarth.github.io/country-routing-algorithm-demo-vue/' |
이 출력 값은 배포 후 github 페이지 URL을 획득하는 데 사용됩니다. 다음과 같이 액세스할 수 있습니다: ${{ steps.deploy_to_pages.outputs.github_pages_url }} (deploy_to_pages는 Vite Github Pages Deployer를 실행하는 단계의 ID입니다).
다음과 같이 작업 중에 환경을 게시하는 방법으로 사용될 것으로 예상됩니다.
environment:
name: demo
url: ${{ steps.deploy_to_pages.outputs.github_pages_url }}
이 출력을 활용하는 방법을 파악하려면 예제 워크플로를 참조하세요.
오류: Environment URL '' is not a valid http(s) URL, so it will not be shown as a link in the workflow graph.
원인: 작업에서 환경 선언이 누락되었습니다. 오류/경고를 해결하고 저장소의 environments 탭에 릴리스된 환경을 표시하려면 작업 yaml 파일에 이를 추가해야 합니다.
해결 방법: 작업에 다음을 추가하세요.
environment :
# Name could be whatever you wish. It'll be visible publicly under the environments tab.
name : demo
url : ${{ steps.deploy_to_pages.outputs.github_pages_url }}deploy_to_pages 이름은 Vite GitHub pages deployer 실행하는 단계의 id 와 동일해야 합니다. 자세한 내용은 예시 워크플로를 참조하세요.
GITHUB_TOKEN 에 대한 권한 요구 사항 누락 오류: Error: Ensure GITHUB_TOKEN has permission "id-token: write".
원인: 사용 섹션에 표시된 대로 권한이 설정되지 않았습니다. 작업에 적절한 권한이 부여되지 않으면 아티팩트를 생성하거나 환경을 생성할 수 없습니다.
해결 방법: 작업 yaml 파일에 대한 권한에 대한 다음 코드를 추가합니다.
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
어디에 배치해야 할지 잘 모르겠으면 예제 워크플로를 참조하세요.
npm 패키지 관리자 기본 설정으로 사용할 때 package-lock.json 존재하지 않습니다. 오류: npm ci The command can only install with an existing package-lock.json...
원인: package_manager 입력 기본 설정이 npm (또는 기본값, 할당되지 않음)으로 설정된 경우 package-lock.json 활용하는 npm ci 사용하여 종속성을 설치합니다. 이 경우 프로젝트 루트에 package-lock.json 이 있는지 확인하세요.
해결 방법: 프로젝트에 package-lock.json 파일을 추가하세요. 디렉토리에 있지만 저장소에 나타나지 않으면 gitignore 파일을 확인하고 gitignore에서 제거하십시오. 또는 작업의 package_manager 매개변수 입력을 통해 yarn 종속성 설치를 위한 기본 패키지 관리자로 설정할 수 있습니다.
bash-files 분기 참조) bash-files 분기 참조)필요한 것이 있습니까? 이 작업이 기대에 미치지 못합니까, 아니면 사용을 방해하는 특정 미래가 부족합니까? 문제를 열면 로드맵/TODO에 추가합니다. 기여를 환영합니다.
${{github.action_path}} : 이 작업 자체에 대한 디렉토리를 제공합니다.
${{ github.workspace }} : 프로젝트 디렉토리를 제공합니다(예: /home/runner/work/country-routing-algorithm-demo-vue/country-routing-algorithm-demo-vue)
bash 셸에서 sh 파일을 가져오면 해당 단계에서만 액세스할 수 있습니다. 이는 각 단계가 그 자체로 하나의 셸이기 때문입니다.
별도의 sh 파일 내에서 해당 대문자 이름으로 작업의 입력 변수에 액세스할 수 있습니다. 예를 들어:
inputs:
package_manager:
description: "Your preference of package manager: 'npm' and 'yarn' are possible values."
required: false
default: 'npm'
${{ inputs.package_manager }}sh 파일 내에서 이 입력에 액세스: $PACKAGE_MANAGER env:
SOME_OTHER_NAME: ${{ inputs.package_manager }}
sh 파일을 단계적으로 실행하는 경우 각 셸이 환경을 공유할 것이라고 기대하지 마세요. 예를 들어 한 단계에서는 install.sh에 종속성을 설치하고 다른 단계에서는 build.sh를 통해 빌드합니다. 설치된 libs는 install.sh 단계에서만 사용할 수 있으므로 작동하지 않습니다. 이것이 bash-files 실패한 이유입니다. GPT에 문의했지만 분명히 이를 달성할 방법이 없습니다.
