目次
TS Node.js アプリケーションを作成する
Node.js プロジェクトを初期化します:
TS 構成
作成
次のステップは、TS Node.js アプリケーションを構築してデプロイすることです。運用環境では、TS バージョンではなく、コンパイルされた JS を実行します。次に、プロジェクトをコンパイルしましょう。
ここでは主に 2 つの方法を使用して、コンパイルされた TS プロジェクトをさまざまな環境に配布およびデプロイします
NPM ライフ サイクル フック
指定された操作がトリガーされると、いくつかの特別なライフ サイクル フックがトリガーされます。ここでは、「prepare」フックを使用します。これは、NPM に公開する npm pub コマンドを実行する前に 1 回トリガーされます。したがって、この時点で TS アプリケーションをコンパイルできます。
" >「ファイル」フィールドを使用して、NPM パッケージを発行するときにどのファイルを含める必要があるかを定義できます。この属性が省略された場合、デフォルトは["*" ] の場合、すべてのファイルがアップロードされます。
npm publish
ログイン後にコピー
" >package.json 構成を変更した後、npm pub コマンドを実行します。アプリケーションを NPM に公開します
npm publish
ログイン後にコピー
TS Node.js アプリケーションをコンテナとして公開するには、 docker 構成ファイル プロジェクトのルート ディレクトリにある Dockerfile。
源码
总结
ホームページ ウェブフロントエンド jsチュートリアル TS Node.js プロジェクトを正しく迅速にデプロイする方法を段階的に説明します。

TS Node.js プロジェクトを正しく迅速にデプロイする方法を段階的に説明します。

Oct 14, 2021 am 10:18 AM
node.js ts typescript フロントエンド

TS Node.js プロジェクトを正しく迅速にデプロイするにはどうすればよいですか?次の記事では、TS Node.js アプリケーションを数分でデプロイする方法を説明します。お役に立てば幸いです。

TS Node.js プロジェクトを正しく迅速にデプロイする方法を段階的に説明します。

フルスタック開発者として、プロジェクトを作成することは非常に興味深いです。アーキテクチャを設計し、ブレインストーミングし、開発することができますが、開発が完了した後は、アプリケーションをデプロイまたはリリースします。では、TS Node.js プロジェクトを正しく迅速にデプロイするにはどうすればよいでしょうか? 今すぐ実行してみましょう。 [推奨学習: 「nodejs チュートリアル 」]

TS Node.js アプリケーションを作成する

TS ノードの作成にすでに慣れている場合.js プロジェクトでは、「アプリケーションのデプロイとリリース」セクションに直接ジャンプできます。

Node.js プロジェクトを初期化します:

私たちのチームでは、TS がとても気に入っています。 TS はすべてのプロジェクトで使用されるため、TS プロジェクトの作成は新しいことではありません。

基本的なことから始めましょう:

  • npm init -y を使用して Node.js プロジェクトを初期化します。パラメーターはすぐに実行できます。ステップバイステップの構成を省略します

  • ##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 は、タイプスクリプトのデフォルト構成ファイル tsconfig.json
  • declaration を作成します。これは、コンパイルするかどうかを指定するために使用されます。完了後、対応する * .d.ts ファイルが生成されます。デフォルトは false
  • outdir TS コンパイル後のディレクトリを定義します。宣言がない場合、デフォルトのコンパイル済みファイルの場所は ts と同じになります。同じ場所で
  • #コマンドを実行します
 npx tsc --init
ログイン後にコピー

次の構成を変更します

"compilerOptions": {
  ...
  "outDir": "dist", // 编译后输出目录
  "declaration": true // 生成 d.ts
}
ログイン後にコピー

プロジェクト エントリ ファイルを作成します

作成

server.ts

ファイル<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import express from &amp;#39;express&amp;#39; const app = express() const PORT = 3000 app.use(express.json()) app.get(&amp;#39;/&amp;#39;, (req, res) =&gt; { res.send(‘Hello World!’) }) app.listen(PORT, () =&gt; { console.log(`Server is listening on port ${PORT}`) })</pre><div class="contentsignin">ログイン後にコピー</div></div>上記の手順を完了すると、ファイル ディレクトリ構造は次のようになります

