Deploy aplikasi Vite Anda ke Halaman Github, sekilas.
vite sebagai alat build Anda. Vue, React, Svelte... Sebut saja! - name: Vite Github Pages Deployer
uses: skywarth/[email protected]
Anda dapat menggunakan tindakan ini hanya dengan menambahkannya ke file yaml tindakan Anda dengan tepat.
Pastikan untuk menempatkan langkah ini setelah langkah 'checkout' Anda.
- name : Vite Github Pages Deployer
uses : skywarth/[email protected]
id : deploy_to_pages Anda harus menempatkan bagian lingkungan tepat sebelum steps . Ini memungkinkan pelepasan lingkungan, di bawah tab lingkungan.
environment :
name : demo
url : ${{ steps.deploy_to_pages.outputs.github_pages_url }}Anda perlu mengatur izin yang tepat untuk tindakan tersebut, agar berhasil melepaskan lingkungan dan artefak. Jika tidak, Anda mungkin menerima kesalahan izin.
Pernyataan izin dapat ditempatkan di mana saja sebelum bagian jobs: :.
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions :
contents : read
pages : write
id-token : writeJika Anda tidak tahu apa yang harus dilakukan, tindakan apa, atau di mana menempatkan potongan kode di bagian penggunaan, ikuti langkah-langkah berikut:
./.github/workflows/vite-github-pages-deploy.yml . Jadi intinya buat folder .github di root proyek Anda, dan buat file yml di sana.master , atau manual berikutnya dijalankan dari tab tindakan, tindakan ini akan berjalan dan proyek Anda akan diterapkan ke halaman 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
Ingin melihatnya beraksi? Tentu saja, kunjungi proyek vue ini untuk melihatnya secara langsung: https://github.com/skywarth/country-routing-algorithm-demo-vue
public_base_path (opsional)| Jenis | Bawaan | Contoh Nilai |
|---|---|---|
string | /{your-repo-name} ATAU / jika Anda memiliki CNAME | /my-vite-project |
String jalur basis publik untuk Vite, ini memengaruhi perutean, riwayat, dan tautan aset. Pastikan untuk menyediakan dengan tepat karena Halaman GitHub menyimpan aplikasi Anda dalam direktori di bawah subdomain. Jika Anda berencana menerapkan ke platform alternatif seperti Vercel, Anda cukup menyediakan / .
Dalam keadaan normal, Anda tidak perlu menyediakan/mengganti parameter ini, tindakan akan menyetelnya ke nama repo Anda dengan tepat.
public_base_path diselesaikan:public_base_path diberikan, maka parameter tersebut akan tetap digunakan.public_base_path TIDAK disediakan:CNAME untuk pengaturan Domain Kustom Halaman GitHub, maka nilai default public_base_path akan ditetapkan ke /CNAME , nilai default public_base_path akan ditetapkan menjadi /{your-repo-name} Lihat saran untuk perluasan CNAME di sini
Berterima kasih kepada Greg Sadetsky atas proposisinya tentang nilai default bergantian dari input ini. Juga, terima kasih atas kolaborasinya dalam menjelaskan pengaturan domain khusus halaman GitHub dan fase pengujian perubahan ini.
build_path (opsional)| Jenis | Bawaan | Contoh Nilai |
|---|---|---|
string | ./dist | - ./deploy- ./dist/browser |
Folder mana yang Anda ingin Halaman GitHub Anda gunakan sebagai direktori root, setelah proses pembuatan. Sederhananya itu adalah direktori keluaran build Anda seperti ./dist . Jika konfigurasi vite Anda diekspor ke folder selain ./dist , maka Anda harus meneruskannya sebagai parameter.
install_phase_node_env (opsional)| Jenis | Bawaan | Contoh Nilai |
|---|---|---|
string | dev | - dev- production- staging- test- my-little-pony-env |
Lingkungan node yang akan digunakan untuk instalasi dependensi. Anda harus menggunakan lingkungan yang memiliki 'vite' sebagai ketergantungan . Secara umum dan alami, env itu adalah dev .
Jika Anda tidak menyediakan NODE_ENV yang memiliki vite sebagai ketergantungan (periksa package.json Anda), Anda akan menerima sh: 1: vite: not found selama fase build.
build_phase_node_env (opsional)| Jenis | Bawaan | Contoh Nilai |
|---|---|---|
string | production | - dev- production- staging- test- my-little-pony-env |
Lingkungan node yang akan digunakan untuk fase build. Anda dapat memberikan nilai NODE_ENV yang valid untuk ini, karena pembuatan node cenderung berubah untuk lingkungan yang berbeda (misalnya: Anda menyembunyikan fitur debug dari produksi).
artifact_name (opsional)| Jenis | Bawaan | Contoh Nilai |
|---|---|---|
string | github-pages | - what-a-cool-artifact- ah-yes-ze-artifact |
Nama yang diinginkan untuk artefak yang terbuka. Nama ini terlihat di pekerjaan dan digunakan sebagai nama artefak.
package_manager (opsional)| Jenis | Bawaan | Contoh Nilai |
|---|---|---|
string | npm | - npm- yarn |
Tunjukkan manajer paket pilihan. Ini akan digunakan untuk menginstal dependensi dan membangun dist . Misalnya jika Anda lebih suka/menggunakan yarn sebagai manajer paket untuk proyek tersebut, maka Anda dapat meneruskan package_manager: 'yarn' sebagai input yang kemudian akan digunakan sebagai yarn install dan yarn build .
debug_mode (opsional)| Jenis | Bawaan | Contoh Nilai |
|---|---|---|
string | 'false' | - 'true'- 'false' |
Mengontrol mode debug, string, 'true' untuk aktif. Saat dihidupkan, ini akan menampilkan informasi tertentu tentang langkah-langkah tertentu. Terutama digunakan untuk pengembangan, tetapi gunakan sesuka Anda untuk memeriksa env dan variabel Anda.
github_pages_url| Jenis | Contoh Nilai |
|---|---|
string | - 'https://skywarth.github.io/country-routing-algorithm-demo-vue/' |
Nilai keluaran ini akan digunakan untuk memperoleh url halaman github setelah penerapan. Itu dapat diakses seperti ini: ${{ steps.deploy_to_pages.outputs.github_pages_url }} (deploy_to_pages adalah id dari langkah yang Anda jalankan Vite Github Pages Deployer).
Hal ini diharapkan dapat digunakan sebagai cara untuk mempublikasikan lingkungan selama bekerja, seperti:
environment:
name: demo
url: ${{ steps.deploy_to_pages.outputs.github_pages_url }}
Lihat contoh alur kerja untuk memahami cara memanfaatkan keluaran ini
Kesalahan: Environment URL '' is not a valid http(s) URL, so it will not be shown as a link in the workflow graph.
Penyebab: Deklarasi lingkungan tidak ada dalam tindakan, Anda harus menambahkannya ke file yaml tindakan Anda untuk mengatasi kesalahan/peringatan dan untuk menampilkan lingkungan yang dirilis di tab environments di repositori.
Solusi: Tambahkan yang berikut ini ke tindakan Anda:
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 harus sama dengan id langkah yang Anda jalankan Vite GitHub pages deployer . Lihat contoh alur kerja untuk detailnya.
GITHUB_TOKEN tidak ada Kesalahan: Error: Ensure GITHUB_TOKEN has permission "id-token: write".
Penyebab: Izin tidak ditetapkan seperti yang ditunjukkan di bagian penggunaan. Jika izin yang tepat tidak diberikan pada tindakan tersebut, tindakan tersebut tidak akan dapat membuat artefak atau membuat lingkungan.
Solusi: Tambahkan kode berikut tentang izin ke file yaml tindakan Anda.
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
Lihat contoh alur kerja jika Anda tidak yakin di mana menempatkannya.
package-lock.json tidak ada saat menggunakan npm sebagai preferensi manajer paket. Kesalahan: The npm ci command can only install with an existing package-lock.json...
Penyebab: Jika preferensi input package_manager disetel ke npm (atau default, tidak ditetapkan), dependensi akan diinstal menggunakan npm ci yang memanfaatkan package-lock.json . Dalam hal ini pastikan package-lock.json ada di root proyek Anda.
Solusi: Tambahkan file package-lock.json ke proyek Anda. Jika ada di direktori tetapi tidak muncul di repositori, periksa file gitignore Anda dan hapus dari gitignore. Alternatifnya, Anda dapat menetapkan yarn sebagai manajer paket pilihan Anda untuk instalasi ketergantungan melalui input parameter package_manager dari tindakan tersebut.
bash-files ) bash-files )Apakah ada sesuatu yang Anda perlukan, apakah tindakan ini gagal memenuhi harapan Anda atau tidak ada masa depan tertentu yang menghalangi Anda untuk menggunakannya? Buka sebuah masalah, dan kami menambahkannya ke peta jalan/TODO. Kontribusi dipersilakan.
${{github.action_path}} : Memberi Anda direktori untuk tindakan ini sendiri.
${{ github.workspace }} : Memberi Anda direktori proyek (Misalnya: /home/runner/work/country-routing-algorithm-demo-vue/country-routing-algorithm-demo-vue)
Saat Anda mengimpor file sh di bash shell, file tersebut hanya dapat diakses selama langkah itu saja. Hal ini disebabkan oleh fakta bahwa setiap langkah merupakan cangkang tersendiri.
Di dalam file sh terpisah, Anda dapat mengakses variabel input tindakan dengan nama huruf besar masing-masing. Misalnya:
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 }}
Jika Anda menjalankan file sh secara bertahap, jangan berharap setiap shell berbagi lingkungan. Misalnya dalam satu langkah Anda menginstal dependensi di install.sh, di langkah lain Anda membangun dengan build.sh. Ini tidak akan berfungsi karena lib yang diinstal hanya tersedia untuk langkah install.sh. Inilah sebabnya mengapa bash-files gagal, saya berkonsultasi dengan GPT tetapi ternyata tidak ada cara untuk mencapainya.