首頁 > web前端 > js教程 > 手把手教你怎麼正確快速的部署一個TS Node.js專案!

手把手教你怎麼正確快速的部署一個TS Node.js專案!

青灯夜游
發布: 2021-10-15 10:10:47
轉載
5878 人瀏覽過

怎麼正確快速的部署一個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 Node.js專案!

部署發布應用程式

這裡我們主要採用兩種方法將編譯後的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
登入後複製

輸出

手把手教你怎麼正確快速的部署一個TS Node.js專案!

#發布成功後,可以看到npmjs上多了一個

my-app- xiaoshuai套件

手把手教你怎麼正確快速的部署一個TS Node.js專案!

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 .
登入後複製

成功后输出如下

手把手教你怎麼正確快速的部署一個TS Node.js專案!

接着我们运行容器,使用docker run -p 3000:3000 -it my-app:test命令来运行我们的应用,可以看到程序成功运行在3000端口

docker run -p 3000:3000 -it my-app:test
# 服务启动成功,运行端口:3000
登入後複製

通过浏览器访问http://localhost:3000/,访问成功

手把手教你怎麼正確快速的部署一個TS Node.js專案!

源码

https://github.com/cmdfas/ts-node-express-deploy

总结

今天我们介绍了创建TS Node.js项目和部署它的基础知识,希望对大家有所帮助,能够用在现在或未来的项目中。

更多编程相关知识,请访问:编程视频!!

以上是手把手教你怎麼正確快速的部署一個TS Node.js專案!的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板