「ノードとエクスプレスを使用したWeb開発」という本。JavaScriptスタックのフル活用。第2版​​」

こんにちは住民！ Node / JavaScript開発スタックの主要コンポーネントであるExpressを使用して動的なWebアプリケーションを構築します。 Ethan Brownが、完全なアプリケーションを構築してExpress5を操作する方法について説明します。この本は、サーバーレンダリングからシングルページアプリケーション（SPA）を操作するためのAPI開発まで、すべての段階とコンポーネントをカバーしています。 Expressは、確立されたフレームワークとフレームワークがまったくないことの中間にあるため、アーキテクチャの選択にある程度の自由があります。この本は、Expressを使用するフロントエンドおよびバックエンドの開発者に最適なソリューションを提供します。 Web開発を新しい角度から見ることを学びましょう！ -動的データを表示するためのテンプレートシステムを作成します。リクエストオブジェクトとレスポンスオブジェクト、ミドルウェア、およびURLルーティングの詳細をご覧ください。-実稼働環境のシミュレーションを作成し、そこでテストします。 -MongoDBを使用したドキュメントデータベースおよびPostgreSQLを使用したリレーショナルデータベースでの情報の長期保存について学習します。 -APIのおかげで、他のプログラムとリソースを共有できます。 -認証、承認、HTTPSを使用して安全なアプリケーションを構築します。 -ソーシャルネットワークと統合し、ジオロケーションなどを可能にします。 -アプリケーションを起動および保守するための計画を実装します。 -重要なデバッグスキルを習得します。-認証、承認、HTTPSを使用して安全なアプリケーションを構築します。 -ソーシャルネットワークと統合し、ジオロケーションなどを可能にします。 -アプリケーションを起動および保守するための計画を実装します。 -重要なデバッグスキルを習得します。-認証、承認、HTTPSを使用して安全なアプリケーションを構築します。 -ソーシャルネットワークと統合し、ジオロケーションなどを可能にします。 -アプリケーションを起動および保守するための計画を実装します。 -重要なデバッグスキルを習得します。

コンテンツ配信ネットワーク

サイトを本番環境に移行するときは、静的アセットをインターネット上のどこかにアップロードする必要があります。すべてのダイナミックHTMLが生成される同じサーバーにそれらを配置することに慣れているかもしれません。これまでの例でも、このアプローチを使用しています。nodemeadowlark.jsコマンドによって起動されるNode / Expressサーバーは、あらゆる種類のHTMLリソースと静的リソースの両方を提供します。ただし、サイトのパフォーマンスを最適化する（または将来的に維持する）場合は、コンテンツ配信ネットワーク（CDN）で静的リソースをホストする機能が必要になります。CDNは、静的リソースを配信するために最適化されたサーバーです。ブラウザのキャッシュを有効にする特別なヘッダー（これについてはすぐに詳しく説明します）を使用します。



さらに、CDNには地理的最適化（エッジキャッシングと呼ばれることもあります）を含めることができます。これは、静的コンテンツがクライアントに最も近いサーバーから配信されることを意味します。インターネットは非常に高速ですが（もちろん、光速では機能しませんが、それに近い速度で動作します）、データは数千キロメートルよりも数百キロメートルの距離からさらに高速に配信されます。個々のケースで時間の節約は重要ではありませんが、ユーザー、リクエスト、およびリソースの数を掛けると、すぐに印象的なものになります。



ほとんどの静的リソースはHTMLビューで参照されます

 <link>   CSS-, <script> —   JavaScript,  <img>    ,      
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

CSS、通常はbackground-imageプロパティに静的リンクを設定するのが一般的な方法です。最後に、静的リソースはJavaScriptで参照されることがあります。たとえば、JavaScriptコードはタグを動的に変更または挿入できます。

<img>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

またはbackground-imageプロパティ。

