一、前言
在实际业务开发中,会遇到这样一种需求,使用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) - 三、《配置服务》
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