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

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

## 範例準備

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

// 使用 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 和密碼進行註冊。


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


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


---

## 建立 Web Service

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


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


選擇後會開啟新的瀏覽器視窗，要求在 GitHub 安裝 Render ，選取要部署的儲存庫並提供 Render 讀取的權限。儲存庫有「All repositories」和 「Only select repositories」 兩種選項，這邊選擇「Only select repositories」的「`nuxt3-live-example` 」儲存庫，然後點擊 install 按鈕。

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


---

## Web Service 部署設定

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

### 步驟一. 基礎設定

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


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

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

// 使用 yarn
yarn && yarn build

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

而 「 Start Command 」欄位則是填寫 `node .output/server/index.mjs`，如下圖 :

### 步驟三. 選擇方案

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


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

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

SERVER_PRESET=render_com
NODE_VERSION=20

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


### 步驟五. 開始部署

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


<br>

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

## 回報流程

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


<!--

解答 : 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/)|
<!--
| --- | --- |[答案]()|
-->