CDNを使用する場合は、クロスドメインリソースシェアリング（CORS）について心配する必要はありません。HTMLにロードされた外部リソースはCORSルールの対象ではありません。Ajaxを介してロードされたリソースに対してCORSを有効にする必要があるだけです（第15章を参照）。

CDNの設計CDNの



使用方法は、サイトのアーキテクチャによって異なります。ほとんどのコンテンツ配信ネットワークでは、ルーティングルールを設定して、着信要求の送信先を決定できます。かなり複雑なルーティングルールを設定できますが、通常は、静的リソース要求を1つの場所（通常はCDNによって提供されます）に送信し、動的エンドポイント要求（動的ページまたはAPIエンドポイント）を別の場所に送信します。



CDNの選択と構成は、ここでは取り上げない広大なトピックですが、選択したCDNのセットアップに役立ついくつかの基本的な情報を提供します。



アプリケーションを構造化するための最も簡単なアプローチは、動的リソースと静的リソースを簡単に区別できるようにすることです。これにより、CDNルーティングルールが可能な限りシンプルになります。これはサブドメインを使用して実現できますが（たとえば、動的リソースはmeadowlark.comから提供され、静的リソースはstatic.meadowlark.comから提供されます）、このアプローチはさらに複雑になり、ローカル開発を複雑にします。より簡単な方法は、リクエストパスを使用することです。たとえば、/ public /で始まるものはすべて静的リソースであり、それ以外はすべて動的です。 Expressでコンテンツを生成する場合、またはExpressを使用してシングルページアプリケーションのAPIを提供する場合は、アプローチが異なる場合があります。



サーバー側レンダリングWebサイト



Expressを使用してダイナミックHTMLをレンダリングする場合（つまり、/ static /で始まるものはすべて静的リソースであり、それ以外はすべて動的です。このアプローチでは、（動的に生成された）すべてのURLが希望どおりになり（もちろん、/ static /で始まらない限り）、すべての静的リソースのプレフィックスは/ static /になります。

<img src="/static/img/meadowlark-logo-1.png" alt="Meadowlark Logo">
   <a href="/about">Meadowlark Travel</a>.
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

この本では、これまで、すべての静的リソースがルートディレクトリに配置されているかのように、静的ミドルウェアを使用してきました。したがって、静的リソースfoo.pngをパブリックフォルダーに配置することにより、/ static /foo.pngではなくURLパス/foo.pngで参照します。もちろん、既存のパブリックディレクトリ内に静的サブディレクトリを作成することは可能であり、/ public / static / foo.pngのURLは/static/foo.pngになりますが、これはあまり賢明ではありません。幸い、静的ミドルウェアを使用すると、app.useを呼び出すときに別のパスを指定することでこれを回避できます。

app.use('/static', express.static('public'))
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

これで、開発環境では、悪用と同じURL構造を使用できます。パブリックフォルダーとCDNのコンテンツが同期している場合は、両方の場所で静的リソースを参照し、開発と本番をシームレスに切り替えることができます。



CDNのルーティングを設定する場合（CDNのドキュメントを参照する必要があります）、ルーティングは次のようになります。





シングルページアプリケーション



シングルページアプリケーションは通常、サーバー側でレンダリングされたWebサイトの反対です。APIのみがサーバーに渡され（たとえば、/ apiで始まるリクエスト）、それ以外はすべて静的ファイルストレージに渡されます。



第16章では、CDNにロードされるすべての静的リソースを含むアプリケーションを操作するためのアセンブリを作成できることを確認しました。次に、APIルーティングの設定が正しいことを確認する必要があります。このようにして、次のルーティングが行われます。





開発から本番環境にシームレスに移行するようにアプリケーションを構造化する方法を学習したので、キャッシングで実際に何が起こり、パフォーマンスを最適化するかを見てみましょう。



静的リソースのキャッシュ静的リソース



を提供するためにExpressまたはCDNを使用しているかどうかに関係なく、ブラウザーが静的リソースをキャッシュするタイミングと方法を決定するために使用するHTTP要求ヘッダーを理解する価値があります。



