手把手教你怎麼正確快速的部署一個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.json
• declaration 用於指定是否在編譯完成後產生相應的*.d.ts文件，預設為false
• outdir 定義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中文網其他相關文章！