Try   HackMD

搬移專題的程式碼到主機

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

本筆記的前端框架為 React x Vite

【TL;DR】

  1. 先把前端編譯後的頁面，放到後端的資料夾裡面
  2. 如果整份放到站台開得起來，大概有八成機率算成功（？）
  3. 成功後就整組再搬進教室的主機裡面
  4. 假如在主機裡面也能成功運作，就再找教練綁定網域

環境準備

  • 【目標】：

    1. 在本機端架設 IIS 站台
    2. 並能連線到 SSMS 的資料庫

  • 裝置：

    • 用自己的電腦
    • 或是用 AZURE 雲端的虛擬機
      • （只要有不同的手機、信用卡就可以再開新的免費帳號）

【環境可參考 Jean 整理的】：

補充

  • IIS 成功開啟的畫面

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

  • IIS 成功與 SSMS 連線後的畫面
    • 會開啟後端自己預設的首頁

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

  • 可以先順便檢查 Swagger 、API 有沒有正常

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

前端部分

  • 【目標】：準備編譯後的檔案，傳送給後端

1_更改程式碼

  • 分為 HashRouter 與 BrowserRouter 版本

<HashRouter>

  • main.jsx 裡面記得使用 <HashRouter>

vite.config.js

  • 把原本設定給 REPO 用的 base 改為 /









export default defineConfig({
  plugins: [react()],

  // base: '/project-peteats-2022/',
  base: '/',
});

API

  • 由於前後端的檔案目錄已經統整，所以要更改當初設定的 BASE_URL 為 './'



// const BASE_URL = 'https://peteats.rocket-coding.com/';
const BASE_URL = './';

<BrowserRouter>

  • 假如採用的是 <BrowserRouter>，需額外加上 rewrite、Web.config 設定
    • 也要注意專案 Node.js 的版本

【可參考 Alice 整理的】：

【Stackoverflow】：

…後續就交給勇者測試惹

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

2_產生編譯檔案

  1. 下指令
npm run build
  1. 會在目錄生出 <dist> 的資料夾
  • （裡面有編譯後的檔案）

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

  • 通常內容物會有這些
    • <assets>
    • index.html

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

  1. 就把整個 <dist> 資料夾壓縮起來，傳給後端ㄅ

後端更改程式碼

  • 【目標】：讓首頁路徑可以指向前端寫好的檔案
  1. 把前端的編譯檔案，直接放在 app.publish 的目錄下
  • <assets>
  • index.html

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

  1. 到 HomeController ，修改 return
  • 讓首頁可以連到前端的 index.html 檔案
return Redirect("~/index.html");
  1. 重啟站台

【成功組別】：《PetCity》

其他方法

  • 假如上述無效：
    • 首頁還是原本預設的 ASP.NET
    • 或是直接空白畫面QQ
  1. 回到 HomeController
  • 修改 return 回原本的
return View();
  1. 移動到 app.publish\Views\Home
  • 開啟 Index.cshtml，修改全部內容為
@{
  Layout = null;
}

  1. 接著把前端編譯過的 index.html 內容全部複製過來貼在後面

  2. 最後，看起來會長得像這樣：

@{
  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>
  1. 重啟站台

【成功組別】：《PetEats》

HackMD Error: 403 error
Last changed by 
 
AYA
0
1880

Read more

[Team#2]_W3

【W2-1】講義

Oct 14, 2024
[Team#2]_W2

:::

Sep 18, 2024
[Team#2]_W1

:::

Sep 16, 2024
SonarQube

分析可靠性、重覆性、技術債務、測試覆蓋率

Aug 30, 2024
Read more from AYA
Published on HackMD