控制台整合 - ApsaraVideo VOD

控制台整合可以提供播放視頻、查看截圖、人工審核、推薦視頻等功能，讓您更直觀地查看和管理視頻資源。通過閱讀本文，您可以瞭解到趣視頻控制台整合操作方法。

前提條件

Web端環境整合需要您安裝Node.js及其包管理器npm（用於編譯sass的node-sass等依賴）。
說明
- Node.js版本過高或過低可能出現sass安裝編譯不通過的情況，建議您安裝v11.15.0版本。
- 建議您使用nvm管理Node環境。使用nvm可以快速安裝切換node版本，在命令列使用node -v可以快速查看當前node版。
- 建議您在本地安裝Node.js環境，完成控制台配置及運行測試，再打包上傳至ECS與服務端一同發布。
在整合控制台源碼前，您需要先完成服務端整合並保持服務端開啟。服務端整合文檔，請參見服務端整合。

趣視頻管理主控台使用說明

控制台主要功能如下：

登入或登入到期時，佈建要求攔截器以重新登入。
全部視頻列表。
- 根據視頻ID、使用者ID、使用者名稱稱、視頻標題、審核狀態、建立日期查詢視頻。
- 查看視頻資訊（時間長度、視頻大小、視頻ID）。
- 視頻不同清晰度的播放（同時可查看視頻描述）。
- 顯示截圖。
- 審核狀態、轉碼狀態的查看。
- 操作主要有推薦、審核、轉碼、刪除。
推薦視頻列表。
- 根據視頻ID、使用者ID、使用者名稱稱、視頻標題、建立日期查詢視頻。
- 查看視頻資訊（時間長度、視頻大小、視頻ID）。
- 視頻不同清晰度的播放（同時可查看視頻描述）。
- 審核狀態、轉碼狀態的查看。
- 操作主要有預熱、取消推薦、窄帶高清轉碼。

操作步驟

下載趣視頻Demo源碼。

控制台整合需要先下載趣視頻AppSever及管理主控台Demo源碼。具體資訊，請參見趣視頻SDK（短視頻解決方案）。

解壓源碼包。video-admin檔案夾目錄結構如下所示：

├── node_modules                  // node依賴安裝目錄，執行npm install之後依賴安裝目錄。
├── dist                          // 打包之後的檔案目錄。
├── public                        
│   ├── favicon.ico               
│   └── index.html                // 網頁主入口，引用cdn等線上js和css。
├── src                           // 商務邏輯以及Vue組件目錄。
│   ├── assets                    // 放置一些靜態資源，包括css、images、fonts等。
│   │   ├── images
│   │   └── scss
│   ├── components                // vue組件目錄。
│   │   ├── RecommendVideo.vue    // 推薦視頻彈框組件。
│   │   └── VodPlayer.vue         // 播放器組件。
│   │   └── Tags.vue         // 視頻標籤。
│   │   └── VideoDot.vue         // 視頻打點。
│   │   └── VideoSort.vue         // 設定集。
│   ├── mixin                     // vue mixin目錄。
│   │   └── index.js
│   ├── router-short        //路由表配置。
│   │   └── index.js
│   ├── views                     // vue-router對應的渲染組件所在目錄。
│   │   ├── list                  // 視頻列表路由對應渲染組件。
│   │   │  └── index.vue
│   │   ├── login                 // 登入路由對應渲染組件。
│   │   │   └── index.vue
│   │   ├── recommend             // 推薦視頻列表對應渲染組件。
│   │   │   └── index.vue
│   │   └── videos                // 主介面側邊欄頭部渲染組件。
│   │       └── index.vue
│   ├── App.vue                   // 渲染主組件。
│   ├── main.js                   // 主入口檔案。
│   └── router.js                 // vue-router路由設定檔。
├── .browserslistrc               // 瀏覽器安全色列表。
├── .gitignore
├── babel.config.js               // babel設定檔。
├── package-lock.json
├── package.json                  // 包說明檔案，包括各種依賴、作者、描述等。
├── postcss.config.js             // postcss設定檔，加上css的廠商首碼。
├── README.md
├── README_zh.md
└── vue.config.js                 // vue設定檔。

說明趣視頻控制台前端源碼位於video-admin下，後續命令執行都需要在video-admin下進行。

