使用無頭 (headless) Oracle Content Management 建置最小網站

簡介

React 是一個廣泛用於建立 Web 應用程式的 JavaScript 架構。

若要在 React 應用程式中使用 Oracle Content Management 內容，我們可以使用 React 最小範例作為 GitHub 上的開源儲存庫。

本教學課程將運用 Oracle Content Management 作為無頭 (headless) CMS 及其軟體開發套件 (SDK) 在 JavaScript 中傳遞內容，在 React 中建置簡單的最小網站。Oracle Content Management 也支援 GraphQL，適用於所有發布的內容和所有資產類型。此 React 範例位於 GitHub 上。

教學課程包含三項任務：

準備 Oracle Content Management
使用 React 建立最小型的網站
準備部署應用程式

必要條件

繼續本教學課程之前，建議您先閱讀下列資訊：

若要依循此教學課程，您需要：

Oracle Content Management 訂閱
具有「內容管理員」角色的 Oracle Content Management 帳戶
節點版本為 10 或更新版本的 Windows 或 Mac 電腦

我們正在打造什麼

有了 React 最少，您可以輕鬆地從 Oracle Content Management 儲存區域擷取映像檔和其他內容。

若要瞭解我們建置的內容，以下是教學課程的結束狀態：使用 Oracle Content Management 內容的基本 React 最小網站：

https://headless.mycontentdemo.com/samples/oce-react-minimal-sample

這是首頁在教學課程結束時的樣子：

此影像顯示 React 最小地點的登陸頁面。

這是聯絡我們頁面在本教學課程結束時的外觀：

此圖像顯示 React 最小網站的「與我們聯絡」頁面。

這是人員頁面在本教學課程結束時的外觀：

此圖像顯示 React 最小網站的「與我們聯絡」頁面。

若要繼續，您必須擁有 Oracle Content Management 的有效訂閱，並且以「內容管理員」角色登入。

工作 1：準備 Oracle Content Management

如果您尚未擁有 Oracle Content Management 執行處理，請參閱快速入門，瞭解如何註冊 Oracle Cloud、佈建 Oracle Content Management 執行處理，以及將 Oracle Content Management 設定為無頭 CMS。

您必須為本教學課程建立一個內容模型。有一個可下載的資產套件，可供您填入內容類型和相關內容之空白儲存區域。

若要準備 Oracle Content Management：

建立通道和資產儲存區域。
使用下列兩種方法之一來建立內容模型：
- 方法 1：匯入 Oracle Content Management 範例資產套件
- 方法 2：建立自己的內容模型

建立通道和資產儲存區域

您必須先在 Oracle Content Management 中建立通道和資產儲存區域，才能發布內容。

在 Oracle Content Management 中建立通道和資產儲存區域：

以管理員身分登入 Oracle Content Management Web 介面。
從左側導覽功能表中選擇內容，然後從頁面標頭的選取清單中選擇發布管道。
在右上角，按一下建立 (Create) 以建立新通道。請為此教學課程命名通道 'OCEMinimalChannel'，並讓存取保持公用。按一下儲存以建立管道。
在左側導覽功能表中選擇內容，然後從頁面表頭的選取清單中選擇儲存庫。
在右上角，按一下建立以建立新的資產儲存庫。請為此教學課程命名資產儲存區域 'OCEMinimalRepository'。
在發布通道欄位中，選取 OCEMinimalChannel 通道以向 Oracle Content Management 表示 OCEMinimalRepository 儲存區域中的內容可發布至 OCEMinimalChannel 通道。完成後按一下儲存。

建立內容模型

下一步是建立內容模型。您可以使用兩個方法中的任一個：

方法 1：匯入 Oracle Content Management 範例資產套件
方法 2：建立自己的內容模型

匯入 Oracle Content Management 範例資產套件

您可以下載預先設定的 Oracle Content Management 範例資產套件，其中包含此教學課程的所有必要內容類型和資產。您也可以選擇建立自己的內容模型，而非下載範例資產套件。

