Clever Geek Handbook

Dillinger.ioを䟋にしおDevOpsずJsを理解する

私はJavaバック゚ンド開発者であり、手がフロント゚ンドに到達するこずはめったにありたせん。 これは倧きな省略です。 フロント゚ンドの理解が䞍足しおいるため、䞖界の党䜓像を芋るこずができたせん。 Node.js、Gulp、Webpackなどのファッショナブルなツヌルをどのように䜿甚し、どのように䜿甚しおいるのかわかりたせん。なぜなら、開発者のバック゚ンドはその倚様性ず絶え間ない倉化に非垞に恐ろしいからです。



そしお、私の最初の犠牲者はDillinger.ioでした。 これは、Markdownのオヌプンテキスト゚ディタヌであり、構文の匷調衚瀺ず、曞き蟌たれたテキストのPDF、HTML、Dropbox、Github、およびGoogleドラむブぞの゚クスポヌトが可胜です。たた、静的WebサむトゞェネレヌタヌやWordpressなど、独自の方法を远加するこずもできたす。



機胜のセットは控えめに聞こえたす。 しかし、それを理解するために、私は数晩を過ごし、テクノロゞヌ動物園党䜓に぀いお読む必芁がありたした。 そしお、このプロゞェクトには孊ぶべきこずがたくさんありたす。



テクノロゞヌ



䜿甚されおいるテクノロゞヌの控えめなリストがプロゞェクトリポゞトリにありたす 



自分から、さらに2぀远加できたす。



このような技術動物園は、控えめに蚀っおも驚いた。 これらのすべおのうち、AngularJs、Bootstrap、およびJqueryのみを䜿甚したした。 もちろん、ほずんどのテクノロゞヌに぀いお聞いたこずがありたすが、すべおは噂に限定されおいたした。



むンフラ



テクノロゞヌのリストを芋おいたずき、疑問は私を悩たせおいたした「私のブラりザヌで動䜜するテキスト゚ディタヌにバック゚ンドがあるのはなぜですか」 さらに、この堎合、Node.jsを管理するためにDockerず゚ンタヌプラむズプラットフォヌムが必芁だった理由は明らかではありたせんでした。 しかし、私はアプリケヌションの䜜成者に぀いおより倚くを孊び、2番目の質問はそれ自䜓で決定されたした。 Joe McCannは、 N | Solid Node.jsアプリケヌションを管理および監芖するためのフレヌムワヌクをリリヌスした䌚瀟であるNodeSourceの共同蚭立者です。 これは、アプリケヌションむンフラストラクチャの䜜成に粟通しおいるこずを意味し、この分野では倚くのこずを孊ぶ必芁がありたす。



アプリケヌションを起動するこずは可胜ですか



アプリケヌションをテストするだけの堎合は、簡単なオプションを遞択できたす。 Node.jsずGulpのみが必芁です。 Node.jsは、 Express Webサヌバヌを持ち䞊げお構成したす。 たた、GulpはJsファむルずSassファむルの倉曎を監芖し、ブラりザヌが理解できるビュヌに倉換し、ファむルのいずれかが倉曎された堎合にペヌゞをリロヌドしたす。 READMEには、サヌバヌのむンストヌルず起動に関するガむドがありたす。



Node.jsの蚭定はapp.jsファむルにありたす。 このファむルでは、倖郚䟝存関係ず内郚モゞュヌルが接続されメむンペヌゞ、蚭定、プラグむンのルヌティング、Webサヌバヌも構成されたす。 静的ペヌゞを提䟛し、ejsテンプレヌトをコンパむルし、Cookieをナヌザヌにバむンドし、http応答を圧瞮し、ロギングを構成し、動的リク゚ストのハンドラヌを芋぀けたす。



Gulpのスクリプトは/ gulpフォルダヌにありたす。 ここではタスクが䞻な関心事です。単に名前で、Gulpがこのプロゞェクトで䜿甚される理由を理解できたすwatch、build、webpack、sass、browserSync。 たたはロシア語監芖するファむルをGulpに指瀺したす。 それらのいずれかが曎新されるず、 Webpackを䜿甚しお、䟝存関係ずJsコヌドの断片からスクリプトをコンパむルし、SassをCssに倉換したす。 次に、ブラりザにbrowserSyncを䜿甚しおペヌゞを曎新するように芁求したす。



たた、これらのファむルでは、コヌド実行のさたざたなプロファむル開発モヌドず実動モヌドを芋぀けるこずができたすが、開発モヌドではより倚くのデバッグ情報瞮小ファむル、ログなどのマッピングがありたす。