.
├── 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 プロジェクトを正しく迅速にデプロイする方法を段階的に説明します。アプリケーションのデプロイと公開

ここでは主に 2 つの方法を使用して、コンパイルされた TS プロジェクトをさまざまな環境に配布およびデプロイします

npm の形式依存関係パッケージ

    docker コンテナー メソッド
  • NPM 依存関係パッケージの形式

NPM ライフ サイクル フック

指定された操作がトリガーされると、いくつかの特別なライフ サイクル フックがトリガーされます。ここでは、「prepare」フックを使用します。これは、NPM に公開する npm pub コマンドを実行する前に 1 回トリガーされます。したがって、この時点で TS アプリケーションをコンパイルできます。

発行ファイルを指定する

「ファイル」フィールドを使用して、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 public

package.json 構成を変更した後、npm pub コマンドを実行します。アプリケーションを NPM に公開します
npm publish
ログイン後にコピー

Output

公開に成功すると、npmjs xiaoshuai に追加の TS Node.js プロジェクトを正しく迅速にデプロイする方法を段階的に説明します。my-app- があることがわかります。

Package

TS Node.js プロジェクトを正しく迅速にデプロイする方法を段階的に説明します。Docker コンテナ メソッド

TS Node.js アプリケーションをコンテナとして公開するには、 docker 構成ファイル プロジェクトのルート ディレクトリにある Dockerfile。

Dockerfile を段階的に書いてみましょう

コンパイルされたファイルをコンテナーにコピーします
  • package.json と package をコピーします-lock.json をコンテナーに入れます
  • 使用
  • npm install
  • 依存関係をインストールします

    使用
  • ノード ビルド/サーバー.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 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ Mar 16, 2024 pm 12:09 PM

PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ 今日のインターネットの急速な発展の時代において、フロントエンド開発はますます重要になっています。 Web サイトやアプリケーションのエクスペリエンスに対するユーザーの要求がますます高まっているため、フロントエンド開発者は、より効率的で柔軟なツールを使用して、応答性の高いインタラクティブなインターフェイスを作成する必要があります。フロントエンド開発の分野における 2 つの重要なテクノロジーである PHP と Vue.js は、組み合わせることで完璧なツールと見なされます。この記事では、PHP と Vue の組み合わせと、読者がこれら 2 つをよりよく理解し、適用できるようにするための詳細なコード例について説明します。

フロントエンドの面接官からよく聞かれる質問 フロントエンドの面接官からよく聞かれる質問 Mar 19, 2024 pm 02:24 PM

フロントエンド開発のインタビューでは、HTML/CSS の基本、JavaScript の基本、フレームワークとライブラリ、プロジェクトの経験、アルゴリズムとデータ構造、パフォーマンスの最適化、クロスドメイン リクエスト、フロントエンド エンジニアリング、デザインパターン、新しいテクノロジーとトレンド。面接官の質問は、候補者の技術スキル、プロジェクトの経験、業界のトレンドの理解を評価するように設計されています。したがって、候補者はこれらの分野で自分の能力と専門知識を証明するために十分な準備をしておく必要があります。

Django はフロントエンドですか、バックエンドですか?それをチェックしてください! Django はフロントエンドですか、バックエンドですか?それをチェックしてください! Jan 19, 2024 am 08:37 AM

Django は、迅速な開発とクリーンなメソッドを重視した Python で書かれた Web アプリケーション フレームワークです。 Django は Web フレームワークですが、Django がフロントエンドなのかバックエンドなのかという質問に答えるには、フロントエンドとバックエンドの概念を深く理解する必要があります。フロントエンドはユーザーが直接対話するインターフェイスを指し、バックエンドはサーバー側プログラムを指し、HTTP プロトコルを通じてデータと対話します。フロントエンドとバックエンドが分離されている場合、フロントエンドとバックエンドのプログラムをそれぞれ独立して開発して、ビジネス ロジックとインタラクティブ効果、およびデータ交換を実装できます。

