ホームページ ウェブフロントエンド jsチュートリアル Express で静的ファイルをホストする方法

Express で静的ファイルをホストする方法

Jun 04, 2018 am 09:45 AM
express ホスティング 静的

今回は、Express を使用して静的ファイルをホストする方法と、Express を使用して静的ファイルをホストする際の 注意事項 を​​説明します。実際のケースを見てみましょう。

ミドルウェアexpress.static

expressを使用してディレクトリを初期化すると、app.jsで多くのapp.useが表示されます。

主要なミドルウェアの 1 つは、express.static (このミドルウェアはバージョン 4.0 にも残されています)

var express = require('express');
var app = express();
app.use('/static',express.static('public'));
ログイン後にコピー
Express.static は、静的ファイル、js、css、img などをホストするのに役立ちます。

express.staticは

を使用します基本的には

を使用しますプロジェクトディレクトリのpublicの下にcss、js、imgなどのフォルダーがあります。

サーバーの起動時にデータにアクセスできるように、Express 経由でホストする必要があります。

app.js に

var express = require('express');
var app = express();
app.use(express.static('public'));
ログイン後にコピー
を追加すると、

http://localhost:3000/css/style.css

http://localhost:3000/js/style.js
http://localhost を渡すことができます。 3000/img/style.png

注:すべてのファイルのパスは保存ディレクトリからの相対パスであるため、静的ファイルが保存されているディレクトリ名は URL に表示されません。

仮想ディレクトリ

は、静的リソースディレクトリのマウントパスを指定することで実装されます。

静的ファイルに仮想ディレクトリを追加できます。これにより、URL を統一した方法で管理しやすくなり、リソースの

属性 を一目で確認できるようになります。

var express = require('express');
var app = express();
app.use('static',express.static('public'));
ログイン後にコピー
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vueを操作してパスの#記号を削除する方法

vueを使用して空白をクリックしてdiv実装を非表示にする方法

以上がExpress で静的ファイルをホストする方法の詳細内容です。詳細については、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)

Express を使用してノード プロジェクトでファイルのアップロードを処理する方法 Express を使用してノード プロジェクトでファイルのアップロードを処理する方法 Mar 28, 2023 pm 07:28 PM

ファイルのアップロードをどのように処理するか?次の記事では、Express を使用してノード プロジェクトでファイルのアップロードを処理する方法を紹介します。

C 言語における static キーワードの役割と使用法の詳細な分析 C 言語における static キーワードの役割と使用法の詳細な分析 Feb 20, 2024 pm 04:30 PM

C 言語における static キーワードの役割と使用法の詳細な分析 C 言語では、static は関数、変数、データ型の定義に使用できる非常に重要なキーワードです。 static キーワードを使用すると、オブジェクトのリンク属性、スコープ、ライフサイクルが変更される可能性があるため、C 言語における static キーワードの役割と使用法を詳しく分析してみましょう。静的変数と関数: 関数内で static キーワードを使用して定義された変数は静的変数と呼ばれ、グローバルなライフサイクルを持ちます。

Express と Laravel の詳細な比較: 最適なフレームワークを選択するには? Express と Laravel の詳細な比較: 最適なフレームワークを選択するには? Mar 09, 2024 pm 01:33 PM

Express と Laravel の詳細な比較: 最適なフレームワークを選択するには?プロジェクトに適したバックエンド フレームワークを選択する場合、Express と Laravel が開発者の間で人気のある 2 つの選択肢であることは間違いありません。 Express は Node.js ベースの軽量フレームワークであり、Laravel は PHP ベースの人気のあるフレームワークです。この記事では、これら 2 つのフレームワークの長所と短所を詳しく比較し、開発者がニーズに最適なフレームワークを選択できるように、具体的なコード例を示します。パフォーマンスとスケーラビリティExpr

Express と Laravel の比較分析: より自分に合ったフレームワークを選択してください Express と Laravel の比較分析: より自分に合ったフレームワークを選択してください Mar 10, 2024 pm 10:15 PM

Express と Laravel は非常に人気のある 2 つの Web フレームワークで、それぞれ JavaScript と PHP の 2 つの主要な開発言語の優れたフレームワークを代表します。この記事では、開発者がプロ​​ジェクトのニーズにより適したフレームワークを選択できるように、これら 2 つのフレームワークの比較分析を実施します。 1. フレームワークの概要 Express は、Node.js プラットフォームに基づく Web アプリケーション フレームワークであり、開発者が高性能の Web アプリケーションを迅速に構築できるようにする一連の強力な機能とツールを提供します。急行

PHP におけるプライベート静的メソッドの役割と適用シナリオ PHP におけるプライベート静的メソッドの役割と適用シナリオ Mar 23, 2024 am 10:18 AM

PHP におけるプライベート静的メソッドの役割と適用シナリオ PHP プログラミングにおいて、プライベート静的メソッドは特殊なメソッド タイプであり、定義されたクラス内でのみアクセスでき、外部から直接呼び出すことはできません。プライベート静的メソッドは通常、クラスの内部ロジックの実装に使用され、詳細をカプセル化して非表示にする方法を提供します。同時に、静的メソッドの特性を備えており、クラス オブジェクトをインスタンス化せずに呼び出すことができます。以下では、プライベート静的メソッドの役割とアプリケーション シナリオについて説明し、具体的なコード例を示します。機能: 実装の詳細をカプセル化して非表示にする: private static

PHP 開発でコードをホスティングするために GitHub を使用する方法 PHP 開発でコードをホスティングするために GitHub を使用する方法 Jun 27, 2023 pm 02:10 PM

現代のソフトウェア開発において、バージョン管理とコードホスティングは非常に重要なリンクです。世界最大のオープンソース コミュニティおよびコード ホスティング プラットフォームとして、GitHub は開発者に強力なバージョン管理およびコラボレーション ツールを提供します。この記事では、PHP 開発者がコードをより適切に管理および共有できるように、コード ホスティングに GitHub を使用する方法を紹介します。 GitHub アカウントを作成するには、まず GitHub の公式 Web サイト https://github.com/ を開き、ホームページの右上隅にある「Signup」をクリックします。

静的相対位置決めのテクニックと方法を素早く習得します。 静的相対位置決めのテクニックと方法を素早く習得します。 Jan 18, 2024 am 11:18 AM

高速静的相対位置決めは、Web 開発において非常に重要な位置決め方法です。これにより、ドキュメント フロー内での位置を維持しながら、要素を通常の位置に対してわずかに調整できます。この記事では、高速静的相対位置決めの使用方法と、いくつかの一般的なアプリケーション シナリオを詳しく紹介します。まず、高速静的相対位置決めの基本概念を理解する必要があります。 CSS では、要素を配置する方法として、静的配置、相対配置、絶対配置、固定配置の 4 つの方法があります。静的配置はデフォルトの配置方法であり、要素の位置はドキュメントによって決まります。

Node+Express が Cookie をどのように操作するかについて話しましょう Node+Express が Cookie をどのように操作するかについて話しましょう Jun 22, 2022 am 10:01 AM

Node+Express は Cookie をどのように操作しますか?以下の記事ではnodeを使ってCookieを操作する方法を紹介していますので、ご参考になれば幸いです。

See all articles