TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 十、《工程化部署》

一、前言

在实际业务开发中，会遇到这样一种需求，使用VUE的页面需要支持SEO，同时对首屏有指标性要求，目前市面上普遍使用的是Nuxt.js解决方案，在引入的同时还需要考虑与现有的全栈工程结合，本系列文章探讨的是此类全栈工程的解决方案，同时使用的是TypeScript应用于前后端编程，文章中介绍的工程与技术要点源码已上传至Github，有需要的朋友可自行下载：
Nuxt.js和Nest.js同构工程

文章意在抛砖引玉，前后端使用同一种语言TypeScript编写，示例已包含基本接口请求，数据库连接应用，公用模块封装等实际开发中使用到的内容。

效果预览:

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 二、《框架融合》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 三、《配置服务》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 四、《UI系统》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 五、《API服务设计》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 六、《SEO功能实现》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 七、《Vuex使用》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 八、《接入Mongo DB服务》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 九、《TypeScript》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 十、《工程化部署》

二、编译

本文本地针对产生发布与部署展开，第一步则需要建立编译机制，一般在一定规模团队的公司体系中，服务器编译基本交给运维自动化部署系统来编译，因此，工程需要做的是在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

前后端编译

三、启动

启动同样遵循以上规则，一般为默认的npm run start或者npm start

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

start启动的则是编译后转译的dist目录下的服务端入口。

四、普通部署

完成以上两步骤之后，如果是LINUX普通环境部署，则需要要求运维平台在启动命令调用前设置环境变量和端口，对应的代码层面接收是这样的：

五、Docker容器部署

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

npm install -g @nestjs/cli

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

  

• Dockerfile