手把手教你怎么正确快速的部署一个TS Node.js项目!
怎么正确快速的部署一个TS Node.js项目?下面本篇文章就来教大家怎么在几分钟内部署一个TS Node.js应用,希望对大家有所帮助!
作为全栈开发者,创建项目是很有趣的,可以设计架构,头脑风暴,开发,但在开发结束之后呢,我们就要部署或发布应用。那么如何正确快速的部署一个TS Node.js项目呢,今天我们来搞定它。【推荐学习:《nodejs 教程》】
创建一个TS Node.js应用
如果你已经熟悉创建TS Node.js项目,可以直接跳到“部署发布应用”部分
初始化Node.js项目:
在我们团队,我们非常喜欢TS,并且在我们的所有新项目中都会使用TS,因此创建一个TS项目并不新鲜。
让我们从最基本的开始:
npm init
初始化一个Node.js项目,使用-y
参数可以快速跳过一步一步的配置npm install express @types/express
安装express依赖,和用于TS开发的express的types类型文件npm install typescript --save-dev
安装typescript作为开发依赖
mkdir my-app && cd my-app npm init -y npm install express @types/express --save npm install typescript --save-dev
TS配置
npx tsc --init
将创建一个typescript默认配置文件tsconfig.jsondeclaration
用于指定是否在编译完成后生成相应的*.d.ts文件,默认为falseoutdir
定义TS编译后的目录,如果没有声明,默认编译后的文件位置将和ts源文件在同一位置
运行命令
npx tsc --init
修改以下配置
"compilerOptions": { ... "outDir": "dist", // 编译后输出目录 "declaration": true // 生成 d.ts }
创建项目入口文件
创建server.ts
文件
import express from 'express' const app = express() const PORT = 3000 app.use(express.json()) app.get('/', (req, res) => { res.send(‘Hello World!’) }) app.listen(PORT, () => { console.log(`Server is listening on port ${PORT}`) })
完成上述步骤后,我们的文件目录结构如下
. ├── node_modules ├── package-lock.json ├── package.json ├── server.ts └── tsconfig.json
编译TS
我们下一步是构建和部署我们的TS Node.js应用,由于在生产环境中,我们不运行TS版本,而是运行编译后的JS。下面我们来编译项目
修改package.json文件增加以下命令
npm run tsc
将会根据我们tsconfig.json的配置编译我们的项目,并输出到指定目录npm run start:prod
将会运行我们编译后的JS文件
"scripts": { "tsc": "tsc", "start:prod": "node dist/server.js" }
然后在本地进行测试
npm run tsc npm run start:prod # 服务启动成功,运行端口:3000
通过浏览器访问http://localhost:3000/,访问成功,接下来我们部署和发布我们的应用
部署发布应用
这里我们主要采用两种方法将编译后的TS项目分发部署到各种环境中
- npm依赖包的形式
- docker容器方式
NPM依赖包的形式
NPM生命周期钩子
一些特殊的生命周期钩子会在触发指定操作时被触发,这里我们将使用“prepare”钩子,该狗子会在执行npm publish命令发布到NPM之前被触发一次。所以我们可以这时编译的TS应用。
指定发布文件
通过 “files”字段我们可以去定义发布NPM包时应该包括哪些文件,如果省略该属性默认会为["*"],会上传所有文件。
下面是修改后的package.json
"name": "my-app-xiaoshuai", // 我们发布到NPM上的名字 "main": "dist/server.js", // 修改入口文件地址 "types": "dist/server.d.ts", // 指定TS类型文件 "files": [ "dist", "package.json", "package-lock.json", "README.md" ], "scripts": { "tsc": "tsc", "prepare": "npm run tsc" // 编辑typescript }
npm publish
在修改完package.json配置后,我们运行npm publish命令,将我们的应用发布到NPM上去
npm publish
输出
发布成功后,可以看到npmjs上多了一个my-app-xiaoshuai
包
Docker容器方式
要将我们的TS Node.js应用作为容器发布,我们要在项目根目录中创建docker配置文件Dockerfile。
下面我们一步步编写Dockerfile文件
拷贝编译后的文件到容器内
拷贝package.json和package-lock.json到容器内
使用
npm install
安装依赖使用
node build/server.js
运行我们的应用
# Node 版本 FROM node:14.18.0-alpine ARG NODE_ENV=production ENV NODE_ENV $NODE_ENV COPY ./dist /dist COPY ./package.json /package.json COPY ./package-lock.json /package-lock.json RUN NODE_ENV=$NODE_ENV npm install EXPOSE 3000 CMD ["node", "dist/server.js"]
现在我们可以在根目录中构建docker镜像,运行 docker build --tag my-app:test .
命令
docker build --tag my-app:test .
成功后输出如下
接着我们运行容器,使用docker run -p 3000:3000 -it my-app:test
命令来运行我们的应用,可以看到程序成功运行在3000端口
docker run -p 3000:3000 -it my-app:test # 服务启动成功,运行端口:3000
通过浏览器访问http://localhost:3000/,访问成功
源码
https://github.com/cmdfas/ts-node-express-deploy
总结
今天我们介绍了创建TS Node.js项目和部署它的基础知识,希望对大家有所帮助,能够用在现在或未来的项目中。
更多编程相关知识,请访问:编程视频!!
以上是手把手教你怎么正确快速的部署一个TS Node.js项目!的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

PHP与Vue:完美搭档的前端开发利器在当今互联网高速发展的时代,前端开发变得愈发重要。随着用户对网站和应用的体验要求越来越高,前端开发人员需要使用更加高效和灵活的工具来创建响应式和交互式的界面。PHP和Vue.js作为前端开发领域的两个重要技术,搭配起来可以称得上是完美的利器。本文将探讨PHP和Vue的结合,以及详细的代码示例,帮助读者更好地理解和应用这两

在前端开发面试中,常见问题涵盖广泛,包括HTML/CSS基础、JavaScript基础、框架和库、项目经验、算法和数据结构、性能优化、跨域请求、前端工程化、设计模式以及新技术和趋势。面试官的问题旨在评估候选人的技术技能、项目经验以及对行业趋势的理解。因此,应试者应充分准备这些方面,以展现自己的能力和专业知识。

Django是一个Python编写的web应用框架,它强调快速开发和干净方法。尽管Django是一个web框架,但是要回答Django是前端还是后端这个问题,需要深入理解前后端的概念。前端是指用户直接和交互的界面,后端是指服务器端的程序,他们通过HTTP协议进行数据的交互。在前端和后端分离的情况下,前后端程序可以独立开发,分别实现业务逻辑和交互效果,数据的交

作为一名C#开发者,我们的开发工作通常包括前端和后端的开发,而随着技术的发展和项目的复杂性提高,前端与后端协同开发也变得越来越重要和复杂。本文将分享一些前端与后端协同开发的技巧,以帮助C#开发者更高效地完成开发工作。确定好接口规范前后端的协同开发离不开API接口的交互。要保证前后端协同开发顺利进行,最重要的是定义好接口规范。接口规范涉及到接口的命

Go语言作为一种快速、高效的编程语言,在后端开发领域广受欢迎。然而,很少有人将Go语言与前端开发联系起来。事实上,使用Go语言进行前端开发不仅可以提高效率,还能为开发者带来全新的视野。本文将探讨使用Go语言进行前端开发的可能性,并提供具体的代码示例,帮助读者更好地了解这一领域。在传统的前端开发中,通常会使用JavaScript、HTML和CSS来构建用户界面

Django:前端和后端开发都能搞定的神奇框架!Django是一个高效、可扩展的Web应用程序框架。它能够支持多种Web开发模式,包括MVC和MTV,可以轻松地开发出高质量的Web应用程序。Django不仅支持后端开发,还能够快速构建出前端的界面,通过模板语言,实现灵活的视图展示。Django把前端开发和后端开发融合成了一种无缝的整合,让开发人员不必专门学习

Golang与前端技术结合:探讨Golang如何在前端领域发挥作用,需要具体代码示例随着互联网和移动应用的快速发展,前端技术也愈发重要。而在这个领域中,Golang作为一门强大的后端编程语言,也可以发挥重要作用。本文将探讨Golang如何与前端技术结合,以及通过具体的代码示例来展示其在前端领域的潜力。Golang在前端领域的作用作为一门高效、简洁且易于学习的

前端ESM是什么,需要具体代码示例在前端开发中,ESM是指ECMAScriptModules,即基于ECMAScript规范的模块化开发方式。ESM带来了许多好处,比如更好的代码组织、模块间的隔离和可重用性等。本文将介绍ESM的基本概念和用法,并提供一些具体的代码示例。ESM的基本概念在ESM中,我们可以把代码分为多个模块,每个模块对外暴露一些接口供其他模
