部署你的 Astro 網站
準備好建構並部署你的 Astro 網站嗎? 跟著我們的部署服務指南,或繼續下滑了解關於 Astro 網站的基本部署方法。
快速部署選項
Section titled “快速部署選項”Astro 網站可透過儀錶板或 CLI 快速建構並部署到數個主機上。
其中一個快速部署網站的方式是透過連結 Astro 專案的線上 Git 程式庫(如 GitHub、GitLab、Bitbucket)到服務主機提供者,接者利用 Git 之便來持續部署。
這些服務主機平台會自動偵測 Astro 專案來源程式庫的推送,接著建構網站並部署到自訂的 URL 或個人網域。通常這些平台的部署設定包含下列幾個步驟:
-
將你的程式庫加到線上 Git 提供者(例如 GitHub、GitLab、Bitbucket)。
-
選擇支援持續部署的服務主機(例如 Netlify (EN) 或 Vercel (EN)),接著引入你的 Git 程式庫作為新網站或專案。
許多常見的服務主機都能辨識出 Astro 網站,並依此選擇適當的設定以建構及部署,如下所示(若不同的話,也可修改這些設定):
- 建構指令:
astro build
或npm run build
- 發布目錄:
dist
- 建構指令:
-
點選「Deploy」,接著你的新網站就會在服務主機上建立並分配到專屬的 URL(例如
new-astro-site.netlify.app
)。
這些服務主機會自動監看 Git 提供者的主要分支更動,每當有新的提交,便會重新建構並發布網站。這些設定通常可在服務主機提供者的儀表板 UI 上調整。
CLI 部署
Section titled “CLI 部署”有些服務主機有他們自己的命令列(CLI),你可以用 npm 將其全域安裝到主機上。使用 CLI 部署的情況通常如下所示:
-
全域安裝服務主機的 CLI。例如:
終端機視窗 npm install --global netlify-cli終端機視窗 pnpm add --global netlify-cli終端機視窗 yarn global add netlify-cli -
執行 CLI 並按照指示授權與設定等等。
-
建構網站並部署到服務主機
許多常見的服務主機都能辨識出 Astro 網站,並依此選擇適當的設定以建構及部署,如下所示(若不同的話,也可修改這些設定):
- 建構指令:
astro build
或npm run build
- 發布目錄:
dist
其他服務主機則會要求你先在本地端建構你的網站,接著用命令列部署。
- 建構指令:
在本地端建構你的網站
Section titled “在本地端建構你的網站”許多服務主機像是 Netlify 和 Vercel 會為你建構網站並發布建立好的輸出檔到網路上。但有些網站會要求你在本地端建構,接著執行部署指令或上傳你建立好的輸出檔。
你可能也會希望先在本地端建構、預覽你的網站,或在自己的環境下找出任何潛在的錯誤或警告。
執行 npm run build
指令以建構 Astro 網站。
npm run build
pnpm run build
yarn run build
建構後的輸出檔預設會放在 dist/
,目錄位置可透過 outDir
設定 (EN)調整。
為 SSR 新增配接器
Section titled “為 SSR 新增配接器”以 SSR(伺服器端算繪) (EN)部署 Astro 網站之前,請先確定以下事項:
- 在專案相依模組安裝適當的配接器 (EN)(手動安裝,或用配接器的
astro add
指令,例如npx astro add netlify
)。 - 若是手動安裝,新增配接器 (EN)到
astro.config.mjs
的 import 和 default export。(astro add
指令會為你執行這步驟!)