如何正確快速的部署一個TS Node.js項目

本篇內(nèi)容主要講解“如何正確快速的部署一個TS Node.js項目”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“如何正確快速的部署一個TS Node.js項目”吧!

作為全棧開發(fā)者，創(chuàng)建項目是很有趣的，可以設(shè)計架構(gòu)，頭腦風(fēng)暴，開發(fā)，但在開發(fā)結(jié)束之后呢，我們就要部署或發(fā)布應(yīng)用。那么如何正確快速的部署一個TS Node.js項目呢，今天我們來搞定它。

創(chuàng)建一個TS Node.js應(yīng)用

如果你已經(jīng)熟悉創(chuàng)建TS Node.js項目，可以直接跳到“部署發(fā)布應(yīng)用”部分

初始化Node.js項目：

在我們團隊，我們非常喜歡TS，并且在我們的所有新項目中都會使用TS，因此創(chuàng)建一個TS項目并不新鮮。

讓我們從最基本的開始：

• npm init 初始化一個Node.js項目，使用-y參數(shù)可以快速跳過一步一步的配置

• npm install express @types/express 安裝express依賴，和用于TS開發(fā)的express的types類型文件

• npm install typescript --save-dev 安裝typescript作為開發(fā)依賴

mkdir my-app && cd my-app
npm init -y
npm install express @types/express --save
npm install typescript --save-dev

TS配置

• npx tsc --init 將創(chuàng)建一個typescript默認配置文件tsconfig.json

• declaration 用于指定是否在編譯完成后生成相應(yīng)的*.d.ts文件，默認為false

• outdir 定義TS編譯后的目錄，如果沒有聲明，默認編譯后的文件位置將和ts源文件在同一位置

運行命令

 npx tsc --init

修改以下配置

"compilerOptions": {
  ...
  "outDir": "dist", // 編譯后輸出目錄
  "declaration": true // 生成 d.ts
}

創(chuàng)建項目入口文件

創(chuàng)建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}`)
})

完成上述步驟后，我們的文件目錄結(jié)構(gòu)如下

.
├── node_modules
├── package-lock.json
├── package.json
├── server.ts
└── tsconfig.json

編譯TS

我們下一步是構(gòu)建和部署我們的TS Node.js應(yīng)用，由于在生產(chǎn)環(huán)境中，我們不運行TS版本，而是運行編譯后的JS。下面我們來編譯項目

修改package.json文件增加以下命令

• npm run tsc 將會根據(jù)我們tsconfig.json的配置編譯我們的項目，并輸出到指定目錄

• npm run start:prod 將會運行我們編譯后的JS文件

"scripts": {
  "tsc": "tsc",
  "start:prod": "node dist/server.js"
}

然后在本地進行測試

npm run tsc
npm run start:prod

# 服務(wù)啟動成功，運行端口：3000

通過瀏覽器訪問http://localhost:3000/，訪問成功，接下來我們部署和發(fā)布我們的應(yīng)用

部署發(fā)布應(yīng)用

這里我們主要采用兩種方法將編譯后的TS項目分發(fā)部署到各種環(huán)境中

• npm依賴包的形式

• docker容器方式

NPM依賴包的形式

NPM生命周期鉤子

一些特殊的生命周期鉤子會在觸發(fā)指定操作時被觸發(fā)，這里我們將使用“prepare”鉤子，該狗子會在執(zhí)行npm publish命令發(fā)布到NPM之前被觸發(fā)一次。所以我們可以這時編譯的TS應(yīng)用。

指定發(fā)布文件

通過 “files”字段我們可以去定義發(fā)布NPM包時應(yīng)該包括哪些文件，如果省略該屬性默認會為["*"]，會上傳所有文件。

下面是修改后的package.json

"name": "my-app-xiaoshuai", // 我們發(fā)布到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命令，將我們的應(yīng)用發(fā)布到NPM上去

npm publish

輸出

發(fā)布成功后，可以看到npmjs上多了一個my-app-xiaoshuai包

Docker容器方式

要將我們的TS Node.js應(yīng)用作為容器發(fā)布，我們要在項目根目錄中創(chuàng)建docker配置文件Dockerfile。

下面我們一步步編寫Dockerfile文件

• 拷貝編譯后的文件到容器內(nèi)

• 拷貝package.json和package-lock.json到容器內(nèi)

• 使用 npm install安裝依賴

• 使用 node build/server.js運行我們的應(yīng)用

# 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"]

現(xiàn)在我們可以在根目錄中構(gòu)建docker鏡像，運行 docker build --tag my-app:test . 命令

docker build --tag my-app:test .

成功后輸出如下

接著我們運行容器，使用docker run -p 3000:3000 -it my-app:test命令來運行我們的應(yīng)用，可以看到程序成功運行在3000端口

docker run -p 3000:3000 -it my-app:test
# 服務(wù)啟動成功，運行端口：3000

通過瀏覽器訪問http://localhost:3000/，訪問成功

到此，相信大家對“如何正確快速的部署一個TS Node.js項目”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！