部署靜態網站
以下指南基於一些共同的假設
- 您正在使用預設的建置輸出位置 (
dist
)。此位置可以使用build.outDir
進行變更,並且您可以在這種情況下從這些指南中推斷出說明。 - 您正在使用 npm。如果您使用 Yarn 或其他套件管理器,可以使用等效的命令來執行腳本。
- Vite 已作為本機開發依賴項安裝在您的專案中,並且您已設定以下 npm 腳本
{
"scripts": {
"build": "vite build",
"preview": "vite preview"
}
}
請務必注意,vite preview
旨在於在本機預覽建置,而不是作為生產伺服器。
注意
這些指南提供了執行 Vite 網站靜態部署的說明。Vite 也支援伺服器端渲染。SSR 是指支援在 Node.js 中執行相同應用程式、將其預先渲染為 HTML,並最終在用戶端進行水合的前端框架。請查看SSR 指南以了解此功能。另一方面,如果您正在尋找與傳統伺服器端框架的整合,請改為查看後端整合指南。
建置應用程式
您可以執行 npm run build
命令來建置應用程式。
$ npm run build
預設情況下,建置輸出將放置在 dist
。您可以將此 dist
資料夾部署到您偏好的任何平台。
在本機測試應用程式
建置應用程式後,您可以執行 npm run preview
命令在本機進行測試。
$ npm run preview
vite preview
命令將啟動一個本機靜態網路伺服器,該伺服器在 https://127.0.0.1:4173
上提供來自 dist
的檔案。這是一種簡單的方式來檢查生產版本在您的本機環境中看起來是否正常。
您可以透過傳遞 --port
標誌作為參數來設定伺服器的連接埠。
{
"scripts": {
"preview": "vite preview --port 8080"
}
}
現在,preview
命令將在 https://127.0.0.1:8080
上啟動伺服器。
GitHub Pages
在
vite.config.js
中設定正確的base
。如果您要部署到
https://<USERNAME>.github.io/
,或透過 GitHub Pages 部署到自訂網域 (例如www.example.com
),請將base
設定為'/'
。或者,您可以從設定中移除base
,因為它預設為'/'
。如果您要部署到
https://<USERNAME>.github.io/<REPO>/
(例如,您的儲存庫位於https://github.com/<USERNAME>/<REPO>
),則將base
設定為'/<REPO>/'
。前往您儲存庫設定頁面中的 GitHub Pages 設定,並選擇部署來源為「GitHub Actions」,這將引導您建立一個工作流程來建置和部署您的專案,並提供一個安裝相依性並使用 npm 進行建置的範例工作流程
yml# Simple workflow for deploying static content to GitHub Pages name: Deploy static content to Pages on: # Runs on pushes targeting the default branch push: branches: ['main'] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: # Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages permissions: contents: read pages: write id-token: write # Allow one concurrent deployment concurrency: group: 'pages' cancel-in-progress: true jobs: # Single deploy job since we're just deploying deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Set up Node uses: actions/setup-node@v4 with: node-version: 20 cache: 'npm' - name: Install dependencies run: npm ci - name: Build run: npm run build - name: Setup Pages uses: actions/configure-pages@v4 - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: # Upload dist folder path: './dist' - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v4
GitLab Pages 和 GitLab CI
在
vite.config.js
中設定正確的base
。如果您要部署到
https://<USERNAME or GROUP>.gitlab.io/
,則可以省略base
,因為它預設為'/'
。如果您要部署到
https://<USERNAME or GROUP>.gitlab.io/<REPO>/
,例如您的儲存庫位於https://gitlab.com/<USERNAME>/<REPO>
,則將base
設定為'/<REPO>/'
。在您的專案根目錄中建立一個名為
.gitlab-ci.yml
的檔案,並包含以下內容。當您對內容進行變更時,這將建置和部署您的網站yamlimage: node:16.5.0 pages: stage: deploy cache: key: files: - package-lock.json prefix: npm paths: - node_modules/ script: - npm install - npm run build - cp -a dist/. public/ artifacts: paths: - public rules: - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
Netlify
Netlify CLI
- 安裝 Netlify CLI。
- 使用
ntl init
建立一個新網站。 - 使用
ntl deploy
部署。
# Install the Netlify CLI
$ npm install -g netlify-cli
# Create a new site in Netlify
$ ntl init
# Deploy to a unique preview URL
$ ntl deploy
Netlify CLI 將與您分享一個預覽 URL 以進行檢查。當您準備好進入生產環境時,請使用 prod
標誌
# Deploy the site into production
$ ntl deploy --prod
使用 Git 的 Netlify
- 將您的程式碼推送至 git 儲存庫 (GitHub、GitLab、BitBucket、Azure DevOps)。
- 將專案匯入至 Netlify。
- 選擇分支、輸出目錄,並在適用的情況下設定環境變數。
- 按一下 Deploy。
- 您的 Vite 應用程式已部署!
在您的專案匯入並部署後,所有後續對生產分支以外的分支的推送以及提取請求都將產生預覽部署,並且對生產分支 (通常為「main」) 所做的所有變更都將導致生產部署。
Vercel
Vercel CLI
- 安裝 Vercel CLI 並執行
vercel
以進行部署。 - Vercel 將偵測到您正在使用 Vite,並將為您的部署啟用正確的設定。
- 您的應用程式已部署!(例如,vite-vue-template.vercel.app)
$ npm i -g vercel
$ vercel init vite
Vercel CLI
> Success! Initialized "vite" example in ~/your-folder.
- To deploy, `cd vite` and run `vercel`.
使用 Git 的 Vercel
- 將您的程式碼推送至您的 git 儲存庫 (GitHub、GitLab、Bitbucket)。
- 將您的 Vite 專案匯入至 Vercel。
- Vercel 將偵測到您正在使用 Vite,並將為您的部署啟用正確的設定。
- 您的應用程式已部署!(例如,vite-vue-template.vercel.app)
在您的專案匯入並部署後,所有後續對分支的推送都將產生預覽部署,並且對生產分支 (通常為「main」) 所做的所有變更都將導致生產部署。
了解更多關於 Vercel 的 Git 整合。
Cloudflare Pages
透過 Wrangler 的 Cloudflare Pages
- 安裝 Wrangler CLI。
- 使用
wrangler login
使用您的 Cloudflare 帳戶驗證 Wrangler。 - 執行您的建置命令。
- 使用
npx wrangler pages deploy dist
部署。
# Install Wrangler CLI
$ npm install -g wrangler
# Login to Cloudflare account from CLI
$ wrangler login
# Run your build command
$ npm run build
# Create new deployment
$ npx wrangler pages deploy dist
在您的資產上傳後,Wrangler 將為您提供一個預覽 URL 以檢查您的網站。當您登入 Cloudflare Pages 儀表板時,您將看到您的新專案。
使用 Git 的 Cloudflare Pages
- 將您的程式碼推送至您的 git 儲存庫 (GitHub、GitLab)。
- 登入 Cloudflare 儀表板,並在 帳戶主頁 > 頁面 中選取您的帳戶。
- 選取 建立新專案 和 連接 Git 選項。
- 選取您要部署的 git 專案,然後按一下 開始設定
- 根據您已選取的 Vite 框架,在建置設定中選取對應的框架預設。
- 然後儲存並部署!
- 您的應用程式已部署!(例如
https://<PROJECTNAME>.pages.dev/
)
在您的專案匯入並部署後,所有後續對分支的推送都將產生預覽部署,除非您在 分支建置控制項 中指定不要這樣做。對生產分支 (通常為「main」) 的所有變更都將導致生產部署。
您也可以在 Pages 上新增自訂網域並處理自訂建置設定。了解更多關於 Cloudflare Pages Git 整合。
Google Firebase
請確保您已安裝 firebase-tools。
在您的專案根目錄中建立
firebase.json
和.firebaserc
,並包含以下內容json{ "hosting": { "public": "dist", "ignore": [], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } }
js{ "projects": { "default": "<YOUR_FIREBASE_ID>" } }
執行
npm run build
後,使用命令firebase deploy
進行部署。
Surge
首先,如果還沒安裝的話,請先安裝 surge。
執行
npm run build
。輸入
surge dist
將程式碼部署到 surge。
您也可以透過輸入 surge dist yourdomain.com
部署到自訂網域。
Azure Static Web Apps
您可以使用 Microsoft Azure Static Web Apps 服務快速部署您的 Vite 應用程式。您需要:
- 一個 Azure 帳戶和訂閱金鑰。您可以在這裡建立一個免費的 Azure 帳戶。
- 將您的應用程式程式碼推送到 GitHub。
- 在 Visual Studio Code 中安裝 SWA 擴充功能。
在 VS Code 中安裝該擴充功能並導覽至您的應用程式根目錄。開啟 Static Web Apps 擴充功能,登入 Azure,然後點擊 '+' 符號以建立新的 Static Web App。系統會提示您指定要使用的訂閱金鑰。
按照擴充功能啟動的精靈,為您的應用程式命名,選擇一個框架預設值,並指定應用程式根目錄 (通常是 /
) 和建置檔案位置 /dist
。精靈將會執行,並在您的儲存庫的 .github
資料夾中建立一個 GitHub Action。
該 Action 將會部署您的應用程式(在您儲存庫的 Actions 標籤中觀看其進度),成功完成後,您可以點擊 GitHub Action 執行後出現的「瀏覽網站」按鈕,在擴充功能的進度視窗中提供的位址檢視您的應用程式。
Render
您可以將您的 Vite 應用程式以靜態網站的形式部署在 Render 上。
建立一個 Render 帳戶。
在 儀表板 中,點擊 New 按鈕並選擇 Static Site。
連接您的 GitHub/GitLab 帳戶或使用公開儲存庫。
指定專案名稱和分支。
- 建置指令:
npm install && npm run build
- 發佈目錄:
dist
- 建置指令:
點擊 Create Static Site。
您的應用程式應該部署在
https://<專案名稱>.onrender.com/
。
預設情況下,任何推送到指定分支的新 commit 都會自動觸發新的部署。自動部署可以在專案設定中進行配置。
您也可以為您的專案新增自訂網域。
Flightcontrol
使用 Flightcontrol 部署您的靜態網站,請按照這些指示進行操作。
Kinsta Static Site Hosting
使用 Kinsta 部署您的靜態網站,請按照這些指示進行操作。