部署 Qwik 專案

這篇文章將會教你如何在 Zeabur 上部署你的 Qwik 專案。

初始化專案

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

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