-有効期限/キャッシュ制御。これらの2つのヘッダーは、リソースをキャッシュできる最大時間をブラウザに通知します。ブラウザはそれらを真剣に受け止めます。1か月間何かを保存するように指示した場合、キャッシュに残っている限り、1か月間は再度ダウンロードされません。制御できない理由により、ブラウザが有効期限前にキャッシュから画像を削除する場合があることを理解することが重要です。たとえば、ユーザーが手動でキャッシュをクリアしたり、ブラウザがリソースを削除して、ユーザーがより頻繁にアクセスするリソース用のスペースを確保したりできます。これらのヘッダーの1つだけが必要です。 Expiresはより広くサポートされているため、使用することをお勧めします。リソースがキャッシュ内にあり、まだ有効期限が切れていない場合は、ブラウザはGETリクエストをまったく実行しないため、特にモバイルデバイスでのパフォーマンスが向上します。



-最終変更/ ETag。一種のバージョン管理を提供します。ブラウザがリソースをチェックアウトする必要がある場合、コンテンツをロードする前にそれらのタグをチェックします。サーバーへのGETリクエストは引き続き実行されますが、これらのヘッダーで返された値が、リソースが変更されていないことをブラウザーに示している場合、ブラウザーはファイルのダウンロードに進みません。名前が示すように、Last-Modifiedを使用すると、アセットが最後に変更された日付を設定できます。 ETagを使用すると、任意の文字列、通常はバージョン文字列またはコンテンツハッシュを使用できます。



静的リソースを発行するときは、ExpiresヘッダーとLast-ModifiedまたはETagのいずれかを使用します。 Expressの組み込み静的ミドルウェアはCache-Controlをインストールしますが、Last-ModifiedもETagも処理しません。したがって、開発には適していますが、運用には適していません。



Amazon CloudFront、Microsoft Azure、Fastly、Cloudflare、Akamai、StackPathなどの静的アセットをCDNでホストすることを選択した場合、ボーナスが得られます。これらの詳細のほとんどは自動的に処理されます。これらのサービスのデフォルト設定も問題ありませんが、微調整を行うことができます。



静的コンテンツの変更



キャッシュはサイトのパフォーマンスを大幅に向上させますが、結果がないわけではありません。特に、静的リソースのいずれかが変更された場合、ブラウザのキャッシュバージョンが期限切れになるまで、クライアントに変更が表示されない場合があります。 Googleでは、1か月、できれば1年間のキャッシュを推奨しています。同じブラウザから毎日サイトにアクセスするユーザーを想像してみてください。彼は1年後にのみあなたの更新を見ることができます！



明らかに、これは望ましい状況ではありませんが、ユーザーにキャッシュをクリアするように指示することはできません。この問題の解決策は、キャッシュバスティングを無効にすることです。このトリックにより、ブラウザがリソースをリロードするタイミングを制御できます。このメソッドは、ファイル名にバージョン情報を追加するだけです。リソースを更新すると、リソースの名前が変更され、ブラウザはそれをダウンロードすることを認識します。通常、これはリソースのバージョンを制御すること（main.2.cssまたはmain.css？バージョン= 2）または何らかのハッシュを追加すること（main.e16b7e149dccfcc399e025e0c454bf77.css）と同じです。どちらの方法を使用する場合でも、リソースを更新すると、その名前が変更され、ブラウザーはリソースをロードすることを認識します。



マルチメディアリソースでも同じことができます。ロゴ（/static/img/meadowlark_logo.png）を見てみましょう。保持期間を1年に設定してからロゴを変更することでパフォーマンスを最大化するために、CDNに配置すると、ユーザーには1年間の変更が表示されない場合があります。ただし、ロゴの名前を/static/img/meadowlark_logo-1.pngに変更し、この変更をHTMLに反映すると、新しいリソースのように見えるため、ブラウザーはロゴをダウンロードする必要があります。



