教學
Qwik

部署 Qwik 專案

這篇文章將會教你如何在 Zeabur 上部署你的 Qwik (opens in a new tab) 專案。

初始化專案

首先,你需要在本機開發環境初始化一個 Qwik 專案,我們可以按照 Qwik 官方文件 (opens in a new tab) 的指示來完成這個步驟。

npm create qwik@latest

跟著指示完成初始化後,你應該會看到類似下面的結果:

💫 Let's create a Qwik app 💫
 
✔ Project name … qwik-app
✔ Select a starter › Basic
 
🦄  Success!  Project created in portfolio directory
 
🐰 Next steps:
   cd qwik-app
   npm install
   npm start
 
💬 Integration? Add Netlify, Cloudflare, Tailwind...:
   npm run qwik add
 
💬 Questions? Start the conversation at:
   https://qwik.builder.io/chat
   https://twitter.com/QwikDev
 
📺 Presentations, Podcasts and Videos:
   https://qwik.builder.io/media/

並且你會看到一個 qwik-app 的資料夾被建立在你的目前目錄下。

開發專案

初始化完成後,你可以先切換到 qwik-app 資料夾下,並且執行 npm start 來啟動開發伺服器。

cd qwik-app
npm start

你應該可以看到類似下面的結果:

 VITE v3.1.1  ready in 140 ms
 
    Local:   http://localhost:5174/
    Network: use --host to expose

接下來,你可以開始修改程式碼來開發你的 Qwik 專案了。

安裝 Adaptor 套件

為了讓你的 Qwik 專案可以在 Zeabur 上運作,在部署之前你需要先安裝 Qwik 的 Node.js (Express) adaptor 套件。

npm run qwik add express

安裝完成後,你應該可以看到類似下面的結果:

🦄  Success!  Added express to your app

📚 Relevant docs:
   https://qwik.builder.io/qwikcity/adaptors/node/
   https://expressjs.com/

💬 Questions? Start the conversation at:
   https://qwik.builder.io/chat
   https://twitter.com/QwikDev

在本機測試建置

安裝 adaptor 套件後,你可以先在本機測試建置,確保你的專案可以正常運作。

npm run build

如果你的程式碼沒有任何問題,你應該可以在專案目錄下看到新增了 distserver 兩個資料夾。

接下來,試著輸入下面的指令來啟動本機伺服器:

node server/entry.express.js

接下來試著在瀏覽器中輸入 http://localhost:3000,你應該可以看到網頁順利運作:

Qwik 預設頁面

部署專案

在確認本機測試建置沒有問題後,你可以在 GitHub 建立一個程式碼儲存庫,然後將現在的程式碼推送上去。

在最後,回到 Zeabur 的專案頁面,你的專案中,點選 Deploy service 或者 Add new service 按鈕,並選擇 Deploy your source code.

deploy

搜尋你剛剛建立的程式碼儲存庫,然後點選 import,你的 Qwik 應用程式就將自動開始部署。

building

部署完成後,你可以參考 綁定網域 文件瞭解如何為你的 Qwik 專案綁定一個能夠讓外部造訪的公開網域。