TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 10、《工程化部署》

1、前言

在實際業務開發中，會遇到這樣一種需求，使用VUE的頁面須要支持SEO，同時對首屏有指標性要求，目前市面上廣泛使用的是Nuxt.js解決方案，在引入的同時還須要考慮與現有的全棧工程結合，本系列文章探討的是此類全棧工程的解決方案，同時使用的是TypeScript應用於先後端編程，文章中介紹的工程與技術要點源碼已上傳至Github，有須要的朋友可自行下載：
Nuxt.js和Nest.js同構工程

複製代碼

文章意在拋磚引玉，先後端使用同一種語言TypeScript編寫，示例已包含基本接口請求，數據庫鏈接應用，公用模塊封裝等實際開發中使用到的內容。

效果預覽:

如下爲該系列文章入口列表:
TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 1、《簡介》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 2、《框架融合》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 3、《配置服務》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 4、《UI系統》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 5、《API服務設計》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 6、《SEO功能實現》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 7、《Vuex使用》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 8、《接入Mongo DB服務》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 9、《TypeScript》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 10、《工程化部署》

2、編譯

本文本地針對產生髮布與部署展開，第一步則須要創建編譯機制，通常在必定規模團隊的公司體系中，服務器編譯基本交給運維自動化部署系統來編譯，所以，工程須要作的是在npm script中暴露編譯命令，在本示例中使用的是npm run build

"build": "npm run lint && cross-env NODE_ENV=production npm run clean && nuxt build && tsc",
複製代碼

在開始編譯以前，使用了lint做語法檢查，在這一過程當中不經過則會拋錯，沒法進行下一步編譯操做

"lint": "tslint -p tsconfig.json -c tslint.json",
複製代碼

當這一過程完成以後，下一步纔是調用

nuxt build && tsc
複製代碼

先後端編譯

3、啓動

啓動一樣遵循以上規則，通常爲默認的npm run start或者npm start

"start": "npm run cover && cross-env NODE_ENV=production node dist/src/server/main.js",
複製代碼

start啓動的則是編譯後轉譯的dist目錄下的服務端入口。

4、普通部署

完成以上兩步驟以後，若是是LINUX普通環境部署，則須要要求運維平臺在啓動命令調用前設置環境變量和端口，對應的代碼層面接收是這樣的：

5、Docker容器部署

Docker部署官方CLI工具默認集成，@nestjs/cli

npm install -g @nestjs/cli
複製代碼

• 在根目錄部署docker-compose.yml

  

• Dockerfile