tags: Training

安裝開發環境

VSCode install

安裝VSCodeUserSetup-x64-1.38.1.exe
*Lina提供,*存在個人資料夾,E:\CloudPlatform-Web

install nvm

至https://github.com/coreybutler/nvm-windows/releases/tag/1.1.7

  1. 下載nvm-setup.zip
    *nvm安裝路徑預設值 C:\Users\Sean\AppData\Roaming\nvm
    *system path 預設值 C:\Program Files\nodejs
    *存在個人資料夾,E:\CloudPlatform-Web

  2. 開啟terminal,查詢nvm list available

    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 →

  3. 安裝12.13.1版
    nvm install 12.13.1

  4. 使用12.13.1版
    nvm use 12.13.1

  5. 下載node version
    https://nodejs.org/en/blog/release/v12.13.1/

  6. 檢查node version
    node -v

ref
https://hsiangfeng.github.io/nodejs/20200107/3738078915/

https://drive.google.com/drive/folders/1VRjn14DTovhIyEcaaCMkxkBnf5cRto62

install redis

  1. 先安裝redisinsight-win-1.7.1.msi
    *redisinsight安裝路徑預設值 C:\Program Files (x86)\RedisInsight\

  2. 再安裝Redis-x64-3.2.100.msi
    *redis安裝路徑預設值 C:\Program Files\Redis
    *redis預設值 port : 6379

*存在個人資料夾,E:\CloudPlatform-Web

install mongodb

  1. 先安裝mongodb-compass-1.22.1-win32-x64.msi
    *mongodb-compass安裝路徑預設值 C:\Program Files\MongoDB Compass\

  2. 再安裝mongodb-win32-x86_64-2012plus-4.2.1-signed.msi
    *mongodb data路徑預設值 C:\Program Files\MongoDB\Server\4.2\data
    *mongodb log路徑預設值 C:\Program Files\MongoDB\Server\4.2\log
    *mongodb預設值 port : 27017

*存在個人資料夾,E:\CloudPlatform-Web

install mysql

  1. 查詢3306 port是否被占用
    netstat -aon|findstr "3306"

  2. 停用MySQL服務
    net stop mysql

  3. 切換至MySQL安裝路徑
    cd C:\Program Files\MySQL\MySQL Server 5.6\bin

  4. 使用MySQL安全模式
    mysqld --skip-grant-tables

  5. 另開terminal,並切換目錄於C:\Program Files\MySQL\MySQL Server 5.6\bin路徑下執行mysql

mysql>use mysql; mysql>update user set password = PASSWORD('123456') where user = 'root'; mysql>flush privileges; mysql>quit;

ref:
https://fion0708.pixnet.net/blog/post/34300729

install TortoiseGit

download

下載jade-node-framework
下載jade-portal-framework
下載jade-node-order
下載jade-portal-order

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 →

  • 存放路徑E:\CloudPlatform-Web\Sample\Order>

開起VSCode

  1. 開起資料夾路徑 Folder E:\CloudPlatform-Web\Sample\Order
  2. 打開Terminal
    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 →

npm install

  1. 於terminal切換至jade-node-framework資料夾
    cd .\jade-node-framework\

  2. 執行npm install安裝,會參考package.json
    npm install

    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 →

  3. 重複把jade-node-framework、jade-portal-framework、jade-node-order、jade-portal-order四個project 都安裝過

打包前端React Code

  1. 切換至react project,如jade-portal-framework,執行npm run build
    npm run build

  2. build成功後,產生出build資料夾於E:\CloudPlatform-Web\Sample\Order\jade-portal-framework\build

    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 build出來的build資料夾至node project

  1. 複製build資料夾至jade-node-framework的server資料夾內
    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 →

至jade-node-framework的server/config/config.ts修改設定