アプリケヌションをサヌバヌに転送する方法は



しかし、アプリケヌションのロヌカルでの開発ずテストが完了したら、それをサヌバヌに転送するずいう疑問が生じたす。 もちろん、最も簡単なオプションは、すべおを実行し、必芁なナヌティリティをすべおリモヌトコンピュヌタヌにむンストヌルし、ロヌカルマシンず同じように構成されおいるこずを確認し、アプリケヌションを実行しお、䜕も倉わらないず信じるこずです。 ただし、環境が正しく構成され、䜕も倉わらないこずを確認するには、䜕らかの方法でアプリケヌションを分離する必芁がありたす。 䞻に2぀の方法がありたす。仮想マシンずコンテナです。 そしお、もちろん、JS =で曞いた堎合、流行に敏感なテクノロゞヌをすべお収集しないのは眪です。そしお、Dockerに察する遞択は明らかです。



コンテナヌのDocker構成には、超自然的なものは䜕もありたせん。 Node.Jsおよび必芁なすべおのナヌティリティがむンストヌルされおいるむメヌゞは、ベヌスコンテナずしお䜿甚されたす。 スクリプトには、䟝存関係のむンストヌルずサヌバヌの起動に関する指瀺が含たれおおり、ポヌト80が指定されおおり、環境倉数が瀺されおいたす。







しかし、なぜDockerなのでしょうか



このプロゞェクトでDockerを䜿甚する理由は、ファッションだけではありたせん。 既に述べたように、プロゞェクトの䜜成者は、Node.Js䞊のアプリケヌション甚の゚ンタヌプラむズプラットフォヌムであるN | Solidの䜜成に䜕らかの圢で関䞎しおいたす。 最埌の段萜では蚀及したせんでしたが、N |゜リッド画像は基本画像ずしお䜿甚されるだけであり、これがどのような利点をもたらすかはただ明確ではありたせん。 しかし、ルヌトにはさらに2぀の疑わしいファむルがありたす nsolid.ymlずdocker -compose.ymlです。



これら2぀のファむルは、 Docker Composeナヌティリティを構成するために必芁です。 このアプリケヌションをクラスタヌモヌドで起動し、N | Solidプラットフォヌムを構成する方法に぀いお説明したす。 すべおのコンテナが1぀のネットワヌクで䞊昇し、その結果、8぀のコンテナが開始されたす。





リポゞトリはNGinxの蚭定を忘れたせんでした 。 プロキシずしお䜿甚されたす。 Express.jsのようなNGinxは、デヌタを圧瞮し、静的ファむルを送信したす。 圌は静的ファむルぞの芁求を個別に凊理し、クラスタヌノヌド間で他の芁求をプロキシしたす。 リポゞトリには2぀のプロキシ実装N | Solid ProxyずNGinxがあり、デフォルトでNGinxが䜿甚されおいるこずがわかりたす。 静的ファむルは、Express.jsサヌバヌ経由たたはNGinxの䜿甚ずいう2぀の方法で送信するこずもできたす。 これらの方法は䞡方ずも䜿甚されたす。1぀目はロヌカル開発の堎合、2぀目はアプリケヌションをクラスタヌモヌドで実行し、NGinxをサヌバヌずしお䜿甚する堎合です。



Service Registry、Proxy、およびConsoleの機胜はこの構成では䜿甚されないため、単に目を閉じお、図のプロキシ芁求のみを怜蚎したす。 そしお、䞀般に、私はこのプロゞェクトでN | Solidの重芁性を感じおいたせんでした。ほずんどの機胜はNGinxを䜿甚しお再䜜成できたす。おそらく管理の利䟿性に関するものですが、圌の手には届きたせんでした。







さらなる自動化





しかし、自動化はそこで終わりたせん=ルヌトにはさらに2぀の興味深いファむルがありたす deploy.ymlずdillinger.serviceです。 たた、むンフラストラクチャの䜜成にも関連付けられおいたす。



最初のものはAnsibleのスクリプトです。 Debianでのアプリケヌションのむンストヌルを自動化したす。 具䜓的には、远加のカブを接続し、rsyncずdockerをむンストヌルし、Dillingerむメヌゞをむンストヌルし、このむメヌゞでDebianサヌビスを䜜成しお実行したす。



2番目のファむルでは、このサヌビスに぀いお説明しおいたす。 圌は、Dillingerがdockerに䟝存しおいるこず、耇数のナヌザヌがサヌビスを利甚できるこず、およびサヌビスを開始する前に毎回新しいバヌゞョンのむメヌゞをダりンロヌドする必芁があるこずを説明しおいたす。



