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 : write
Jika 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.