您可以從 Oracle Content Management 範例資產套件上傳本教學課程中使用的內容複本。這可讓您對內容類型進行實驗並修改內容。若要匯入 Oracle Content Management 範例資產套件，請下載資產套件封存 OCESamplesAssetPack.zip，並將其擷取至您選擇的目錄：

從 Oracle Content Management 下載頁面下載 Oracle Content Management 範例資產套件 (OCESamplesAssetPack.zip)。將下載的壓縮檔解壓縮至電腦上的位置。擷取之後，此位置將會包含一個名為 OCEMinimal_data.zip 的檔案。
以管理員身分登入 Oracle Content Management Web 介面。
在左側導覽功能表中選擇內容，然後從頁面表頭的選取清單中選擇儲存庫。現在選取 OCEMinimalRepository ，然後按一下頂端動作列中的匯入內容按鈕。
將本機電腦中的 OCEMinimal_data.zip 上傳至文件資料夾。
上傳後，請選取 OCEMinimal_data.zip ，然後按一下確定，將內容匯入資產儲存庫。
順利匯入內容之後，請瀏覽至資產頁面，然後開啟 OCEMinimalRepository 儲存庫。您會看到所有相關的影像和內容項目現在都已新增至資產儲存庫。
按一下左上方的全選，然後按一下發布，將所有匯入的資產新增至稍早建立的發布通道 OCEGettingStartedChannel。
發布之前，您需要驗證所有資產。首先，將 OCEMinimalChannel 新增為選取的通道，然後按一下 [ 驗證 ] 按鈕。
資產經過驗證之後，您可以按一下右上角的發布按鈕，將所有資產發布至選取的管道。

完成之後，您可以在資產頁面上查看所有已發布的資產。(您可以透過資產名稱上方的圖示來說明。)

此圖像顯示「資產」頁面，所有資產都已發佈。

匯入 Oracle Content Management 範例資產套件之後，您可以開始建立反應的最小網站。

建立您自己的內容模型

您也可以建立自己的內容模型，而非匯入 Oracle Content Management 範例資產套件。

對於此教學課程，我們使用名為 'MinimalMain' 的內容類型作為此範例的主要內容類型。此內容類型包含頁首與頁尾標誌，以及應包含在瀏覽中的頁面清單。

此圖像顯示「最小」範例的首頁。

若要建立內容模型的內容類型：

以管理員身分登入 Oracle Content Management Web 介面。
從左側導覽功能表中選擇內容，然後從頁面標頭的選取清單中選擇資產類型。
按一下右上角的建立 (Create) 。
選擇建立內容類型 (不是數位資產類型)。針對所有必要的內容類型重複此步驟。

此圖像顯示 Oracle Content Management Web 介面中的「建立資產類型」對話方塊。

我們會建立五種內容類型，每種類型都有自己的欄位集合：

MinimalMain
MinimalPage
MinimalSection
PeoplePage
人員

第一個內容類型 MinimalMain 應具有下列欄位：

顯示名稱	欄位類型	機器名稱
headerLogo	單一值媒體欄位	headerLogo
footerLogo	單一值媒體欄位	footerLogo
頁面	多重值參考欄位	頁面

這是您的 MinimalMain 內容類型定義外觀：

此圖像顯示內容類型 'MinimalMain' 的定義。其中包含下列資料欄位：headerLogo、footerLogo、頁面。

第二個內容類型 MinimalPage 應具有下列欄位：

顯示名稱	欄位類型	必要	機器名稱
區段	多重值參考欄位		區段

這是 MinimalPage 內容類型的外觀：

此圖像顯示內容類型 'MinimalPage' 的定義。其中包括此資料欄位：區段。

第三個內容類型 MinimalSection 應具有下列欄位：

顯示名稱	欄位類型	必要	機器名稱
類型	單值文字欄位	X	類型
標題	單值文字欄位		標題
body	單一值大型文字欄位		body
影像	單一值影像欄位		影像
動作	單一值內嵌內容欄位		動作

