vite github pages deployer
v1.4.0
ปรับใช้แอปพลิเคชัน Vite ของคุณกับ Github Pages ได้อย่างรวดเร็ว
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 คุณควรจัดเตรียม /
ภายใต้สถานการณ์ปกติ คุณไม่จำเป็นต้องระบุ/แทนที่พารามิเตอร์นี้ การดำเนินการจะตั้งค่าเป็นชื่อ Repo ของคุณอย่างเหมาะสม
public_base_path :public_base_path ระบบจะใช้โดยไม่คำนึงถึงpublic_base_path :CNAME สำหรับการตั้งค่าโดเมนแบบกำหนดเองของหน้า GitHub ดังนั้นค่าเริ่มต้น public_base_path จะแก้ไขเป็น /CNAME ค่าเริ่มต้น public_base_path จะแก้ไขเป็น /{your-repo-name} ดูคำแนะนำสำหรับการขยาย CNAME ที่นี่
ขอขอบคุณ Greg Sadetsky สำหรับข้อเสนอของเขาในการสลับค่าเริ่มต้นของอินพุตนี้ นอกจากนี้ ขอขอบคุณสำหรับความร่วมมือของเขาในการอธิบายการตั้งค่าโดเมนแบบกำหนดเองของหน้า GitHub และขั้นตอนการทดสอบการเปลี่ยนแปลงเหล่านี้
build_path (ไม่บังคับ)| พิมพ์ | ค่าเริ่มต้น | ค่าตัวอย่าง |
|---|---|---|
string | ./dist | - ./deploy ปรับใช้- ./dist/browser |
โฟลเดอร์ใดที่คุณต้องการให้เพจ GitHub ของคุณใช้เป็นไดเร็กทอรีรากหลังจากกระบวนการสร้าง เพียงแค่มันเป็นไดเร็กทอรีเอาต์พุต build ของคุณเช่น ./dist หากการกำหนดค่า vite ของคุณส่งออกไปยังโฟลเดอร์อื่นที่ไม่ใช่ ./dist คุณควรส่งผ่านเป็นพารามิเตอร์
install_phase_node_env (ทางเลือก)| พิมพ์ | ค่าเริ่มต้น | ค่าตัวอย่าง |
|---|---|---|
string | dev | - dev- production- staging- test- my-little-pony-env |
สภาพแวดล้อมของโหนดที่จะใช้สำหรับการติดตั้งการขึ้นต่อกัน มีความจำเป็นที่คุณจะต้องใช้สภาพแวดล้อมที่มี 'vite' เป็นการพึ่งพา โดยทั่วไปและเป็นธรรมชาติ env นั้นเป็น dev
หากคุณไม่ได้ระบุ NODE_ENV ที่มี vite เป็นการพึ่งพา (ตรวจสอบ 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' เปิดอยู่ เมื่อเปิดเครื่อง ระบบจะแสดงข้อมูลบางอย่างในบางขั้นตอน ส่วนใหญ่ใช้สำหรับการพัฒนา แต่ใช้ตามที่คุณต้องการเพื่อตรวจสอบ env และตัวแปรของคุณ
github_pages_url| พิมพ์ | ค่าตัวอย่าง |
|---|---|
string | - 'https://skywarth.github.io/country-routing-algorithm-demo-vue/' |
ค่าเอาต์พุตนี้จะถูกใช้เพื่อรับ URL ของหน้า GitHub หลังจากการปรับใช้ สามารถเข้าถึงได้ดังนี้: ${{ steps.deploy_to_pages.outputs.github_pages_url }} (deploy_to_pages คือ id ของขั้นตอนที่คุณเรียกใช้ Vite Github Pages Deployer)
คาดว่าจะใช้เป็นวิธีเผยแพร่สภาพแวดล้อมระหว่างงาน เช่น:
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.
สาเหตุ: การประกาศสภาพแวดล้อมหายไปจากการดำเนินการ คุณควรเพิ่มลงในไฟล์ yaml การดำเนินการของคุณเพื่อแก้ไขข้อผิดพลาด/คำเตือน และเพื่อแสดงสภาพแวดล้อมที่เผยแพร่ในแท็บ environments ในที่เก็บ
วิธีแก้ไข: เพิ่มสิ่งต่อไปนี้ในการกระทำของคุณ:
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 ควรเหมือนกันกับ id ของขั้นตอนที่คุณเรียกใช้ Vite GitHub pages deployer ดูขั้นตอนการทำงานตัวอย่างเพื่อดูรายละเอียด
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
ดูขั้นตอนการทำงานตัวอย่าง หากคุณไม่แน่ใจว่าจะวางไว้ที่ใด
package-lock.json ไม่ปรากฏเมื่อใช้ npm เป็นตัวจัดการแพ็คเกจ ข้อผิดพลาด: The command can only install with an existing package-lock.json...
สาเหตุ: หากการตั้งค่าอินพุต package_manager ถูกตั้งค่าเป็น npm (หรือค่าเริ่มต้น ไม่ได้กำหนด) ระบบจะติดตั้งการพึ่งพาโดยใช้ npm ci ซึ่งใช้ package-lock.json ในกรณีนี้ ตรวจสอบให้แน่ใจว่า package-lock.json มีอยู่ในรูทโปรเจ็กต์ของคุณ
วิธีแก้ไข: เพิ่มไฟล์ package-lock.json ลงในโปรเจ็กต์ของคุณ หากอยู่ในไดเร็กทอรี แต่ไม่ปรากฏในที่เก็บ ให้ตรวจสอบไฟล์ gitignore ของคุณและลบออกจาก gitignore หรือคุณสามารถตั้ง yarn เป็นตัวจัดการแพ็คเกจที่คุณต้องการสำหรับการติดตั้งการพึ่งพาผ่านอินพุตพารามิเตอร์ package_manager ของการดำเนินการ
bash-files ) bash-files )มีสิ่งที่คุณต้องการหรือไม่ การดำเนินการนี้ไม่เป็นไปตามความคาดหวังของคุณ หรือขาดอนาคตที่ขัดขวางไม่ให้คุณใช้งานหรือไม่ เปิดปัญหา และเราเพิ่มลงในแผนงาน/สิ่งที่ต้องทำ ยินดีบริจาค
${{github.action_path}} : ให้ dir แก่คุณสำหรับการดำเนินการนี้เอง
${{ github.workspace }} : ให้ dir ของโครงการแก่คุณ (เช่น: /home/runner/work/country-routing-algorithm-demo-vue/country-routing-algorithm-demo-vue)
เมื่อคุณนำเข้าไฟล์ sh ใน bash shell จะสามารถเข้าถึงได้เฉพาะในระหว่างขั้นตอนนั้นเท่านั้น เนื่องจากแต่ละขั้นตอนมีเปลือกในตัวมันเอง
ภายในไฟล์ 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 แต่เห็นได้ชัดว่าไม่มีทางที่จะบรรลุเป้าหมายได้