create-react-appなどのシングルページアプリケーションフレームワークに落ち着いた場合、ビルド段階で、すぐに使用できるリソースのアセンブリが作成され、ハッシュが追加されます。



ゼロから始める場合は、ビルダーを確認することをお勧めします（これは、シングルページアプリケーションフレームワークの内部にあるものです）。 JavaScript、CSS、およびその他の種類の静的リソースは、可能な限り少ないアセンブリにバンドルされ、結果は可能な限り最小化されます。ビルドのカスタマイズは広大なトピックですが、幸いなことに、それに関する優れたドキュメントがたくさんあります。以下は、現在利用可能な最も人気のあるコレクターです。



-Webpack（https://webpack.js.org/）。真の進歩を遂げた最初のコレクターの1人。彼にはまだ多くの支持者がいます。それは非常に複雑であり、その複雑さには代償があります。学習曲線は急です。ただし、このパッカーは基本を学ぶのに適しています。



-小包（https://parceljs.org/）。最近登場し、騒がしい。それは非常によく文書化されており、非常に高速であり、そして最も重要なことに、それは最短の学習曲線を持っています。あなたが仕事を素早くそして面倒なく終わらせる必要があるならば、それは適しています。



-ロールアップ（https://rollupjs.org/）。 WebpackとParcelの間のどこかにあります。 Webpackと同様に、堅牢で機能が豊富です。 Webpackよりも使い始めるのは簡単ですが、Parcelほど簡単ではありません。



まとめ



その明らかな単純さのために、静的リソースは非常に面倒です。ただし、それらは訪問者に送信されるデータの大部分を占めるため、それらを最適化するために費やされた時間は興味を持って報われます。



前述されていない静的リソースの実行可能なソリューションは、静的リソースをCDNに公開し、ビューとCSSでリソースへの完全なURLを常に使用することです。このアプローチには非常にシンプルであるという利点がありますが、インターネットにアクセスできない森の小屋で1週間のハッカソンを開催したい場合は、問題が発生します。



注意深い組み立てと縮小は、アプリケーションのパフォーマンスの向上が努力を正当化しない場合に時間を節約できるもう1つの領域です。特に、サイトにJavaScriptファイルが1つまたは2つしかなく、すべてのCSSが同じファイルにある場合は、ビルドを完全にスキップできますが、実際のアプリケーションは時間の経過とともに大きくなる傾向があります。



静的リソースを提供するためにどの方法を選択した場合でも、それらを個別に、できればCDNにアップロードすることをお勧めします。それが面倒だと思われるなら、私はあなたに保証します：それは思ったほど難しくはありません。特に、静的リソースのある場所への展開とアプリケーションの別の場所への展開が自動的に行われるように、事前に展開システムに少し時間を費やす場合。



CDNでのホスティングの費用が心配な場合は、現在ホスティングに支払っている金額を確認することをお勧めします。ほとんどのホスティングプロバイダーは、あなたがそれについて知らなくても、トラフィックに多額の費用を請求します。ただし、突然サイトがスラッシュドットにリストされ、スラッシュドット効果が発生した場合、まったく予期しないホスティング料金が発生する可能性があります。 CDNホスティングは通常、使用した分だけ支払うように設定されています。たとえば、私が地元の中規模企業向けに運営しているサイトは、月に約20 GBのトラフィックを使用していますが、静的ホスティング料金（非常にメディアが多いサイト）は月にわずか数ドルです。



CDNに静的リソースを配置することのメリットは大きく、そのコストと不便さは最小限であるため、このパスを選択することを強くお勧めします。



ブラウザの特定のJavaScriptトリックを使用すると、コンパイルされていないLESSを使用できます。ただし、このアプローチはパフォーマンスの面で悪影響をもたらす可能性があるため、使用することはお勧めしません。



この本の詳細については、出版社 のWebサイトを参照してください

» 目次

» 住民向けの抜粋



クーポンの25％割引 -JavaScript



紙版の本の支払い時に、電子書籍がe-によって送信されます。郵便物。