這是 MinimalSection 內容類型的外觀：

此圖像顯示內容類型 'MinimalSection' 的定義。它包含下列資料欄位：類型、標題、內文、影像、動作。

第四個內容類型 PeoplePage 應該有下列欄位：

顯示名稱	欄位類型	必要	機器名稱
通知	單一值參照欄位		通知
people - 人員	多重值參考欄位		people - 人員

第五和最終內容類型人員是具有下列欄位的自訂數位資產：

顯示名稱	欄位類型	必要	機器名稱
fullName	單值文字欄位	X	fullName
稱號	單值文字欄位		稱號
比法塔	單一值大型文字欄位		比法塔

建立內容類型之後，您可以將這些內容類型新增至先前建立的儲存庫，OCEMinimalRepository：

以管理員身分登入 Oracle Content Management Web 介面。
瀏覽至 OCEMinimalRepository 。
編輯儲存區域，然後在資產類型底下指定所有五種新建立的內容類型。按一下儲存按鈕以儲存變更。

此圖像顯示 Oracle Content Management 中的「編輯儲存區域」頁面，其中包含與 OCEMinimalRepository 儲存區域關聯的新建立內容類型。

將內容類型新增至儲存庫後，您可以在資產頁面上開啟 OCEMinimalRepository 儲存庫，然後開始為所有內容類型建立內容項目。

此圖像顯示 Oracle Content Management Web 介面之「資產」頁面上的內容項目，其中包含集合、通道、語言、類型、內容項目選擇以及狀態的左側選項。

工作 2：以 React 建置最小網站

若要在伺服器端轉譯的 React 應用程式中使用 Oracle Content Management 內容，我們可以使用 React 最小的網站範例 (可作為 GitHub 上的開源儲存庫)。

注意：請記住，使用 React 範例是選擇性的，在此教學課程中使用此範例來快速開始。您也可以建置您自己的 React 應用程式。

若要在 React 中建置最小網站，請執行下列動作：

複製範例儲存區域並安裝相依性
設定 React 應用程式
使用 Oracle Content Management Content SDK
使用 Content SDK 擷取內容
使用 GraphQL 建構人員頁面

複製範例儲存庫並安裝相依性

React 最小網站範例可作為 GitHub 上的開源儲存庫。

您必須先將範例從 GitHub 複製到本機電腦，並將目錄變更為儲存庫根目錄：

git clone https://github.com/oracle/oce-react-minimal-sample.git
cd oce-react-minimal-sample

現在您已經有程式碼庫，需要下載應用程式的相依性。從根目錄執行下列指令：

npm install

設定 React 應用程式

在此 React 最小的網站範例中，您需要設定一些資訊，讓您的 Oracle Content Management Content SDK (以及任何其他要求) 能夠使用正確的通道記號來鎖定正確的執行處理 URL 和 API 版本。這些值用於 src/scripts/server-config-utils.js 以建立新的傳遞從屬端。

此應用程式搭配用戶端與伺服器應用程式使用 Webpack 所讀取的 .env 檔案。透過使用 webpack.DefinePlugin，從 .env 檔案讀取的任何值都可以提供給應用程式中的任何位置使用。

在文字編輯器中開啟 .env 檔案。您會看到：

# The connection details for the Oracle Content Management server to be used for this application
SERVER_URL=https://samples.mycontentdemo.com
API_VERSION=v1.1
CHANNEL_TOKEN=ba0efff9c021422cb134c2fd5daf6015

請變更每個索引鍵 - 值組，以反映您的執行處理 URL、要作為目標的 API 版本，以及與您發布通道關聯的通道權杖。本教學課程的頻道為 OCEMinimalChannel。

使用 Oracle Content Management Content SDK

Oracle Content Management 提供 SDK，協助您探索及使用應用程式中的內容。此 SDK 是以 NPM 模組發布，專案則由 GitHub 代管。