配置及編譯。
1. 修改./video-admin/vue.config.js中的配置，將proxy設定成完成趣視頻服務端整合的Elastic Compute Service的公網IP地址，並添加連接埠號碼8080。樣本：http://<Elastic Compute Service公網IP地址>:8080，完整的配置如下：
```
module.exports = {
// 設定前端開發時的代理
devServer: {
 proxy: 'http://*.*.*.*:8080',    // 替換成ECS伺服器位址，後面不要加'/'。
},
productionSourceMap: false,
// 設定生產環境和開發環境時的靜態資源路徑。
publicPath: process.env.NODE_ENV === 'production'
 ? 'http://example.com/resource/'
 : '/',
}
```
2. 環境安裝好之後。開啟命令列工具，切換到video-admin目錄下，安裝專案依賴，執行以下命令：
```
npm install
```
3. 依賴安裝完畢並修改配置之後，執行以下命令：
```
npm run serve
```
  說明
  執行該命令後，會在本地開啟一個服務。在瀏覽器中開啟預設地址http://localhost:8080，即可在本地使用控制台，對上傳的視頻進行審核、推薦等操作。如果是在伺服器開啟的此服務，可在本地瀏覽器開啟http://伺服器IP:8080。
  服務端整合的資料庫初始化步驟中預設建立了一個控制台管理員帳號。使用者名稱：admin，密碼：123456，使用該帳號可以登入控制台。
打包發布。
1. 修改./video-admin/vue.config.js中的配置。
  生產環境即發布時，vue.config.js中publicPath要設定成為您放置靜態資源的地址，例如本專案後端使用的spring boot架構，靜態資源目錄為webapp/resource/short-video，那麼vue.config.js中的publicPath配置如下：
```
module.exports = {
   // 設定前端開發時的代理。
   devServer: {
    proxy: 'http://*.*.*.*:8080',    // 替換成ECS伺服器位址，後面不要加'/'。
   },
  productionSourceMap: false,
  // 設定生產環境和發布環境時的靜態資源路徑。
  publicPath: process.env.NODE_ENV === 'production'
    ? '/resource/short-video/'
    : '/',
}
```
2. 切換到專案目錄video-admin下，執行以下打包命令：
```
npm run build
```
  說明
  該命令會壓縮靜態資源檔案，可作為生產環境打包發布。
  專案打包是執行vue-cli封裝的webpack來進行打包，webpack的個人化可以在vue.config.js中設定。詳細配置，請參見vue-cli配置。
3. 執行完打包命令之後，video-admin/dist下會產生打包檔案。檔案目錄結構如下：
```
├──dist
   ├── css
   │   ├── app.[hash].css             // vue組件中的css以及自訂的css。
   │   └── chunk-vendors.[hash].css   // 依賴中所引入的css。
   ├── fonts
   ├── img
   ├── js
   │   ├── app.[hash].css             // vue組件中的js，以及自訂的js。
   │   └── chunk-vendors.[hash].css   // 依賴中所引入的js。
   ├── favicon.ico
   └── index.html
```
  說明打包時webpack已經幫我們把依賴中的css、 js和自己寫的css、 js抽離並拆分成了不同的檔案，這樣不僅能加快頁面響應速度，另外在迭代時，依賴沒有更改的話我們只需要更新app.[hash].js和app.[hash].css。
服務端發布。
1. 本專案後端使用的是spring boot架構，通過配置targetPath來指定控制台Web所在目錄，本Demo已將路徑配置為resources，如需修改，請重新設定服務端pom.xml檔案中<resources>標籤下的targetPath。
2. 將上個步驟打包產生的./video-admin/dist檔案夾上傳至ECS伺服器，並將其中的所有檔案放置到服務端源碼中的/src/main/webapp/resource/short-video/目錄下：
```
# 使用scp等方式上傳dist檔案夾至ECS伺服器，把dist檔案夾下檔案複製（覆蓋）到short-video下。
scp -rf 上傳目錄/dist/* 服務端源碼根目錄/src/main/webapp/resource/short-video/
```
3. 將整合了控制台的服務端源碼重新打包並部署到服務端，重新啟動服務端。更多資訊，請參見服務端整合。
```
# 將命令列切換到專案根目錄下，執行編譯打包命令（若服務端已運行，建議先停止服務再打包）。
mvn clean package -Dmaven.test.skip=true
# 打包成功後在專案根目錄下的target/目錄下可以找到 “sdk-api-0.0.1-SNAPSHOT.jar”檔案。
# 將命令列定位到jar包所在的目錄，部署jar包並啟動。
nohup java -jar sdk-api-0.0.1-SNAPSHOT.jar &
```
  說明當購買的ECS記憶體較小時，請先使用jps和kill命令停止服務，再使用mvn和java命令重新打包並運行jar包，否則會出現記憶體不足打包失敗的情況。
4. 在瀏覽器中輸入趣視頻服務端地址，存取控制台頁面。樣本：http://<Elastic Compute Service公網IP地址>:8080/resource/index.html或http://網域名稱/resource/index.html。