---
# System prepended metadata

title: "\U0001F3C5 Day 25"
tags: [2024 Nuxt 直播班]

---

# 🏅 Day 25 - 使用 Render 部屬 Nuxt3 專案
## 今日學習目標

- 學習如何透過  [Render](https://render.com/) 服務部署 Nuxt3 專案


## 範例準備

今天將使用 [Day23 學習的範例程式碼](https://github.com/jasonlu0525/nuxt3-live-example/tree/day23-vcalendar) 來實作部署。建議在練習前先將範例上傳到自己的 GitHub 儲存庫，因為接下來會透過 GitHub 完成部署。

```jsx
// 使用 git 複製範例
git clone -b day23-vcalendar https://github.com/jasonlu0525/nuxt3-live-example.git day23-vcalendar-example
```


## **註冊 Render 帳號**

首先，到 [Render.com](https://dashboard.render.com/register) 註冊一個帳號。可以選擇使用 GitHub、GitLab、Bitbucket 或 Google 帳號登入，也可以自行輸入 Email 和密碼進行註冊。

![day25-1](https://hackmd.io/_uploads/rklSYa6tzye.png)


這邊選擇 GitHub 作為登入方式，並輸入 GitHub 帳號密碼。

![day25-2](https://hackmd.io/_uploads/HJn5p6YzJe.png)


登入成功後會看到 Render 後台的 Dashboard 介面。

![day25-3](https://hackmd.io/_uploads/B1hapaYMyg.png)

---

## 建立 Web Service

登入後，在後台介面點擊右上方的 + New ，選擇「Web Service」。

![day25-4](https://hackmd.io/_uploads/SJmeRTtGke.png)


接著會進入「You are deploying a web service」 畫面。有  Git Provider ( 連接到 GitHub 或其他 Git 儲存庫  ) 、Public Git Repository ( 公開的儲存庫 URL )  和 Existing Image ( Docker Image  )  三種部署方法。這邊選擇使用 Git Provider 來連接 GitHub 儲存庫。

![day25-5](https://hackmd.io/_uploads/Sy9ZC6Ff1x.png)


選擇後會開啟新的瀏覽器視窗，要求在 GitHub 安裝 Render ，選取要部署的儲存庫並提供 Render 讀取的權限。儲存庫有「All repositories」和 「Only select repositories」 兩種選項，這邊選擇「Only select repositories」的「`nuxt3-live-example` 」儲存庫，然後點擊 install 按鈕。
![day25-6](https://hackmd.io/_uploads/S1zX06tMJx.png)


按下 install 按鈕後就會完成儲存庫連接並回到「You are deploying a web service」 畫面。接著點擊選取儲存庫名稱並按下 Connect 按鈕前往部署的細部設定。

![day25-7](https://hackmd.io/_uploads/HkMSATFzkg.png)


---

## Web Service 部署設定

成功連接 GitHub 儲存庫後，將會進入部署的設定頁面。接下來透過五個步驟完成 Nuxt3 專案的部署。

### 步驟一.  基礎設定

設定主機的名稱、位置、執行環境與部署的分支。這邊將執行環境選擇 `Node` ，分支選擇 `day23-vcalendar` 分支。

![day25-8](https://hackmd.io/_uploads/Ski806tMke.png)

### 步驟二.  設定 **Build Command 與  Start Command**

在「 Build Command 」欄位填寫 `npm install && npm run build`，也可以使用  yarn  或 pnpm 指令 :

```jsx
// 使用 yarn
yarn && yarn build

// 使用 pnpm
pnpm i --shamefully-hoist && pnpm build
```

而 「 Start Command 」欄位則是填寫 `node .output/server/index.mjs`，如下圖 : 
![day25-9](https://hackmd.io/_uploads/rJgI10tzJx.png)


### 步驟三. 選擇方案

接下來把下方的方案選擇「Free」。

![day25-13](https://hackmd.io/_uploads/rJk4gAKGJe.png)



### 步驟四. 新增環境變數

依照 [官方文件](https://nuxt.com/deploy/render)  的部署教學，新增下方的環境變數 : 

```jsx
SERVER_PRESET=render_com
NODE_VERSION=20
```

將環境變數填入「Environment Variables 」區塊，如下圖 : 

![day25-11](https://hackmd.io/_uploads/H1x0qRptzkl.png)

### 步驟五. 開始部署

最後，點擊「 Deploy Web Service 」按鈕將專案部署到 Render 。當你看到「Your service is live 🎉」訊息時，表示專案已成功部署，可以點擊左上方的網址檢視專案。

![day25-12](https://hackmd.io/_uploads/BkE3RTtz1l.png)



<br>

> 今日學習範例[部署的結果](https://nuxt3-live-example.onrender.com/) 
> 
## 題目
請使用 [Day24 題目](https://hackmd.io/TGmhOtfOSNe-67m-Fbp5Cw#%E9%A1%8C%E7%9B%AE) 的練習，將專案完整的程式碼部署至 Render 

## 回報流程

將答案部署至 Render 並複製部署的連結貼至底下回報就算完成了喔 !
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!--   

解答 :   https://nuxt3-live-answer.onrender.com/

-->




回報區
---
| #   | Discord | Github / 答案 |
| --- | ----- | ----- |
| 1 | dragon |[答案](https://two024-nuxt-training-homework01.onrender.com/rooms)|
| 2 | Steven |[答案](https://nuxt3-live-question.onrender.com/rooms)|
| 3 | hsin yu |[答案](https://nuxt3-daily-task-live-question.onrender.com/rooms)|
| 4 | Rocky |[答案](https://day25-render.onrender.com/)|
<!-- 
| --- | --- |[答案]()|
 -->