在此深入瞭解 SDK。

此 SDK 已經在 package.json 檔案中註冊為此專案的程式實際執行相依性。

使用 Content SDK 擷取內容

我們現在可以運用 Content SDK 擷取內容，讓我們能夠在 React 應用程式中呈現。

Content SDK 使用 DeliveryClient 物件來指定端點。您可以使用該用戶端物件提出所有要求。

src/scripts 資料夾包含使用 Content SDK 從 Oracle Content Management 取得資料的程式碼。

src/scripts/server-config-utils.js 檔案會匯入 Content SDK，然後使用 .env 中指定的組態建立傳遞從屬端。

下列命令會匯入 SDK：

import { createDeliveryClient, createPreviewClient } from '@oracle/content-management-sdk';

下列命令會建立傳遞從屬端：

return createDeliveryClient(serverconfig);

src/scripts/services.js 檔案包含取得此 React 最小應用程式資料的函數。

fetchOceMinimalMain() 方法會擷取內容類型 MinimalMain，其斜線為 minmain。

export async function fetchOceMinimalMain() {
  const data = await getItem('minimalmaingraphql', 'fields.headerlogo,fields.footerlogo,fields.pages');
  if (!data.hasError) {
    const { fields } = data;
    const { headerlogo, footerlogo } = fields;
    // Extract the sourceset for the headerImage and footerImage and put it back in the data
    data.headerRenditionURLs = getSourceSet(headerlogo);
    data.footerRenditionURLs = getSourceSet(footerlogo);
  }
  return data;
}

備註：上述查詢適用於包含「人員」類型之「人員」頁面的 URL slug「minimalmaingraphql」的資產。若要在不使用「人員」頁面的情況下建立最小型網站，可以使用資產套件中帶有 slug「minimalmain」的資產。

若要轉譯影像，services.js 提供一個協助程式方法來擷取從資產轉譯所建構之資產的來源集。

function getSourceSet(asset) {
  const urls = {};
  urls.srcset = '';
  urls.jpgSrcset = '';
  if (asset.fields && asset.fields.renditions) {
    asset.fields.renditions.forEach((rendition) => {
      addRendition(urls, rendition, 'jpg');
      addRendition(urls, rendition, 'webp');
    });
  }
  // add the native rendition to the srcset as well
  urls.srcset += `${asset.fields.native.links[0].href} ${asset.fields.metadata.width}w`;
  urls.native = asset.fields.native.links[0].href;
  urls.width = asset.fields.metadata.width;
  urls.height = asset.fields.metadata.height;
  return urls;
}

fetchPage() 方法會使用從先前查詢取得之頁面的 slug 值，擷取內容類型 MinimalPage。

export async function fetchPage(pageslug) {
  // Get the page details
  const page = await getItem(pageslug, 'fields.sections');
  return page;
}

getRenditionURLs() 方法會擷取區段中可能使用該影像 ID 定義的任何影像轉譯 URL。此呼叫已完成客戶端。

export function getRenditionURLs(identifier) {
  const client = getClient();
  return client.getItem({
    id: identifier,
    expand: 'fields.renditions',
  }).then((asset) => getSourceSet(asset))
    .catch((error) => logError('Fetching Rendition URLs failed', error));
}

使用 GraphQL 來建構人員頁面

我們使用 package.json 中的 Apollo Client 將 GraphQL 整合至 React，而 src/scripts/services-graphql.js 中的 fetchPeople 方法則讓 GraphQL 呼叫內容伺服器。

如需如何在 Oracle Content Management 中包含 GraphQL 支援的詳細資訊，請嘗試搭配 React 與 Oracle Content Management 使用 GraphQL 教學課程。

現在有我們的資料查詢，我們可以在反應元件中呈現回應。

從屬端與伺服器端呈現的比較

