# 搬移專題的程式碼到主機 ![](https://img.shields.io/badge/Created_Date-20_JUL_2023-orange) :::info **本筆記的前端框架為 `React` x `Vite`** - 若是 `SSR` 框架， **【可參考 Alice 整理的】：**`IIS 執行 NEXT.JS` > <https://enormous-english-a19.notion.site/IIS-NEXT-JS-6edd08ca5b2e48cb995af5dd521e1e9b> ::: --- [TOC] --- :::warning **【TL;DR】** 1. 先把前端編譯後的頁面，放到後端的資料夾裡面 2. 如果整份放到站台開得起來，大概有八成機率算成功（？） 3. 成功後就整組再搬進教室的主機裡面 4. 假如在主機裡面也能成功運作，就再找教練綁定網域 ::: --- ## 環境準備 - 【目標】： 1. 在本機端架設 `IIS` 站台 2. 並能連線到 `SSMS` 的資料庫 - 裝置： - 用自己的電腦 - 或是用 `AZURE` 雲端的虛擬機 - （只要有不同的手機、信用卡就可以再開新的免費帳號） :::info **【環境可參考 Jean 整理的】：** - `後端環境建設大補帖` > <https://www.notion.so/azure-iis-9ae9302223b54dddafd7078f29c19d13> ::: --- ### 補充 - `IIS` 成功開啟的畫面 ![](https://hackmd.io/_uploads/SJk__VU9n.png =40%x) - `IIS` 成功與 `SSMS` 連線後的畫面 - 會開啟後端自己預設的首頁 ![](https://hackmd.io/_uploads/r1eqOVU5n.png =40%x) - 可以先順便檢查 `Swagger` 、`API` 有沒有正常 ![](https://hackmd.io/_uploads/BkjTOEUcn.png =40%x) --- ## 前端部分 - 【目標】：準備編譯後的檔案，傳送給後端 ### 1_更改程式碼 - 分為 `HashRouter` 與 `BrowserRouter` 版本 　 --- #### `<HashRouter>` - `main.jsx` 裡面記得使用 `<HashRouter>` --- #### `vite.config.js` - 把原本設定給 `REPO` 用的 `base` 改為 `/` ```jsx= export default defineConfig({ plugins: [react()], // base: '/project-peteats-2022/', base: '/', }); ``` --- #### `API` - 由於前後端的檔案目錄已經統整，所以要更改當初設定的 `BASE_URL` 為 `'./'` ```jsx= // const BASE_URL = 'https://peteats.rocket-coding.com/'; const BASE_URL = './'; ``` --- #### `<BrowserRouter>` - 假如採用的是 `<BrowserRouter>`，需額外加上 `rewrite`、`Web.config` 設定 - 也要注意專案 `Node.js` 的版本 :::info **【可參考 Alice 整理的】：** - `IIS 執行 NEXT.JS` > <https://enormous-english-a19.notion.site/IIS-NEXT-JS-6edd08ca5b2e48cb995af5dd521e1e9b> --- **【Stackoverflow】：** - `React Router + iis? How to enable routing` > <https://stackoverflow.com/questions/51755370/react-router-iis-how-to-enable-routing> ::: > ...後續就交給勇者測試惹 ![:meow_dj:](https://cdn.discordapp.com/emojis/1110502366433771561.gif?size=80&quality=lossless =36x) --- ### 2_產生編譯檔案 1. 下指令 ```sh npm run build ``` 2. 會在目錄生出 `<dist>` 的資料夾 - （裡面有編譯後的檔案） ![](https://hackmd.io/_uploads/HJe7c4Ic2.png =40%x) - 通常內容物會有這些 - `<assets>` - `index.html` ![](https://hackmd.io/_uploads/BJh_qVL5h.png =40%x) 3. 就把整個 `<dist>` 資料夾壓縮起來，傳給後端ㄅ --- ## 後端更改程式碼 - 【目標】：讓首頁路徑可以指向前端寫好的檔案 1. 把前端的編譯檔案，直接放在 `app.publish` 的目錄下 - `<assets>` - `index.html` ![](https://hackmd.io/_uploads/SJOlxL852.png =40%x) 2. 到 `HomeController` ，修改 `return` - 讓首頁可以連到前端的 `index.html` 檔案 ```C# return Redirect("~/index.html"); ``` 3. 重啟站台 :::success **【成功組別】：`《PetCity》`** - REPO > <https://github.com/todelusion/petbooker/blob/dev/src/main.tsx#L15> - PAGES > <https://petcity.rocket-coding.com/index.html> ::: --- ### 其他方法 :::warning - **假如上述無效：** - 首頁還是原本預設的 `ASP.NET` - 或是直接空白畫面QQ ::: 1. 回到 `HomeController` - 修改 `return` 回原本的 ```csharp! return View(); ``` 2. 移動到 `app.publish\Views\Home` - 開啟 `Index.cshtml`，修改全部內容為 ```csharp! @{ Layout = null; } ``` 3. 接著把前端編譯過的 `index.html` 內容全部複製過來貼在後面 4. 最後，看起來會長得像這樣： ```htmlembedded! @{ Layout = null; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" type="image/svg+xml" href="/assets/favicon.2312fcf0.ico" /> <title>PetEats</title> <script type="module" crossorigin src="/assets/index.545dee54.js"></script> <link rel="stylesheet" href="/assets/index.d9f97b3a.css"> </head> <body> <div id="root"></div> </body> </html> ``` 5. 重啟站台 :::success **【成功組別】：`《PetEats》`** - PAGES > <https://peteats.rocket-coding.com> - REPO > <https://github.com/peteats/project-peteats-2022/blob/main/src/main.jsx#L15> ::: --- <!-- --- --> {%hackmd UYCim7nMT--Eci-1SL9eYg %} <!-- {%hackmd RAtn1iEBRO2tCbZeA-NylQ %} --> <!-- --- -->