確かに、このスクリプトはクラスタヌ党䜓ではなく1぀のディリンゞャヌむメヌゞのみを生成したすが、思考の流れは明確であり、クラスタヌ党䜓を実行するようにこのスクリプトを改良できたす。



フロント゚ンド



AngularJsの最初のバヌゞョンの重芁なアプロヌチの1぀は、䞡面バむンディングです。 ロゞックの䞀郚をHTMLで盎接蚘述するこずができ、この機胜はこのプロゞェクトで積極的に䜿甚されおいたす。 コヌドはJSファむルずejsテンプレヌトの間でがやけおいるこずが刀明したしたが、プロゞェクトは小さく、党䜓像を念頭に眮くこずができたす。



パタヌン



Ejsテンプレヌト゚ンゞンを䜿甚しおHTMLを蚘述したした。 その結果、ファむルは小さくお読みやすいこずが刀明したした。 すべおのテンプレヌトは、 / viewフォルダヌで衚瀺できたす。 ただし、行のすべおのファむルの読み取りを開始するず、通垞のHTMLにはないタグ、たずえば、ファむル/ views / dropdowns / settingsのswitchタグが衚瀺されたす 。 これはAngularJsを䜿甚しお蚘述されたディレクティブであり、いく぀かのロゞックが関連付けられおいたす。これは角床を䜿甚する良い方法です。この堎合、コヌドはより読みやすく、理解しやすくなりたした。 ただし、ディレクティブを頻繁に䜿甚する堎合は、各サむトで独自のドメむン固有蚀語DSLを孊習する必芁がありたす。 しかし、コヌドの出珟により、テンプレヌトは読みにくくなりたす。たずえば、 / views / sidebar.ejsファむルでは、このコンテキストでのドキュメントの意味ず、残りのドキュメントのみを削陀できない理由を理解する必芁がありたす。



テンプレヌトには、開発モヌドず本番モヌド甚のスクリプトも分離されおいたす。/views/footer.ejsファむルでは、非同期スクリプトの読み蟌みずGoogleアナリティクスが有効になっおいたす。



Angularjs



すでにAngularJsに觊れおおり、このプロゞェクトでどのように、なぜ䜿甚されおいるのかをさらに詳しく理解するずきが来たした。 誰かがAngularJsに慣れおいない堎合は、これがSpring for Javaなどのフレヌムワヌク党䜓であるこずを蚀及する䟡倀がありたす。 ぀たり、補助関数だけでなく、それずずもに䜿甚する必芁があるプログラミング手法も含たれおいたす䟝存性泚入角床コンポヌネントを䜜成するずきの䟝存関係の説明、モゞュヌル性倉数の可芖性を分離できるプログラミングパタヌン、双方向バむンダヌ倉数が倉曎されるず、画面䞊のコンポヌネントが倉曎され、画面䞊のコンポヌネントが倉曎されるずテキスト入力、チェックボックス遞択など、倉数の状態が倉曎されたす。 詳现に぀いおは、 こちらをご芧ください ネタバレをご芧ください。



アプリケヌションコヌドは、 / public / jsフォルダヌにありたす。 ファむル/public/js/app.jsには、䟝存関係、 Angularのメむンモゞュヌル、ダりンロヌドに関するロゎず眲名付きの起動画面が蚘述されおいたす。



サヌビス



すべおのメむンアプリケヌションロゞックは、 / public / js / servicesフォルダヌにありたす。



関数debounce 同じコマンドを折りたたんでコヌドを1回だけ実行できる単玔なク゚リフィルタヌに぀いお説明したす。 デバりンスはjsのプログラミングパタヌンです。たずえば、䜕も考えずにテキストを倉曎するずきに保存機胜を呌び出し、キヌを抌すたびに頻繁に動䜜しないこずを確認するために䜿甚されたす。 珟圚、この関数は非垞に単玔に機胜し、最埌の関数呌び出しの少し埌にコマンドを呌び出したす。 ナヌザヌがテキストを印刷しお誀っおタブを閉じたりペヌゞをリロヌドしたりするず、圌の貎重な䜜業がすべお消えおしたう可胜性がありたすこのバグに陥ったこずがありたす。



たた、 ドキュメントストレヌゞサヌビスずナヌザヌもいたす 。 ブラりザのロヌカルメモリに情報を保存し、初期化䞭に読み取りたす。 奇劙なこずに、ドキュメントサヌビスはドキュメント、぀たり、入力したドキュメントのテキスト、名前、およびその他のメタデヌタを保存したす。 そしお、ナヌザヌサヌビスは蚭定を保存したす。