使用用戶端轉譯 (CSR)，用戶端負責使用 JavaScript 建立和轉譯網頁的內容。使用伺服器端彩現 (SSR) 時，頁面會建立在伺服器上，並傳回網頁給用戶端。

從屬端呈現的伺服器要求網頁時，傳回的 HTML 文件包含架構 HTML，而且沒有實際的內容。它包含 JavaScript 組合的參照，從屬端接著會從伺服器要求這些組合。接收此組合時，用戶端會執行 JavaScript 並填入網頁。在用戶端執行完 JavaScript 之前，所有使用者都會看到一個空白網頁。用戶端轉譯的應用程式的一個底端是，當某些 Web 蒐集程式編製網站索引時，沒有實際的內容可供編製索引。

使用伺服器端彩現 (SSR) 時，頁面會建立在伺服器上，並傳回網頁給用戶端。這是 Web 蒐集程式可以編製網頁內容的索引。

反應最小地點應徵流程

React 最小網站應用程式流程如下：

用戶端對伺服器提出指定路由的要求。
Express 伺服器會收到要求。
Express 伺服器接著會執行下列作業：
1. 它會決定指定路由要呈現的元件，並呼叫元件的 fetchInitialData 函數來取得該元件的所有資料。
2. 它會建立所有要轉譯內容的字串。(會要求每個元件轉譯以產生其 HTML 標記。)
3. 它會建立包含下列項目的 HTML 文件：
  - 要呈現的內容字串
  - 樣式表的連結 (如果適用)
  - 一個包含用戶端需要之用戶端 bundle.js 的程序檔標籤
  - 從所有元件取得的資料 (序列化為 JSON)
4. 然後伺服器會將 HTML 傳回給用戶端。
用戶端會收到 HTML 並將其轉譯。使用者將會看到完整格式的網頁。
HTML 中的 JavaScript 會將資料儲存在用戶端的 Web 瀏覽器視窗中。
用戶端從伺服器要求用戶端 -bundle.js 檔案。收到之後，用戶端會在組合中執行 JavaScript。
- 它會「填入」HTML，新增在任何用戶端 JavaScript (例如事件監聽器) 中。
- 每個呈現的元件都會看到其資料是否儲存在視窗中。如果是，就會使用該資料；否則，元件會透過 Content SDK 向 Oracle Content Management 伺服器發出要求，以取得所需的資料。
如果 HTML 文件包含樣式表，用戶端會要求樣式表。

檢視網頁的來源，您將看到 HTML 中的所有內容，表示該頁面已在伺服器上轉譯。

注意：此範例應用程式會取得根元件中的資料，然後將資料傳送至任何需要它的子元件。替代方式是使用狀態管理工具 (例如 Redux)，可將資料置於存放區中，任何元件都可以從該存放區要求資料。

伺服器端 Express 伺服器和轉譯

伺服器應用程式會使用 Express 伺服器來接收要求、產生 React 應用程式執行處理、產生 HTML 頁面，以及傳回回應。

Express 伺服器檔案位於 src/server/server.js。

Express 伺服器接受所有要求，然後使用 React 的 res-router-dom matchPath() 取得將針對指定路由轉換的元件。這接著會呼叫該元件的 fetchInitialData 方法來取得該元件的資料，並傳回承諾。執行承諾並建立內容物件以包含資料。然後會呼叫轉譯器來產生 HTML 頁面，再將 HTML 內容傳回至用戶端。

