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، فيجب عليك ببساطة توفير / .
في الظروف العادية، لا تحتاج إلى توفير/تجاوز هذه المعلمة، وسيقوم الإجراء بتعيينها على اسم الريبو الخاص بك بشكل مناسب.
public_base_path :public_base_path ، فسيتم استخدامه بغض النظر.public_base_path :CNAME لإعداد المجال المخصص لصفحات GitHub، فسيتم حل القيمة الافتراضية public_base_path إلى /CNAME ، فسيتم تحويل القيمة الافتراضية public_base_path إلى /{your-repo-name} راجع اقتراح توسيع CNAME هنا
ممتن لجريج ساديتسكي لاقتراحه بشأن القيمة الافتراضية البديلة لهذا الإدخال. كما نشكره على تعاونه في شرح إعداد النطاق المخصص لصفحات 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 .
إذا لم تقم بتوفير 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' قيد التشغيل. عند تشغيله، فإنه سيتم إخراج معلومات معينة في خطوات معينة. يستخدم بشكل أساسي للتطوير، ولكن استخدمه كما يحلو لك لفحص بيئتك ومتغيراتك.
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 هو معرف الخطوة التي تقوم فيها بتشغيل 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 npm ci 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}} : يمنحك الدليل لهذا الإجراء نفسه.
${{ github.workspace }} : يمنحك دليل المشروع (على سبيل المثال: /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 ولكن يبدو أنه لا توجد طريقة لتحقيق ذلك.