import express from 'express'; import os from 'os'; const app: express.Application = express(); // 取得開發環境變數 const development = app.get('env') !== 'production'; // 取得 server IP const getIPAddress = (): string => { let address = ''; const interfaces = os.networkInterfaces(); Object.keys(interfaces).find((devName, index, array) => { const iface = interfaces[devName]; iface.find((itemIface, indexIface, arrayIface) => { const alias = iface[indexIface]; if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) { address = alias.address; } return address !== ''; }); return address !== ''; }); return address; }; //const serverIP = getIPAddress(); const serverIP = 'localhost'; let mongoDB = ''; let redis = ''; if (development) { mongoDB = 'mongodb://127.0.0.1/fixo'; redis = '127.0.0.1'; } else { mongoDB = 'mongodb://mongo/fixo'; redis = 'redis'; } let casServer = (process.env.CAS_SERVER === 'hpc') ? 'https://account.dct-cloud.com/sso' : 'http://10.62.164.137:443/portal'; // 'http://sso.fii-hpc.com:443/portal' ; export default class Config { development: boolean; project: string; region: string; rootUrl: string; publicUrl: string; domain: string; adminAPIUrl: string; fixoAPIUrl: string; serverProtocol: string; serverIP: string; serverPort: string; webSocketPort: string; originIPList: any; casServer: string; mongoDB: string; redis: string; mariaDBOrder: string; jwtSecret: string; jwtExpire: number; sessionName: string; cookieSecret: string; cookieMaxAge: number; rateLimitRedisExpiry: number; rateLimitWindowMs: number; rateLimitMax: number; rateLimitDelayMs: number; rabbitMQHost: string; rabbitMQPort: string; rabbitMQUsername: string; rabbitMQPassword: string; rabbitMQAuthMechanism: string; rabbitMQPathname: string; rabbitMQReceiveQueue: string; rabbitMQSendQueue: string; constructor() { this.development = development; this.project = 'portal'; this.region = 'LH-Q'; this.rootUrl = 'http://localhost:8090'; this.publicUrl = 'order/'; this.domain = process.env.SESSION_DOMAIN || ''; this.adminAPIUrl = 'http://10.62.164.137:443'; this.fixoAPIUrl = 'http://10.62.164.137:1443'; this.serverProtocol = 'http'; this.serverIP = serverIP; this.serverPort = '8090'; this.webSocketPort = '3010'; this.originIPList = ['http://10.134.202.131:443']; //this.casServer = 'http://mtjade.fii-usa.com:443'; this.casServer = casServer; this.mongoDB = mongoDB; this.redis = redis; //this.mariaDBOrder = 'mariadb://root:123456@localhost:3307/order'; this.mariaDBOrder = 'mariadb://root:foxconn@localhost:3306/order'; this.jwtSecret = '`FWm6@gNxj!px}(mj`T"g{BMZ9>x<qdd&M;]n9.:>XbS_)YZPjzQ,nc/^x/!"_QC5J_a!Vt{g=;T9!pQbqSU#V2EF3HwN&qL_2hcB@BC[B-*&$)Z.(XLm[Fd"H&!NdQM'; this.jwtExpire = 12 * 60 * 60; // second, 12 小時過期 this.sessionName = 'fixo.sessionId'; //不同案子放不同解決IP相同時的衝突問題 this.cookieSecret = '`FWm6@gNxj!px}(mj`T"g{BMZ9>x<qdd&M;]n9.:>XbS_)YZPjzQ,nc/^x/!"_QC5J_a!Vt{g=;T9!pQbqSU#V2EF3HwN&qL_2hcB@BC[B-*&$)Z.(XLm[Fd"H&!NdQM'; this.cookieMaxAge = 12 * 60 * 60 * 1000; // milliSecond, 12 * 60 * 60 * 1000, 12 小時過期, null, 無限制 this.rateLimitRedisExpiry = 60 * 60; // second, 1 小時內 this.rateLimitWindowMs = 60 * 60 * 1000; // milliSecond, 1 小時內 this.rateLimitMax = 3600; // 3600 次, 1 秒 1 次 this.rateLimitDelayMs = 0; // disabled 延遲響應 this.rabbitMQHost = 'localhost'; this.rabbitMQPort = '5672'; this.rabbitMQUsername = 'guest'; this.rabbitMQPassword = '1QAZ2wsx'; this.rabbitMQAuthMechanism = 'AMQPLAIN'; this.rabbitMQPathname = '/'; this.rabbitMQReceiveQueue = 'fixoweb'; this.rabbitMQSendQueue = 'fixoweb'; } }

line37 let casServer = 'sso.dcascloud.com'; // 設定SSO Server
this.adminAPIUrl = 'http://10.134.202.68:443'; // 設定Entry API Url
this.fixoAPIUrl = 'http://10.134.202.201:443'; // 設定Region API Url
this.mariaDBOrder = 'mariadb://root:123456@localhost:3306/order'; // 設定Local mariaDB

我的問題

變數 用途 建議
development 佈署時,可以加入判別 isDevelop
project server.ts API導流用,ex. node order判斷上面是接react portal order or react mgmt order
rootUrl 待補充
publicUrl uri前綴,ex 主應用=portal, mgmt; 子應用=portal/order, mgmt/order
domain 待補充
adminAPIUrl 待補充 entryAPIUrl
fixoAPIUrl 待補充 regionAPIUrl
serverProtocol 待補充
serverIP 待補充
serverPort 待補充
webSocketPort 待補充
originIPList 跨域Access-Control-Allow-Origin

copyStaticAssets.ts

使用shell cmd執行
複製資料夾('server/build', 'ecosystem.config.js', 'package.json', 'package-lock.json')到'jade-web'資料夾

import * as shell from 'shelljs'; shell.cp('-R', 'server/build', 'jade-web/'); shell.cp('-R', 'ecosystem.config.js', 'jade-web/'); shell.cp('-R', 'package.json', 'jade-web/'); shell.cp('-R', 'package-lock.json', 'jade-web/');

至jade-portal-framework的server/server/build/portal/order/config.js修改設定

window.__env = { 'REACT_APP_COOKIE_DOMAIN': 'fii-hpc.com', // 與FiXo Cookie溝通domain 'REACT_APP_MAIN_URL': 'http://localhost:3001', // 本地開發React時使用,目前佈署及打包未使用 'REACT_APP_API_URL': 'http://localhost:3000', // 設定Nodejs backend URL 'REACT_APP_FIXO_WEB_URL': 'http://10.62.164.137:8080', // 設定dcasweb的URL,VPC創Network時使用 'REACT_APP_FIBO_URL': 'http://fibo.dct-cloud.com:7480/swift/v1/cece8dcd33544c20aa5bbfca84412a85-order-system', // 讀取fibo資料用,目前暫時先不使用 // Entry Registry 'REACT_APP_ENTRY_ORDER': 'http://localhost:8091/portal/order', // portal framework下的子應用,portal代表主應用,order代表子應用 'REACT_APP_ENTRY_METER': 'http://localhost:9002' // portal framework下的子應用 }

至jade-node-order的server/config/config.ts修改設定

至jade-portal-order的server/server/build/portal/order/config.js修改設定