部署 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
如果你的程式碼沒有任何問題,你應該可以在專案目錄下看到新增了 dist
和 server
兩個資料夾。
接下來,試著輸入下面的指令來啟動本機伺服器:
node server/entry.express.js
接下來試著在瀏覽器中輸入 http://localhost:3000
,你應該可以看到網頁順利運作:
部署專案
在確認本機測試建置沒有問題後,你可以在 GitHub 建立一個程式碼儲存庫,然後將現在的程式碼推送上去。
在最後,回到 Zeabur 的專案頁面,你的專案中,點選 Deploy service 或者 Add new service 按鈕,並選擇 Deploy your source code.
搜尋你剛剛建立的程式碼儲存庫,然後點選 import
,你的 Qwik 應用程式就將自動開始部署。
部署完成後,你可以參考 綁定網域 文件瞭解如何為你的 Qwik 專案綁定一個能夠讓外部造訪的公開網域。