diff options
Diffstat (limited to 'files/ja/learn')
3 files changed, 35 insertions, 277 deletions
diff --git a/files/ja/learn/getting_started_with_the_web/index.html b/files/ja/learn/getting_started_with_the_web/index.html index 6471ecabd2..149ced54f2 100644 --- a/files/ja/learn/getting_started_with_the_web/index.html +++ b/files/ja/learn/getting_started_with_the_web/index.html @@ -1,65 +1,65 @@ --- -title: Web 入門 +title: ウェブ入門 slug: Learn/Getting_started_with_the_web tags: - Beginner - CSS + - Design + - Guide - HTML - Index - 'l10n:priority' - publishing - - ガイド - - デザイン - - 学習 - - 理論 + - theory translation_of: Learn/Getting_started_with_the_web --- <div>{{LearnSidebar}}</div> <div class="summary"> -<p><em>Web 入門</em>は、実用的な Web 開発の入門シリーズです。まずはじめに、簡単な Web ページを作るのに必要なツールをセットアップします。そして、簡単なコードを書いたら、実際に Web に公開します。</p> +<p><em>ウェブ入門</em>は、実用的なウェブ開発の入門シリーズです。まずはじめに、簡単なウェブページを作るのに必要なツールをセットアップします。そして、簡単なコードを書いたら、実際にウェブに公開します。</p> </div> -<h2 id="The_story_of_your_first_website" name="The_story_of_your_first_website">初めての Web サイトの旅</h2> +<h2 id="The_story_of_your_first_website">初めてのウェブサイトの旅</h2> -<p>プロが作るような Web サイトを作るのはとても大変な作業です。Web 開発の初心者は、まずは小さなものから作り始めるとよいでしょう。今すぐ Facebook のようなサイトを作ることはできませんが、簡単な Web サイトなら作るのはそれほど難しくありません。私たちはここから始めることにしましょう。</p> +<p>プロが作るようなウェブサイトを作るのはとても大変な作業です。ウェブ開発の初心者は、まずは小さなものから作り始めるとよいでしょう。今すぐ Facebook のようなサイトを作ることはできませんが、簡単なウェブサイトなら作るのはそれほど難しくありません。私たちはここから始めることにしましょう。</p> -<p>以下の記事を順番に読んでいけば、Web サイトを作ったことがない全くの初心者でも、自身の Web サイトを作って、Web に公開できるようになります。さあ、はじめましょう！</p> +<p>以下の記事を順番に読んでいけば、まったくの初心者でも初めてのウェブページをオンラインに公開できるでしょう。さあ、はじめましょう！</p> -<h3 id="Installing_basic_software" name="Installing_basic_software"><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></h3> +<h3 id="Installing_basic_software">基本的なソフトウェアのインストール</h3> -<p>Web サイトを作るためのツールはたくさんあります。Web 開発を始めたばかりの頃は、テキストエディタやフレームワーク、テストツールといったいろいろなソフトウェアが山のようにあって、混乱してしまうかもしれません。そこで、<a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>では、基本的な Web 開発を始めるあなたのために私たちが選んだツールを紹介して、ツールのインストールの手順をひとつずつ順番に説明しています。</p> +<p>ウェブサイトを作るためのツールはたくさんあります。ウェブ開発を始めたばかりの頃は、テキストエディターやフレームワーク、テストツールといったいろいろなソフトウェアが山のようにあって、混乱してしまうかもしれません。そこで、<a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>では、基本的なウェブ開発を始めるのに必要なソフトウェアをインストールする方法を手順を追って紹介します。</p> -<h3 id="What_will_your_website_look_like" name="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></h3> +<h3 id="What_will_your_website_look_like">ウェブサイトをどんな外見にするか</h3> -<p>Web サイトのコードを書き始める前に、まずは計画を立てることが大切です。あなたの Web サイトにはどんな情報を載せますか？フォントや色はどうしたいですか？<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like"> Web サイトをどんな外見にするか</a>では、コンテンツやデザインを計画するのに役に立つ簡単な方法を紹介します。</p> +<p>ウェブサイトのコードを書き始める前に、まずは計画を立てることが大切です。あなたのウェブサイトにはどんな情報を載せますか？フォントや色はどうしたいですか？<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a>では、コンテンツやデザインを計画するのに役に立つ簡単な方法を紹介します。</p> -<h3 id="Dealing_with_files" name="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></h3> +<h3 id="Dealing_with_files">ファイルの扱い</h3> -<p>Web サイトを作るにはたくさんのファイルが必要です。テキストコンテンツのファイル、コードのファイル、スタイルシートのファイル、画像などのメディアコンテンツのファイルなどがあります。Web サイトを作るときは、これらのファイルをうまく配置して、ファイル同士がお互いにアクセスできることを確認する必要があります。<a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>では、Web サイトのファイルを適切に配置する方法と、気をつけるべきことについて説明します。</p> +<p>ウェブサイトを作るにはたくさんのファイルが必要です。テキストコンテンツのファイル、コードのファイル、スタイルシートのファイル、画像などのメディアコンテンツのファイルなどがあります。ウェブサイトを作るときは、これらのファイルをうまく配置して、ファイル同士がお互いにアクセスできることを確認する必要があります。<a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>では、ウェブサイトのファイルを適切に配置する方法と、気をつけるべきことについて説明します。</p> -<h3 id="HTML_basics" name="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></h3> +<h3 id="HTML_basics">HTML の基本</h3> -<p>Hypertext Markup Language (HTML、ハイパーテキスト・マークアップ・ランゲージ) は、Web サイトのコンテンツに構造を指定して、それぞれの部分がどういう意味や目的を持っているのかを指定するために使うコードです。具体的に言うと、構造というのは、段落や箇条書きのリスト、画像、テーブルなどのようなものです。<a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a>では、分からなくならないように、HTML に親しめるように丁寧に説明します。</p> +<p>Hypertext Markup Language (HTML、ハイパーテキスト・マークアップ・ランゲージ) は、ウェブのコンテンツを構造化し、意味や目的を指定するために使うコードです。例えば、コンテンツが文章なのか箇条書きなのか。ページに挿入した画像はあるか。データの表はあるか。 <a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a>では、分からなくならないように、HTML に親しめるように丁寧に説明します。</p> -<h3 id="CSS_basics" name="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></h3> +<h3 id="CSS_basics">CSS の基本</h3> -<p>Cascading Stylesheets (CSS: カスケーディング・スタイルシート) は、Web サイトの見た目を決めるために使うコードです。CSS を書くと、テキストの色を黒や赤にしたり、コンテンツを画面のどこに表示するかを決めたり、ページの背景に好きな色をつけたり画像を表示したりして、Web サイトを好きなように飾り付けることができます。<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a>では、こうした飾り付けの方法について説明します。</p> +<p>Cascading Stylesheets (CSS: カスケーディング・スタイルシート) は、ウェブサイトの見た目を決めるために使うコードです。CSS を書くと、テキストの色を黒や赤にしたり、コンテンツを画面のどこに表示するかを決めたり、ページの背景に好きな色をつけたり画像を表示したりして、ウェブサイトを好きなように飾り付けることができます。<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a>では、こうした飾り付けの方法について説明します。</p> -<h3 id="JavaScript_basics" name="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></h3> +<h3 id="JavaScript_basics">JavaScript の基本</h3> -<p>JavaScript は、Web サイトにインタラクティブな機能を追加するために使うプログラミング言語です。例えば、ゲーム、ボタンが押された時やフォームにデータが入力された時に起こること、動的なスタイルの効果、アニメーション、などなどです。<a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a>では、この楽しいプログラミング言語を使ってどんなことができるのか、そしてどうやって使い始めれば良いのかを紹介します。</p> +<p>JavaScript は、ウェブサイトにインタラクティブな機能を追加するために使うプログラミング言語です。例えば、ゲーム、ボタンが押された時やフォームにデータが入力された時に起こること、動的なスタイルの効果、アニメーション、などなどです。 <a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a>では、この楽しいプログラミング言語を使ってどんなことができるのか、そしてどうやって使い始めれば良いのかを紹介します。</p> -<h3 id="Publishing_your_website" name="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Web サイトの公開</a></h3> +<h3 id="Publishing_your_website">ウェブサイトの公開</h3> -<p>Web サイトのコードを書き終えて、Web サイトに必要なファイルが用意できたら、作ったファイルをすべてオンラインにして、インターネット上の他の人からも見られるようにする必要があります。Web<a href="/ja/docs/Learn/Getting_started_with_the_web/ウェブサイトを公開する"> サイトの公開</a>では、あなたが書いた簡単なコードをオンラインにして世界中に公開するための簡単な方法を説明します。</p> +<p>ウェブサイトのコードを書き終えて、ウェブサイトに必要なファイルが用意できたら、作ったファイルをすべてオンラインにして、インターネット上の他の人からも見られるようにする必要があります。<a href="/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website">サンプルコードの公開</a>では、簡単なサンプルコードを最小限の手間でオンラインに公開する方法を説明しています。</p> -<h3 id="How_the_web_works" name="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></h3> +<h3 id="How_the_web_works">ウェブのしくみ</h3> -<p>あなたがお気に入りの Web サイトにアクセスする時、実は目に見えない所ではとても複雑なことが行われています。Web<a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works"> のしくみ</a>では、あなたがパソコンで Web ページを開いた時に裏側でどんなことが行われているのか、その大まかなしくみを説明します。</p> +<p>あなたがお気に入りのウェブサイトにアクセスする時、実は目に見えない所ではとても複雑なことが行われています。<a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">ウェブのしくみ</a>では、あなたがパソコンでウェブページを開いた時に裏側でどんなことが行われているのか、その大まかなしくみを説明します。</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> -<p><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>: 完全な初心者を対象とした、Web 開発までの Web の基本を説明した動画の素晴らしいシリーズ。<a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a> 作。</p> - -<p><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">The web and web standards</a>: この記事では、Web の役立つ背景 — どうやってできたのか、Web 標準技術とはなにか、どう連携させるか、" Web 開発者" がなぜ素晴らしいキャリアであるか、この過程を通じてどんなベストプラクティスが学習できるか — を提供します。</p> +<ul> + <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">ウェブDemystified</a>: ウェブの基本を説明した素晴らしい動画のシリーズで、完全な初心者がウェブ開発できるようにするためのものです。 <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a> 作。</p> + <li><a href="/ja/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">The web and web standards</a>: この記事では、ウェブの役立つ背景 — どうやってできたのか、ウェブ標準技術とはなにか、どう連携させるか、"ウェブ開発者" がなぜ素晴らしいキャリアであるか、この過程を通じてどんなベストプラクティスが学習できるか — を提供します。</li> +</ul> diff --git a/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html index 15394f6e79..7fb1f1101f 100644 --- a/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ b/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -165,7 +165,7 @@ started with developing web sites and applications."></pre> <p>例えば、 <a href="http://ogp.me/">Open Graph Data</a> は Facebook が開発した、ウェブサイトに豊富なメタデータを与えるメタデータプロトコルです。 MDN Web Docs のソースコードでは、次のようなものがあります。</p> -<pre class="brush: html notranslate"><meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> +<pre class="brush: html notranslate"><meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"> <meta property="og:description" content="The Mozilla Developer Network (MDN) provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS."> @@ -199,15 +199,15 @@ and HTML5 Apps. It also documents Mozilla products, like Firefox OS."> <p>最近では考慮するべきアイコンの種類がほかにもたくさんあります。例えば、 MDN Web Docs ホームページのソースコードには以下の行があります。</p> <pre class="brush: html notranslate"><!-- third-generation iPad with high-resolution Retina display: --> -<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png"> <!-- iPhone with high-resolution Retina display: --> -<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png"> <!-- first- and second-generation iPad: --> -<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png"> <!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> -<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> +<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png"> <!-- basic favicon --> -<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"></pre> +<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png"></pre> <p>コメントはそれぞれのアイコンの用途を説明しています。 — この要素は、ウェブサイトが iPad のホーム画面に保存された時のすばらしい高解像度なアイコンの提供といったことをカバーしています。</p> diff --git a/files/ja/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html b/files/ja/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html deleted file mode 100644 index f3a62d8b6e..0000000000 --- a/files/ja/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: PWS/Cloud Foundry に LocalLibrary をインストールする -slug: Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry -translation_of: Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">この記事では Pivotal Web Services の PaaS クラウドに<em>地域図書館</em>をインストールする方法の実際的なデモンストレーションを提供します。これは、チュートリアルのパート7で使用されている PaaS クラウドサービスである Heroku のフル機能のオープンソース代替です。PWS/Cloud Foundry は、Heroku (または別の PaaS クラウドサービス) に代わるものを探している場合、または単に何か違うことを試したい場合には、絶対にチェックする価値があります。</p> - -<h2 id="Why_PWS">Why PWS?</h2> - -<p>Pivotal Web Services is a public instance of the <a href="https://www.cloudfoundry.org/">Open Source Cloud Foundry Platform</a>. It is a polyglot platform supporting many different languages including Node.js, Java, PHP, Python, Staticfiles, and Ruby. It has a introductory free trial and is incredibly efficient for running Node applications! As Node and Express are open source projects, there is consistency with working with an open deployment platform such as Cloud Foundry. You can get under the <a href="https://github.com/cloudfoundry">hood</a> and see how an application is hosted.</p> - -<p>There are multiple reasons to use PWS!</p> - -<ul> - <li>PWS has a <a href="https://run.pivotla.io/pricing">flexible pricing</a> that is extremely well tuned for small runtimes such as node. It's possible to run a redundant pair of your app for less than $5 per month. That includes a standby failover system to take over running your app if the main server fails at any point.</li> - <li>As a PaaS, PWS takes care of a lot of the web infrastructure for us. This makes it much easier to get started, because you don't worry about servers, load balancers, reverse proxies, restarting your website on a crash, or any of the other web infrastructure that PWS provides for us under the hood.</li> - <li>Because PWS is using Cloud Foundry, an open platform. You can therefore easily deploy your application to other Cloud Foundry providers such as <a href="https://www.ibm.com/cloud-computing/bluemix/">IBM BlueMix</a>, <a href="https://www.anynines.com/">AnyNines</a> and <a href="https://www.swisscom.ch/en/business/enterprise/offer/cloud-data-center-services/paas/application-cloud.html">Swisscomm Application Cloud</a>. The below instructions will work with any standard Cloud Foundry deployment with minor modifications.</li> - <li>While it does have some limitations, these will not affect this particular application. For example: - <ul> - <li>PWS and Cloud Foundry provide only short-lived storage so user-uploaded files cannot safely be stored on PWS itself.</li> - <li>The free trial is good for a year and only up to $87 of app usage. For a typical Node app that means you can run an app for an entire year.</li> - </ul> - </li> - <li>Mostly it just works, and if you end up loving it and want to upgrade, scaling your app is very easy.</li> - <li>PWS and other Cloud Foundry applications are used for production apps. </li> -</ul> - -<h2 id="How_does_PWS_work_2">How does PWS work?</h2> - -<p>PWS runs websites and applications using containers and has been for many years. Cloud Foundry started using a container technology called Warden and is now using a container system called Garden. These are very similar to the popular Docker container and in fact, many installations of Cloud Foundry support deploying Docker containers.</p> - -<p>One of the advantages of using Cloud Foundry is that you do not need to create the container spec, as Cloud Foundry's buildpacks will manufacture them based on the latest components. Apps on Cloud Foundry should follow 12 Factor guidelines as the containers deployed are ephemeral and may be cleaned up at anytime and redeployed somewhere else in the cloud. This ensures that your apps and platform have the latest software. An application can consist of multiple instances where the application is placed into redundant containers that enable high availability of your app. Cloud Foundry will automatically handle all the load balancing between identical instances. This allows you to scale your application for performance and availability</p> - -<p>Since the file system is ephemeral any temporary storage or services should be located elsewhere using backing services. This can be done using marketplace services available on different providers or by bringing your own via <a href="https://docs.run.pivotal.io/devguide/services/user-provided.html">User Provided Services</a>.</p> - -<h2 id="What_do_we_cover_below">What do we cover below?</h2> - -<p>This post covers how to modify the LocalLibrary application from the tutorial for deployment on PWS and Cloud Foundry. In doing so, it covers the basics of deploying any node.js application to PWS with the following steps.</p> - -<ul> - <li>Configuring the package.json file to run with the engines available on PWS.</li> - <li>Adding and installing the<a href="https://github.com/cloudfoundry-community/node-cfenv"> 'cfenv' node module</a> to make working with services easier.</li> - <li>Using the cfenv module to connect to a MongoDB instance from mLab that was created and bound using the PWS marketplace.</li> - <li>Using the <a href="https://github.com/cloudfoundry/cli">cf CLI</a> tool to create a new mongoDB service instance and bind it to the local library application.</li> - <li>How to set environment variables for Node using the cf CLI.</li> - <li>How to look at logs, again using the cf CLI tool.</li> -</ul> - -<p>So let's get started. You have two options, you can go through the tutorial from the <a href="<https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website>">beginning</a> or you can just download the completed project and modify it from there for use on PWS. To do the latter, you can do the following from a terminal:</p> - -<pre class="brush: bash"><code>git clone https://github.com/mdn/express-locallibrary-tutorial</code></pre> - -<p>You'll then need to follow the preparation steps listed in the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment#Getting_your_website_ready_to_publish">Getting your website ready to publish</a> section of <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a>, before then following the steps listed below.</p> - -<div class="note"> -<p><strong>Note</strong>: This work flow is based on the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment#Example_Installing_LocalLibrary_on_Heroku">Mozilla Heroku work flow in the main Express/Node tutorial series</a> for consistency, to help readers compare and contrast. </p> -</div> - -<h2 id="Modifying_the_LocalLibrary_for_PWS">Modifying the LocalLibrary for PWS</h2> - -<p id="How_does_PWS_work">Deployment of a Node application on Cloud Foundry takes the following steps. Using the downloaded 'cf' CLI tool on your environment, your source code and supporting metadata files are uploaded to Cloud Foundry which will assemble and package the components of your application. Note that your files need to be located on your system to deploy or as a zip archive somewhere accessible on the internet. We'll assume the former.</p> - -<p>This means, no assumptions about which source control system is used. As long as you have a complete source tree in your local file system you can deploy the app. There are some things you have to make available to ensure the correctly assembly of your Node application. First Cloud Foundry cf CLI will look for the presence of the 'package.json' file to determine the dependencies and download the necessary components. The rules of this assembly are defined in Cloud Foundry's <a href="http://docs.run.pivotal.io/buildpacks/node/">nodejs buildpack</a>. An optional cloud foundry manifest file can specify information about your application such as name, size and start command if non-standard. In addition to deploying the application, the cf CLI tool can also configure services, set environment variables and view logs. That's all the overview you need in order to get started (see <a href="https://docs.run.pivotal.io">Getting Started on Pivotal Web Services</a> for a more comprehensive guide). Let's start making the changes so you'll need to deploy the <em>LocalLibrary</em> application to PWS.</p> - -<h3 id="Set_node_version">Set node version</h3> - -<p>The <strong>package.json</strong> contains everything needed to work out your application dependencies and what file should be launched to start your site. Cloud Foundry and PWS detects the presence of this file, and will use it to provision your app environment. The only useful information missing in our current <strong>package.json</strong> is the version of node. We can find the version of node we're using for development by entering the command:</p> - -<pre class="brush: bash">node --version -# <em>will return version e.g. v6.10.3</em></pre> - -<p>Open <strong>package.json</strong> with a text editor, and add this information as an <strong>engines > node</strong> section as shown (using the version number retrieved above).</p> - -<pre class="brush: json">{ - "name": "express-locallibrary-tutorial", - "version": "0.0.0", -<strong> "engines": { - "node": "6.10.3" - },</strong> - "private": true, - ... -</pre> - -<h3 id="Database_configuration">Database configuration</h3> - -<p>So far in this tutorial we've used a single database that is hard coded into the <strong>app.js </strong>file. Normally we'd like to be able to have a different database for production and development, so next we'll modify the LocalLibrary website to get the database URI from the OS environment, and otherwise use our development database that we added manually earlier. Cloud Foundry has a very flexible services model that enables multiple services of the same type to exist in the environment. It stores all services related configurations in a single parseable JSON object called <code>VCAP_SERVICES</code>. A typical <code>VCAP_SERVICES</code> variable looks like this:</p> - -<pre class="brush: json">{ - "VCAP_SERVICES": { - "mlab": [ - { - "credentials": { - "uri": "mongodb://CloudFoundry_test_dev:somecr8zypassw0rd@dbhost.mlab.com:57971/CloudFoundry_dbname" - }, - "label": "mlab", - "name": "node-express-tutorial-mongodb", - "plan": "sandbox", - "provider": null, - "syslog_drain_url": null, - "tags": [ - "Cloud Databases", - "Developer Tools", - "Web-based", - "Data Store", - ], - "volume_mounts": [] - } - ] - } -} - -</pre> - -<p>Writing the code to extract and parse this environment variable is not hard, but it doesn't add a lot of value when others have written libraries to do this. In this case, there is a node.js package we can use called <a href="https://github.com/cloudfoundry-community/node-cfenv"><em>cfenv</em></a>.</p> - -<p>This will download the cfenv module and its dependencies, and modify the package.json file as required. Open <strong>app.js</strong> and find the block with all the 'requires' that load the modules into your application. In this example look for the line that looks something like this:</p> - -<pre class="brush: js">var expressValidator = require('express-validator');</pre> - -<p>If you cannot find that exact line, look for the blocks of 'requires' and look for the last one. Add the following text after it:</p> - -<pre class="brush: js">var cfenv = require('cfenv');</pre> - -<ol> - <li> - <p>To install the package, go to your terminal and make sure you are in the directory where the <code>package.json</code> file for LocalLibrary is. From the command line, type:</p> - - <pre class="brush: bash">npm install cfenv</pre> - </li> - <li> - <p>Now that you have loaded the module, this next line will instantiate an object that will contain the app and services information required for deployment. Add the following after the line that contains <code>app.use(helmet());</code></p> - - <pre class="brush: js">// Set up CF environment variables -var appEnv = cfenv.getAppEnv(); -</pre> - - <p>When this line executes, all the Cloud Foundry application environment information will become available to the application in the <code>appEnv</code> object.</p> - </li> - <li> - <p>Now it is time to update the application to use the database configured by the platform. Find the line that sets the mongoDB connection variable. It will look something like this:</p> - - <pre class="brush: js">var mongoDB = process.env.MONGODB_URI || dev_db_url;</pre> - </li> - <li> - <p>You will now modify the line with the following code <code>appEnv.getServiceURL('node-express-tutorial-mongodb')</code> to get the connection string from an environment variable that is being managed by the <code>cfenv</code> module. If no service has been created and bound it will use your own database URL you created as part of the tutorial instead of the one from the environment. So replace the line above with the following:</p> - - <pre class="brush: js">var mongoDB = appEnv.getServiceURL('node-express-tutorial-mongodb') || dev_db_url; -</pre> - </li> - <li> - <p>Now run the site locally (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">Testing the routes</a> for the relevant commands) and check that the site still behaves as you expect. At this point your app is ready to use with Cloud Foundry and Pivotal Web Services.</p> - </li> -</ol> - -<h2 id="Get_a_Pivotal_Web_Services_account">Get a Pivotal Web Services account</h2> - -<p>To start using Pivotal Web Services you will first need to create an account (skip ahead to <a href="#Create_and_upload_the_website">Create and upload the website</a> if you've already got an account and have already installed the PWS cf CLI client).</p> - -<ul> - <li>Go to <a href="https://run.pivotal.io">https://run.pivotal.io</a> and click the <strong>SIGN UP FOR FREE</strong> button.</li> - <li>Enter your details and then press <strong>CREATE FREE ACCOUNT</strong>. You'll be asked to check your email for a sign-up email.</li> - <li>Click the account activation link in the signup email. You'll be taken back to your account on the web browser and you will complete the registration.</li> - <li>You will set your password and go through the rest of the new user sign up and how to claim your free trial account. Note you need a mobile phone to confirm your account. You will receive an "org" account funded with $87 of application usage credit. Note your email account can be in multiple orgs on PWS. This is similar to your user account on services like GitHub.</li> - <li>Go to <a href="https://login.run.pivotal.io">https://console.run.pivotal.io</a> and login in. You'll then be logged in and taken to the PWS dashboard: <a href="https://console.run.pivotal.io">https://console.run.pivotal.io</a>.</li> -</ul> - -<h2 id="Install_the_cf_CLI_client">Install the cf CLI client</h2> - -<p>The cf CLI client is a software tool for managing and deploying your application. Download and install the PWS cf CLI client by following the <a href="https://console.run.pivotal.io/tools">instructions on Pivotal Web Services</a> or downloading directly from <a href="https://github.com/cloudfoundry/cli">GIthub</a>. Be sure to download the correct version for your computer. After the client is installed you will be able run commands, for example to get help on the client:</p> - -<pre class="brush: bash">cf help -</pre> - -<p>We'll now go through the steps to login to PWS using the CLI and deploy — or in Cloud Foundry parlance "push" your app.</p> - -<h2 id="Create_and_upload_the_website">Create and upload the website</h2> - -<p>To create the app we navigate to the directory where our modified files are. This is the same directory where the LocalLibrary package.json file is located. First, let's tell the cf CLI which Cloud Foundry instance you want to use. We need to do this, since the cf CLI tool can be used with any standard Cloud Foundry system, so this command indicates which specific Cloud Foundry you are using. Enter the following terminal command now:</p> - -<pre class="brush: bash">cf api api.run.pivotal.io</pre> - -<p>Next login using the following command (enter your email and password when prompted):</p> - -<pre class="brush: bash">cf login -Email: enter your email -Password: enter your password</pre> - -<p>We can now push our app to PWS. In the below example. replace 'some-unique-name' with something you can remember that is likely to be unique. If it isn't unique, the system will let you know. The reason this name has to be unique to the PWS system is it is the address we will use to to access your LocalLibrary application. I used <em>mozilla-express-tutorial-xyzzy</em>. You should use something else.</p> - -<pre class="brush: bash">cf push some-unique-name -m 256MB</pre> - -<p>Note the <code>-m</code> flag we added is not required. We just included it so that we only use 256MB of memory to run the app. Node apps typically can run in 128 MB, but we are being safe. If we didn't specify the memory, the CLI would use the default 1 GB of memory, but we want to make sure your trial lasts longer. You should now see a bunch of text on the screen. It will indicate that the CLI is uploading all your files, that it's using the node buildpack, and it will start the app. If we're lucky, the app is now "running" on the site at the URL <code>https://some-unique-name.cfapps.io</code>. Open your browser and run the new website by going to that URL.</p> - -<div class="note"><strong>Note</strong>: The site will be running using our hardcoded development database at this time. Create some books and other objects, and check out whether the site is behaving as you expect. In the next section we'll set it to use our new database.</div> - -<h2 id="Setting_configuration_variables">Setting configuration variables</h2> - -<p>You will recall from a preceding section that we need to <a href="#NODE_ENV">set NODE_ENV to 'production'</a> in order to improve our performance and generate less-verbose error messages.</p> - -<ol> - <li> - <p>Do this by entering the following command:</p> - - <pre class="brush: bash">cf set-env some-unique-name NODE_ENV production -</pre> - </li> - <li> - <p>We should also use a separate database for production. Cloud Foundry can take advantage of a marketplace to create a new service and automatically bind it to your app. Bind means place the service database credentials in the environment variable space of the container running your application for you to access. Enter the following commands:</p> - - <pre class="brush: bash">cf create-service mlab sandbox node-express-tutorial-mongodb -cf bind-service some-unique-name node-express-tutorial-mongodb -</pre> - </li> - <li> - <p>You can inspect your configuration variables at any time using the <code>cf env some-unique-name</code> command — try this now:</p> - - <pre class="brush: bash">cf env some-unique-name -</pre> - </li> - <li> - <p>In order for your applications to use the new credentials you will have to restage your application, meaning that it will restart and apply the new environment variables. This can be done using the following — enter this command now:</p> - - <pre class="brush: bash">cf restage some-unique-name -</pre> - </li> - <li> - <p>If you check the home page now it should show zero values for your object counts, as the changes above mean that we're now using a new (empty) database.</p> - </li> -</ol> - -<h2 id="Debugging">Debugging</h2> - -<p>The PWS cf client provides a few tools for debugging:</p> - -<pre class="brush: bash">>cf logs some-unique-name --recent # Show current logs ->cf logs some-unique-name # Show current logs and keep updating with any new results</pre> - -<h2 id="Summary">Summary</h2> - -<p>If you followed the above steps, you should have now deployed the LocalLibrary app to PWS. Well done! If the deployment wasn't successful, double check all the steps.</p> |