30 天架起一個前後端分離網站 - Day 2

連載區索引

30 天架起一個前後端分離網站

準備好要開始寫程式了嗎？接下來幾天，讓我們先從前端開始，一步一步把一個包含小朋友下樓梯遊戲的網站建立起來吧！回到上一篇文章的最後，我們可以到 GitHub Repo 把程式碼照著步驟下載下來。

1.記得先開一個分支 2.點擊右上角的 avatar icon，並選擇 “Your repositories” 3.找到 30-days-build-up-api-driven-architecture，點擊進入 4.點擊 “<> Code” 的藍色按鈕，建議使用 SSH 下載，複製 SSH 的 repo path。還沒設定 SSH 的朋友可以參考這篇文章 GitHub SSH setting 5.打開電腦終端機（或者 git bash），移動到想要存放這個專案的資料夾，輸入 git clone <剛剛複製的 SSH path>。如果想要創建一個新的資料夾，也可以參考截圖中的做法（如果這是一個全新的目錄，記得加上 -p）： 6.接著讓我們檢查一下這個專案是不是順利地被 clone 到本地端電腦之中了！

Start up the Frontend

終於要進入 coding 的環節了！讓我們使用 VS Code 開啟這個專案吧（我最近在把玩 Project IDX，接下來會使用 Project IDX 的截圖，請大家忽略 UI 些微的差異）！

開啟專案後，我們會看到 backend, docs, frontend, infra, sql 等資料夾已經先建立好了。暫時不管其他資料夾，先進入 frontend。進入 frontend 資料夾以後 ，會看到 down-game 資料夾，這就是我們在 day 1 建立的 Next.js 專案。

實際上 Next.js 專案在被初始化時，就會有一個初始的網頁模板了，當我們啟用 npm 的測試運行環境時，就可以看到它。

那要怎麼看到這個酷酷的東西呢？首先，我們需要先知道一件事情，npm 指令會去找當前目錄下的 package.json 檔案。這是因為 Next.js 使用 package.json 作為專案的項目依賴管理檔案，所以 package.json 在哪裡，我們執行 npm 指令的所在位置就必須在哪裡。當我們使用 VS Code 打開終端機時，會發現當前位置就在專案的根目錄之中（使用 Mac 的朋友可以在下面截圖中找到開啟 Terminal 的位置，Windows 的朋友得請自行尋找一下）。

使用 cd frontend/down-game 進入目標資料夾，我們可以先使用 ls 指令確認 package.json 檔案是不是在當前路徑中。

確認無誤後，先使用 npm i 指令，確保所有相依的套件都有被正確安裝，接著使用 npm run dev 開啟測試頁面。如果有看到 http://localhost:3000 的訊息出現，並且沒有看到紅字錯誤，可以按著鍵盤 alt 再用滑鼠點擊 termial 上面的 http://localhost:3000，電腦就會開啟瀏覽器，並導向本機端的端口 3000（當然也可以手動打開瀏覽器輸入 http://locahost:3000）。

到這裡，讓我們先岔開話題，說明一下 localhost 與 :3000 分別代表什麼意思。

IP, 域名與端口

關於 IP、域名，與端口，讓我試著用簡單明瞭的方法來解釋它們。網路上的 IP、域名，與端口，被設計出來的目的很簡單，就是要在茫茫網路世界之中，找到某個節點所在的位置。既然如此，我們其實完全可以用全球經緯度系統，以及地址系統的角度，來理解這些東西（畢竟我們發展出經緯度與地址系統，也是為了同一目的）。在網路世界中，每一個 IP 都是獨一無二的（我們暫且把事情簡化，不談虛擬 IP 的範圍），可以被清楚的辨識出來。也就是說我們透過電腦上網的足跡，只要有心人士想要查找，其實不必花太多力氣。

域名可以同時託管多台主機，這就像一個大型網站雖然有只有一個網址，可是背後可以托管複數的 IP 節點。比如 momo 的網址是 https://www.momoshop.com.tw，實際上，我們進到 www.momoshop.com.tw 這個網域時，並不能確定會導向哪個 IP 節點上的主機服務，這取決於 momo 的工程師團隊如何設計請求分流。

而每一台主機可以擁有複數端口，數量有 65535 個。有些預設端口被用來做特定的事，比如 22、80、443，22 被用來作為 SSH 登入，我們暫時不談 SSH 登入，這超出我們在這個專案中要討論的範圍；80 對應到 http 協定的預設端口，而 443 則是 https 協定的預設端口。比如我們的測試開發環境端口是 3000，3000 不是預設端口，所以會在域名後面接上 :3000。這就是為什麼大家熟悉的網址並不包含 : 後面接一個數字（因為都是 80 或 443 端口），而這裡卻會看 :3000 的原因。

我們可以把 ip 看做經緯度，地球上的每一個位置，哪怕是一粒米大小的點，都可以對應到獨一無二的經緯度位置；域名可以看作地址，像是臺灣大學的地址是羅斯福路四段1號，這個地址當中，可以涵蓋很多很多的經緯度座標；端口，則可以看成地址中的巷、弄、號這類。如此來理解網路世界的位置系統，就具體多了！

那 localhost 是什麼意思呢？localhost 就是「我家」的意思，每一台電腦都可以用 localhost 連到自己的本機端。就像我們每一個人都可以隨時進出自己的家，可是當你對別人說「我家」時，沒有人知道你家在哪裡。因為每個人的「我家」位置都不一樣，都是對應到「他自己」的家。所以必須記住一件事情，localhost 這個域名，只能拜訪到自己電腦上的東西。

動手做做看

回到我們專案之中，讓我們先來第一個改動吧！我們不需要這個初始化模板的所有內容，favicon.ico 可以先刪除，之後再加上自己想要的圖案即可。接著是 app/page.js，所初始程式碼一樣全部可以拔除，拔除後先放上一個 Hello world 試試吧！接著，也可以是做進階一點的事，比如把 Tailwind 的語法也加進來，寫一個水平、垂直置中的 Hello world。

export default function Home() {
  return (
    <div className="flex items-center justify-center h-screen">
      <div>Hello world!</div>
    </div>
  );
}

接著，讓我們回到 localhost:3000 確認一下改動吧！