aim-web
===
[TOC]
## 專案介紹
### 開發環境準備
* linux os 預裝以下 packages:
build-essential, libssl-dev, gcc, make, git, curl, openssl
* docker engine
* npm
* node.js v14.18.3 (其他版本可能面臨 SASS 相容問題)
* vscode or 其他編輯器
### 使用的前端框架
* vue.js - The Progressive JavaScript Framework
[https://vuejs.org/](https://vuejs.org/)
* vuetify - Vue Component Framework
[https://v2.vuetifyjs.com/en/introduction/why-vuetify/](https://v2.vuetifyjs.com/en/introduction/why-vuetify/)
### 設置環境變數
* .env 為開發時的環境變數設定檔
```bash
AIM_WEBMAIN_DDN=">aim/kapi/webmain-app"
AIM_MMS_DDN=">aim/kapi/aim-mms-app"
AIM_CONFIG=aimkt-stage.json
```
### 開發環境 VM 說明
* aimkt-stage 主機
1. SSH 登入: ssh ubuntu@aimkt-stage.nchc.org.tw -p 6022
2. 申請網址:[https://aimkt-stage.nchc.org.tw/](https://aimkt-stage.nchc.org.tw/)
3. 使用 docker 安裝相關軟體 motebus, webmms-gate, twcc-sso
4. 已建置 node.js 開發環境
5. MMS 指令會派送至 ai-market.nchc.org.tw 執行
6. 需要 iService SSO 申請
a. 登入:
https://aimkt-stage.nchc.org.tw 按登入後網址連線到
https://iservice.nchc.org.tw/nchc_service/index.php?open_login=1&return_address=https://iservice.nchc.org.tw/nchc_service/twcc_ai_sso.php?site=aimkt-stage
登入成功後，重導至 https://aimkt-stage.nchc.org.tw/api/auth/callback/
b. 登出:
https://aimkt-stage.nchc.org.tw 按登出後網址連線到
https://iservice.nchc.org.tw/logout_twcc.php?site=aimkt-stage
登出成功後，重導至 https://aimkt-stage.nchc.org.tw
---
* aimkt 主機
1. SSH 登入: ssh ubuntu@aimkt.nchc.org.tw -p 6022
2. 申請網址:[https://aimkt.nchc.org.tw/](https://aimkt.nchc.org.tw/)
3. 使用 k8s 安裝相關軟體 motebus, webmms-gate, twcc-sso
4. MMS 指令會派送至 ai-market.nchc.org.tw 執行
5. 需要 iService SSO 申請
a. 登入:
https://aimkt.nchc.org.tw 按登入後網址連線到
https://iservice.nchc.org.tw/nchc_service/index.php?open_login=1&return_address=https://iservice.nchc.org.tw/nchc_service/twcc_ai_sso.php?site=aimkt
登入成功後，重導至 https://aimkt.nchc.org.tw/api/auth/callback/
b. 登出:
https://aimkt.nchc.org.tw 按登出後網址連線到
https://iservice.nchc.org.tw/logout_twcc.php?site=aimkt
登出成功後，重導至 https://aimkt.nchc.org.tw
---
## 開發階段
### 安裝 vscode 軟體
### vscode 安裝套件
* SFTP - sftp sync extension
* Volar - vue language features
### sftp 設定檔
* 在專案目錄下建立 .vscode 目錄
* 在 .vscode 目錄下新建 sftp.json 內容如下：
```json
{
"name": "aim-web",
"protocol": "sftp",
"host": "aimkt-stage.nchc.org.tw",
"port": 6022,
"username": "ubuntu",
"password": "xxxxxxxxxxxxx",
"remotePath": "/home/ubuntu/aimkt2023",
"uploadOnSave": true,
"useTempFile": false,
"openSsh": false,
"syncMode": "update",
"watcher": {
"files": "**/*",
"autoUpload": true,
"autoDelete": true
},
"ignore": [
"**/.vscode/**",
"**/.git/**",
"**/.DS_Store",
"**/node_modules/**"
]
}
```
### 同步至開發 VM (第一次使用)
* sftp 將 aim-web 目錄 sync 到 aimkt-stage VM上
* SSH 登入至 aimkt-stage VM 並執行以下指令來進行 node.js library 安裝
```bash
cd aimkt2023/aim-web
npm install
```
### 啟動 dev-server (每次開發前，如已使用pm2自動啟動則忽略此步驟)
* SSH 登入 aimkt-stage VM 並執行以下指令
```bash
cd aimkt2023/aim-web
npm run dev
```
* 開啟瀏覽器來確定網頁是否啟動
url: [https://aimkt-stage.nchc.org.tw/](https://aimkt-stage.nchc.org.tw/)
### 使用 pm2 來自動啟動 dev-server
```bash
cd aimkt2023/aim-web
pm2 start ecosystem.config.js
# 列出所有程式
pm2 list
# 輸出 log
pm2 logs
# 停止 aim-web
pm2 stop aim-web
# 啟動 aim-web
pm2 start aim-web
# 重新啟動 aim-web
pm2 restart aim-web
```
### 使用 vscode 編輯網頁
* vscode 編輯存檔後會自動 sync 到 VM 上
* dev-server 會自動 hot reload
### 建立映像檔
* 在 aim-web 目錄下執行以下指令來產生映像檔並發送至 dockerhub
```bash
./build.sh [帳號] [密碼] [image名稱] [版本]
```
範例：
./build.sh motebus xxxxxx motebus/aim-weblab 3.0.8
* 使用 docker images 來確認映像檔是否建立
---
## 測試階段
### 使用 k8s 來進行測試
* SSH 登入 aimkt VM 並執行以下指令
```bash
cd aimkt2023/deploy/aimkt
vim aim.yml
sudo ./apply.sh
```
* 開啟瀏覽器來確定網頁是否更新
url: [https://aimkt.nchc.org.tw/](https://aimkt.nchc.org.tw/)
---
> [AIM 2023 系統文件](https://md.ypcloud.com/s/OsgdnoJLE
)
> [name=Richard Ho]
> ###### tags: `AIM`,`2023`