server.get('*', (req, res) => {
  // matchRoutes will return all the components which will be rendered as per the request route.
  // call "fetchInitialData" on each of those components (if the component has such a method),
  // and build up an array of pending network calls for all the data required for the components
  // which will be rendered.
  const promises = matchRoutes(Routes, req.path).map(({ route }) => (
    route.fetchInitialData ? route.fetchInitialData(req) : null));

  // Execute all promises at the same time to get all the data, once its all been obtained
  // render the HTML to the client by delgating to the "renderer" method
  Promise.all(promises).then((data) => {
    // this context object gets passed into the renderer, which in turn passes it
    // to the StaticRouter. The StaticRouter passes it to any component which is called
    // as the "staticContext" prop.
    const context = { data };

    // get the content to return to the client
    const content = renderer(req, context);

    // if the route requested was not found, the content object will have its "notFound"
    // property set, therefore we need to change the response code to a 404, not found
    if (context.notFound) {
      res.status(404);
    }

    if (context.url) {
      // If a redirect was set using a Redirect component do that
      res.redirect(301, context.url);
    } else {
      // send the response
      res.send(content);
    }
  });
});

轉譯器位於 src/server/renderer.jsx，並使用 React 的 res-dom/server renderToString() 來取得正在轉譯之所有內容的字串。

// generate the HTML content for this application
const content = renderToString(
  <StaticRouter context={context} location={req.path} basename={process.env.BASE_URL}>
    <div>{renderRoutes(Routes)}</div>
  </StaticRouter>,
);

傳送至轉換器的相關資訊環境物件會傳送至伺服器端路由器 StaticRouter。在伺服器端彩現期間，任何元件都可以從元件的 props 取得資料。

this.props.staticContext.data

轉譯器會傳回包含 React 內容、序列化資料以及要在用戶端上執行之 JavaScript 組合的 HTML 標記。

<body>
  <div id="root">${content}</div>
  <script>
    window.INITIAL_DATA = ${serialize(context.data)}
  </script>
  <script src="${clientBundleFile}"></script>
</body>

用戶端收到 HTML 時，資料會在視窗中提供，用戶端會從伺服器要求用戶端組合。

用戶端轉譯

用戶端轉譯代碼位於 src/client/main.js 中。此程式碼會經過網頁的所有 HTML，並在任何從屬端 JavaScript 程式碼中新增。

此程序稱為填入。

ReactDOM.hydrate(
  <BrowserRouter basename={process.env.BASE_URL}>
    <div>{renderRoutes(Routes)}</div>
  </BrowserRouter>,
  document.querySelector('#root'),
);

反應元件

React 使用稱為 JSX 的技術 (類似 HTML 的語法延伸至 JavaScript) 來轉譯內容。即使您可以撰寫純 JavaScript 來轉譯 Oracle Content Management 的資料，我們強烈建議您使用 JSX。

最小網站應用程式會將每個頁面細分為數個較小的元件。

接下來的幾節概述 React 如何在各個元件中呈現我們的應用程式：

IS_BROWSER 變數
路由檔案
應用程式元件
頁面元件
表頭與表尾元件
區段元件
人員元件
「人員」元件
錯誤元件

IS_BROWSER 變數

Webpack 可用來組合用戶端與伺服器代碼。有一個組態檔指示 Webpack 如何建立每個組合。

開啟用戶端組合的組態檔 webpack.client.config.js。在檔案最下方，會設定一個變數來指示應用程式在瀏覽器中執行。

new webpack.DefinePlugin({
  'process.env.IS_BROWSER': true,
}),

開啟伺服器組合的組態檔 webpack.server.config.js。在檔案底部，會設定相同的變數來指示應用程式不在瀏覽器中執行。可以從 React 應用程式程式碼中的任何位置存取 IS_BROWSER 變數，以判斷應用程式是在伺服器或用戶端上呈現。

路由檔案

在我們的網站上，我們僅提供兩個路線。'/page/people' 已遞送至「人員元件」。所有其他要求都會導向到「頁面」元件。

所有頁面都有表頭，其中包含公司標誌與連結，以及包含標誌與社交媒體圖示的表尾。

src/pages/Routes.js 檔案定義應用程式的路由。我們正在針對應用程式使用 ES6 散布運算子、頁面參考。這是因為這些項目的匯入作業是包含元件及其 fetchInitialData 函數 (如果有的話) 的物件，而不是僅包含元件。

