Bringen Sie Ihnen Schritt für Schritt bei, wie Sie ein TS Node.js-Projekt richtig und schnell bereitstellen!

Wie stellt man ein TS-Projekt Node.js richtig und schnell bereit? Im folgenden Artikel erfahren Sie, wie Sie in wenigen Minuten eine TS Node.js-Anwendung bereitstellen. Ich hoffe, er wird Ihnen hilfreich sein!

Als Full-Stack-Entwickler ist es sehr interessant, Projekte zu erstellen. Sie können die Architektur entwerfen, ein Brainstorming durchführen und entwickeln, aber nachdem die Entwicklung abgeschlossen ist, müssen wir die Anwendung bereitstellen oder veröffentlichen. Wie stellt man also ein TS Node.js-Projekt richtig und schnell bereit? Lassen Sie es uns noch heute erledigen. [Empfohlenes Lernen: „nodejs Tutorial“]

Erstellen Sie eine TS Node.js-Anwendung

Wenn Sie bereits mit der Erstellung eines TS Node.js-Projekts vertraut sind, können Sie direkt zum Abschnitt „Anwendung bereitstellen und veröffentlichen“ springen. Abschnitt

Node .js-Projekt initialisieren:

In unserem Team lieben wir TS sehr und verwenden TS in allen unseren neuen Projekten, daher ist das Erstellen eines TS-Projekts nichts Neues.

Beginnen wir mit dem Grundlegendsten:

• npm init Initialisieren Sie ein Node.js-Projekt, verwenden Sie den Parameter -y, um die Schritt-für-Schritt-Anleitung schnell zu überspringen. Schrittkonfigurationnpm 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

🎜npm install express @types/express Express-Abhängigkeiten und Express-Typdateien für die TS-Entwicklung installieren🎜🎜🎜npm install typescript – speichern- dev Typoskript als Entwicklungsabhängigkeit installieren🎜

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

🎜TS-Konfiguration🎜🎜

🎜npx tsc -- init erstellt eine Typoskript-Standardkonfigurationsdatei tsconfig.json🎜declaration wird verwendet, um anzugeben, ob die entsprechende *.d.ts-Datei nach Abschluss der Kompilierung generiert werden soll ist falsch< /li>🎜outdir Definiert das TS-kompilierte Verzeichnis. Wenn nicht deklariert, befindet sich der Standardspeicherort der kompilierten Datei am selben Speicherort wie die TS-Quelldatei

🎜 Führen Sie den Befehl aus: 🎜

docker build --tag my-app:test .

. 🎜Ändern Sie die folgende Konfiguration Wenn Sie die obigen Schritte ausführen, ist unser Dateiverzeichnis wie folgt aufgebaut🎜

docker run -p 3000:3000 -it my-app:test
# 服务启动成功，运行端口：3000

🎜Kompilieren Sie TS🎜🎜🎜Unser nächster Schritt besteht darin, unsere TS Node.js-Anwendung zu erstellen und bereitzustellen In der Produktionsumgebung führen wir nicht die TS-Version aus, sondern das kompilierte JS. Jetzt kompilieren wir das Projekt🎜🎜Ändern Sie die Datei package.json und fügen Sie den folgenden Befehl hinzu🎜🎜🎜🎜npm run tsc kompiliert unser Projekt entsprechend der Konfiguration unserer tsconfig.json und gibt es an die aus Das angegebene Verzeichnis🎜< /li>🎜🎜npm run start:prod führt unsere kompilierte JS-Datei aus🎜rrreee🎜und testet sie dann lokal🎜rrreee🎜Zugriff auf http über Browser ://localhost:3000/, der Zugriff ist erfolgreich, dann stellen wir unsere Anwendung bereit und veröffentlichen sie🎜🎜🎜

🎜Anwendungen bereitstellen und veröffentlichen🎜🎜🎜Hier verwenden wir hauptsächlich zwei Methoden, um den kompilierten TS zu kompilieren Projekt Verteilen und in verschiedenen Umgebungen bereitstellen🎜

🎜npm-Abhängigkeitspaketformular🎜Docker-Container-Methode

🎜NPM-Abhängigkeitspaketformular Formular 🎜🎜

🎜NPM-Lebenszyklus-Hooks🎜

🎜Einige spezielle Lebenszyklus-Hooks werden ausgelöst, wenn der angegebene Vorgang ausgelöst wird. Hier verwenden wir den Hook „Vorbereiten“. Dieser Hund wird einmal ausgelöst, bevor der npm-Publish-Befehl zum Veröffentlichen in NPM ausgeführt wird. Daher können wir die TS-Anwendung zu diesem Zeitpunkt kompilieren. 🎜

🎜Veröffentlichungsdateien angeben🎜

🎜Über das Feld „Dateien“ können wir definieren, welche Dateien beim Veröffentlichen des NPM-Pakets enthalten sein sollen Der Standardwert ist [" *"], alle Dateien werden hochgeladen. 🎜🎜Das Folgende ist die geänderte package.json🎜rrreee

🎜npm Publish🎜

🎜Nachdem wir die package.json-Konfiguration geändert haben, führen wir den Befehl npm Publish aus, um unsere zu aktualisieren Veröffentlichen Sie die Anwendung auf NPM🎜rrreee🎜Output🎜🎜🎜🎜Nach erfolgreicher Veröffentlichung können Sie sehen, dass es auf npmjs ein zusätzliches my-app-xiaoshuai-Paket gibt🎜🎜🎜

🎜Docker-Container Methode🎜🎜 🎜Um unsere TS Node.js-Anwendung als Container zu veröffentlichen, erstellen wir eine Docker-Konfigurationsdatei Dockerfile im Projektstammverzeichnis. 🎜🎜Lassen Sie uns die Docker-Datei Schritt für Schritt schreiben🎜🎜🎜🎜Kopieren Sie die kompilierte Datei in den Container🎜🎜🎜Kopieren Sie package.json und package-lock.json in den Container🎜🎜🎜Verwenden Sie <-Code >npm installAbhängigkeiten installieren🎜🎜🎜Verwenden Sie node build/server.js, um unsere Anwendung auszuführen🎜

# 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项目和部署它的基础知识，希望对大家有所帮助，能够用在现在或未来的项目中。

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen Schritt für Schritt bei, wie Sie ein TS Node.js-Projekt richtig und schnell bereitstellen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!