C# 開発経験の共有: フロントエンドとバックエンドの共同開発スキル C# 開発経験の共有: フロントエンドとバックエンドの共同開発スキル Nov 23, 2023 am 10:13 AM

C# 開発者としての私たちの開発作業には、通常、フロントエンドとバックエンドの開発が含まれますが、テクノロジーが発展し、プロジェクトが複雑になるにつれて、フロントエンドとバックエンドの共同開発はますます重要かつ複雑になってきています。この記事では、C# 開発者が開発作業をより効率的に完了できるようにする、フロントエンドとバックエンドの共同開発テクニックをいくつか紹介します。インターフェイスの仕様を決定した後、フロントエンドとバックエンドの共同開発は API インターフェイスの相互作用から切り離せません。フロントエンドとバックエンドの共同開発をスムーズに進めるためには、適切なインターフェース仕様を定義することが最も重要です。インターフェイスの仕様にはインターフェイスの名前が含まれます

Go 言語のフロントエンド テクノロジーの探求: フロントエンド開発の新しいビジョン Go 言語のフロントエンド テクノロジーの探求: フロントエンド開発の新しいビジョン Mar 28, 2024 pm 01:06 PM

Go 言語は、高速で効率的なプログラミング言語として、バックエンド開発の分野で広く普及しています。ただし、Go 言語をフロントエンド開発と結びつける人はほとんどいません。実際、フロントエンド開発に Go 言語を使用すると、効率が向上するだけでなく、開発者に新たな視野をもたらすことができます。この記事では、フロントエンド開発に Go 言語を使用する可能性を探り、読者がこの分野をよりよく理解できるように具体的なコード例を示します。従来のフロントエンド開発では、ユーザー インターフェイスの構築に JavaScript、HTML、CSS がよく使用されます。

フロントエンドにインスタントメッセージングを実装する方法 フロントエンドにインスタントメッセージングを実装する方法 Oct 09, 2023 pm 02:47 PM

インスタント メッセージングを実装する方法には、WebSocket、ロング ポーリング、サーバー送信イベント、WebRTC などが含まれます。詳細な紹介: 1. クライアントとサーバーの間に永続的な接続を確立してリアルタイムの双方向通信を実現できる WebSocket フロントエンドは WebSocket API を使用して WebSocket 接続を作成し、送受信によるインスタント メッセージングを実現できます。 2. Long Polling(リアルタイム通信を模擬する技術)など

Golang とフロントエンド テクノロジーの組み合わせ: Golang がフロントエンド分野でどのような役割を果たすかを探る Golang とフロントエンド テクノロジーの組み合わせ: Golang がフロントエンド分野でどのような役割を果たすかを探る Mar 19, 2024 pm 06:15 PM

Golang とフロントエンド テクノロジーの組み合わせ: Golang がフロントエンド分野でどのような役割を果たしているかを調べるには、具体的なコード例が必要です。インターネットとモバイル アプリケーションの急速な発展に伴い、フロントエンド テクノロジーの重要性がますます高まっています。この分野では、強力なバックエンド プログラミング言語としての Golang も重要な役割を果たします。この記事では、Golang がどのようにフロントエンド テクノロジーと組み合わされるかを検討し、具体的なコード例を通じてフロントエンド分野での可能性を実証します。フロントエンド分野における Golang の役割は、効率的で簡潔かつ学びやすいものとしてです。

Django: フロントエンド開発とバックエンド開発の両方を処理できる魔法のフレームワークです。 Django: フロントエンド開発とバックエンド開発の両方を処理できる魔法のフレームワークです。 Jan 19, 2024 am 08:52 AM

Django: フロントエンド開発とバックエンド開発の両方を処理できる魔法のフレームワークです。 Django は、効率的でスケーラブルな Web アプリケーション フレームワークです。 MVCやMTVなど複数のWeb開発モデルをサポートし、高品質なWebアプリケーションを簡単に開発できます。 Django はバックエンド開発をサポートするだけでなく、フロントエンド インターフェイスを迅速に構築し、テンプレート言語を通じて柔軟なビュー表示を実現します。 Django はフロントエンド開発とバックエンド開発をシームレスに統合するため、開発者は学習に特化する必要がありません。

See all articles