export default [
  {
    ...App,
    routes: [
      {
        ...People,
        path: '/page/people',
        exact: true,
        title: 'People',
      },
      {
        ...Page,
        path: '/page/:slug',
        exact: true,
        title: 'Page',
      },
    ],
  },
];

應用程式元件

「申請」元件為申請的主要元件。它會換行，讓應用程式中的每個路由取得標頭與頁尾。

<div>
  <Header pages={data.fields.pages} headerRenditionURLs={data.headerRenditionURLs} />
  {isRoot ? (
    <Redirect to={{ pathname: `/page/${firstPageSlug}` }} />
  ) : (
    renderRoutes(route.routes)
  )}
  <Footer footerRenditionURLs={footerRenditionURLs} />
</div>

個別路由的元件是位於頁面目錄中的「頁面」元件。

開啟應用程式元件，位於 src/pages/App.jsx。此元件會匯入 API 以從 services.js 檔案取得資料。

import { fetchOceMinimalMain } from '../scripts/services';

應用程式元件會取得必要資料，並將其傳遞至表頭、表尾及頁面元件。

建構子會使用 Webpack 組合檔案中設定的 process.env.IS_BROWSER 變數，來檢查應用程式是否在用戶端或伺服器上執行。如果元件是在用戶端中轉譯，則會從視窗中取得資料。

注意：當頁面瀏覽至使用從屬端路由時，將不會進行伺服器端呈現。而是使用用戶端轉譯來轉譯內容。因此，視窗不會包含任何資料，用戶端必須進行伺服器呼叫才能取得資料。

如果元件是在伺服器上轉譯，則會從 this.props.staticContext 取得資料；亦即從 Express Server 檔案傳送的資料。資料或預設值會儲存於元件的狀態。

constructor(props) {
  super(props);

  let data;
  if (process.env.IS_BROWSER) {
    data = window.INITIAL_DATA;
    // Do not delete the data yet, as the Page component needs to read from it
  } else {
    const { staticContext } = this.props;
    data = staticContext.data;
  }

  this.state = {
    appData: data,
  };
}

在伺服器端彩現期間，會呼叫 fetchInitialData 從伺服器取得資料。它會傳回對呼叫程式碼 (Express Server 程式碼) 的承諾。

function fetchInitialData() {
  return fetchOceMinimalMain();
}

當元件轉譯 (請參閱 render() 方法) 時，它會從元件的狀態取得所有資料，並將它們傳遞到標頭、頁尾元件和頁面路由。

src/pages/App.jsx 會匯出包含 fetchInitialData 函數和元件的物件。

export default {
  fetchInitialData,
  component: App,
};

頁面元件

「頁面」元件負責轉譯為頁面定義的所有區段。

開啟頁面元件，位於 src/pages/Page.jsx。

fetchInitialData 會在伺服器端轉譯期間呼叫，以從伺服器取得資料。

function fetchInitialData() {
  const pageslug = req.path.split('/').pop();
  return fetchPage(pageslug);
}

componentDidUpdate 會檢查位置路徑名稱是否已變更指示導覽變更，然後據此擷取資料。

componentDidUpdate() {
  const { pageSlug } = this.state;
  const { location } = this.props;
  const { pathname } = location;
  const newSlug = pathname.split('/').pop();
  if (pageSlug !== newSlug) {
    this.fetchData(newSlug);
  }
}

在 render() 方法中，您可以看到從元件的狀態取得要轉換的資料。此資料包含區段清單，因此 Page 元件 render() 方法會重複執行清單，並呼叫清單中每個區段的 Section 元件。

與「應用程式」元件一樣，「頁面」元件會匯出包含 fetchInitialData 函數和元件的物件。

export default {
  fetchInitialData,
  component:  Page,
};

表頭與表尾元件

「標頭」元件 (位於 src/components/Header.jsx) 和「頁尾」元件 (位於 src/components/Footer.jsx) 只會使用從 App 元件傳送給這些元件的資料。但不會從伺服器取得任何其他資料。