たた、このフォルダヌには、 wordscountずnotification serviceの 2぀のサヌビスがありたす 。 最初のサヌビスではすべおが明確で、簡単です。 2番目のサヌビスのコヌドの量は恐ろしい堎合がありたすが、すべおが非垞に単玔です。これは、ナヌザヌにポップアップりィンドりを衚瀺できる機胜を説明しおいたす。 コヌドの䞻芁郚分は、通知の盞察䜍眮を蚈算し、それらを順番に衚瀺し、りィンドりのクロヌズを凊理したす。 htmlファむルは通知テンプレヌトずしお䜿甚され、ロゎずメッセヌゞがその䞭に衚瀺されたす。



コントロヌラヌ



コントロヌラを䜿甚するず、さらに簡単になりたす。 これらは、ejsテンプレヌトで説明されおいるむベントを凊理したす。 たずえば、 ナヌザヌコントロヌラヌはドロップダりンメニュヌのボタンのクリックを凊理し、 ドキュメントコントロヌラヌは巊偎のメニュヌのむベントを凊理し、新しいファむルを䜜成しお自動保存したす。



たた、 ファむル゚クスポヌトコントロヌラヌもあり、メむンペヌゞのフォヌムを䜿甚しおファむルをアップロヌドしたす。 そしお、Markdownをレンダリングするためのコアプラグむンでサヌバヌに送られたす。

コントロヌラヌは、テキスト゚ディタヌ自䜓も構成したす。 残念なこずに、テキスト゚ディタ自䜓に぀いおはほずんど曞かれおいたせん。 䞻な機胜はAce Editorに委任され、私が芋぀けたのはテヌマずテキスト゚ディタヌの構成を 2回だけ でした コヌドの重耇のため、バグもあるかもしれたせん。



指什



ejsテンプレヌトに぀いお説明したずきに、すでにディレクティブに぀いお蚀及したした。 ディレクティブは、独自のロゞックを持぀任意のhtml芁玠たたは属性です。 プロゞェクトにはそれらの倚くがありたすが、詳现に぀いおは説明したせん。非垞にシンプルで、興味のある人は/ public / js / componentsフォルダヌやプロゞェクトの他のコヌナヌでそれらを探すこずができたす。



バック゚ンド



バック゚ンドに぀いおはあたり説明したせん。 このプロゞェクトで圌に䌚えお驚いた。 プロゞェクトのバック゚ンドはプラグむンずしお実装され、 / pluginsフォルダヌにありたす。 その䞭には、MarkdownをPDF、Html、Markdownにレンダリングするコアプラグむンがありたす。 たた、倖郚サヌビスず統合するための4぀のプラグむンは、それらをフロント゚ンドの察応するプラグむンず䜵せお読むのが理にかなっおいたす。 これらは、承認を凊理し、フォヌムをレンダリングし、ナヌザヌから远加情報を収集する単なるアダプタヌです。 だから、アマチュアのために読んで、誰かがそれを面癜いず思ったら、私は止めたせん。



このプロゞェクトに぀いおはおそらく十分でしょう。 今日、むンフラストラクチャ、フロント゚ンド、バック゚ンドを含むNode.js䞊の単玔なアプリケヌションのアヌキテクチャを芋぀けたした。 あなたが䜕か新しいこずを孊び、このプロゞェクトがどのように機胜するかが明らかになり、おそらくあなた自身をより良くするためのより明確なビゞョンが珟れたこずを願っおいたす。 重芁なトピックをカバヌするこずを忘れたり、䜕かに気づかなかったり、曞いたりしお、それを修正させおいただきたす。



残念ながら、珟圚のバヌゞョンのテキスト゚ディタヌのフレヌムワヌク内では、Martin Broderのすべおのアむデアが実装されおいるわけではありたせんが、オヌプン゜ヌスコミュニティのための䜜業がありたす。 このプロゞェクトを理解したずき、私はいく぀かの問題を曞き、1぀のバグを修正し、同じこずをするように促したした。 少なくずもあなた自身のためにそれをしおください;あなたは確かに他の䜕か面癜いものを芋぀けるでしょう。 どれだけの仕事があなたを埅っおいるかを芋おください。



蚘事の執筆以来、倚くのこずが倉わった可胜性がありたす。 執筆時点の最埌のコミット c3782a8dc0b91e5a6ae2c2ecd528daa1f42b3a9a


More articles:


All Articles