區段元件

位於 src/components/Section.jsx 的「區段」元件是由「頁面」元件使用，用來轉譯 MinimalSection 類型的任何內容項目。

此元件有從「頁面」元件傳遞至該元件的資料，如果區段資料有影像，則會進行從屬端呼叫，從伺服器取得影像的轉譯 URL。

useEffect(() => {
  if (!image || section.RenditionURLs) return;
  getRenditionURLs(image.id).then((urls) => {
    setRenditionURLs(urls);
  }, console.error);
}, [section]);

人員元件

「人員」元件負責轉譯「人員」頁面，且位於 src/pages/People.jsx。

如需如何在 Oracle Content Management 中包含 GraphQL 支援的詳細資訊，請查看此教學課程。

人員元件

「人員」元件 (位於 src/components/Person.jsx) 是用於「人員」元件，且用於轉譯「人員」類型的任何內容項目。

此元件具有從「人員」元件傳遞至該元件的資料，不需要對伺服器進行任何其他呼叫。

錯誤元件

「錯誤」元件 (位於 src/components/Error.jsx) 是由「頁面」和「應用程式」元件所使用。如果在呼叫伺服器期間發生任何錯誤，將會轉譯它們。

作業 3：準備部署應用程式

現在我們建置了 React 最小網站，因此必須在本機開發伺服器中看到它，以便在應用程式正式上線前對其進行除錯和預覽。

以三個步驟準備部署應用程式：

使用 Webpack 建置應用程式
使用節點執行應用程式
使用命令檔建置及執行開發環境中的應用程式

使用 Webpack 建置應用程式

Webpack 可用來組合應用程式。它會建立兩個 JavaScript 組合：在伺服器上執行的伺服器 -bundle.js，以及在用戶端上下載並執行的用戶端 -bundle.js。

React 最小網站應用程式有三個 Webpack 組態檔案：

webpack.base.config.js 同時與用戶端和伺服器 Webpack 配置合併。
webpack.client.config.js 可搭配用戶端的程式碼。
webpack.server.config.js 結合了伺服器的程式碼。

若要建立用戶端組合，您必須指定用戶端 Webpack 組態：

webpack --config webpack.client.config.js

若要建立伺服器組合，您必須指定伺服器 Webpack 組態：

webpack --config webpack.server.config.js

使用節點執行應用程式

組合建立之後，您可以執行下列命令來啟動伺服器：

node server.js

使用命令檔建置及執行開發和生產中的應用程式

位於專案根目錄的 package.json 檔案包含指令碼，可以讓您更輕鬆地建置組合並執行應用程式。

開發

您可以在開發期間使用 dev 命令檔：

npm run dev

此程序檔會建立用戶端與伺服器組合，並在本機伺服器中啟動應用程式。Webpack 將會監看程式碼變更，並視需要重新建立用戶端和伺服器組合。

生產

將會使用組建命令檔來建立從屬端和伺服器組合：

npm run build

命令檔完成後，即可使用下列命令來執行應用程式：

npm run start

結論

在本教學課程中，我們在 React 中建立了一個最小型的網站，該網站可以在 GitHub 上找到。此網站使用 Oracle Content Management 作為無頭 CMS。在以最少網站教學課程的發布內容通道設定及設定 Oracle Content Management 之後，我們安裝並執行 React 網站以擷取必要的內容並建置網站。

如需有關 React 的詳細資訊，請前往 React 網站。

瞭解文件中重要的 Oracle Content Management 概念。

如果您想要將 GraphQL 與 React 搭配使用，請參考此教學課程。

若要瞭解如何在 Oracle Content Management 中將 Video Plus 資產與 React 整合，請參閱此教學課程。

您可以在 Oracle Help Center 的 Oracle Content Management 範例頁面上找到更多範例。

標題與版權資訊

使用無頭 (headless) Oracle Content Management 建置最小網站

F38764-05

2022 年十二月

主要作者：Oracle Corporation