path: root/files/ja/learn/server-side/express_nodejs/deployment/index.html

---
title: 'Express チュートリアル Part 7: プロダクションへのデプロイ'
slug: Learn/Server-side/Express_Nodejs/deployment
tags:
  - CodingScripting
  - Express
  - Node
  - heroku
  - サーバサイド
  - デプロイ
  - 初心者
  - 学習
translation_of: Learn/Server-side/Express_Nodejs/deployment
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenu("Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}</div>

<p class="summary">これで素晴らしい<a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">地域図書館</a> Web サイトを作成 (およびテスト) したので、公共の Web サーバーにインストールして、図書館のスタッフとメンバーがインターネット経由でアクセスできるようにします。この記事では Web サイトをデプロイするためのホストを見つける方法、およびサイトを運用に向けて準備するために必要な作業の概要について説明します。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提条件:</th>
   <td><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a>を含む、これまでのチュートリアルのトピックをすべて完了してください。</td>
  </tr>
  <tr>
   <th scope="row">目標:</th>
   <td>Express アプリケーションをプロダクションにデプロイする場所と方法を学ぶ。</td>
  </tr>
 </tbody>
</table>

<h2 id="Overview">Overview</h2>

<p>Once your site is finished (or finished "enough" to start public testing) you're going to need to host it somewhere more public and accessible than your personal development computer.</p>

<p>Up to now, you've been working in a <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">development environment</a>, using Express/Node as a web server to share your site to the local browser/network, and running your website with (insecure) development settings that expose debugging and other private information. Before you can host a website externally you're first going to have to:</p>

<ul>
 <li>Choose an environment for hosting the Express app.</li>
 <li>Make a few changes to your project settings.</li>
 <li>Set up a production-level infrastructure for serving your website.</li>
</ul>

<p>This tutorial provides some guidance on your options for choosing a hosting site, a brief overview of what you need to do in order to get your Express app ready for production, and a worked example of how to install the LocalLibrary website onto the <a href="https://www.heroku.com/">Heroku</a> cloud hosting service.</p>

<p>Bear in mind that you don't have to use Heroku — there are other hosting services available. We've also provided a separate tutorial to show how to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Install LocalLibrary on PWS/Cloud Foundry</a>.</p>

<h2 id="What_is_a_production_environment">What is a production environment?</h2>

<p>The production environment is the environment provided by the server computer where you will run your website for external consumption. The environment includes:</p>

<ul>
 <li>Computer hardware on which the website runs.</li>
 <li>Operating system (e.g. Linux or Windows).</li>
 <li>Programming language runtime and framework libraries on top of which your website is written.</li>
 <li>Web server infrastructure, possibly including a web server, reverse proxy, load balancer, etc.</li>
 <li>Databases on which your website is dependent.</li>
</ul>

<p>The server computer could be located on your premises and connected to the Internet by a fast link, but it is far more common to use a computer that is hosted "in the cloud". What this actually means is that your code is run on some remote computer (or possibly a "virtual" computer) in your hosting company's data center(s). The remote server will usually offer some guaranteed level of computing resources (e.g. CPU, RAM, storage memory, etc.) and Internet connectivity for a certain price.</p>

<p>This sort of remotely accessible computing/networking hardware is referred to as <em>Infrastructure as a Service (IaaS)</em>. Many IaaS vendors provide options to preinstall a particular operating system, onto which you must install the other components of your production environment. Other vendors allow you to select more fully-featured environments, perhaps including a complete Node setup.</p>

<div class="note">
<p><strong>Note:</strong> Pre-built environments can make setting up your website very easy because they reduce the configuration, but the available options may limit you to an unfamiliar server (or other components) and may be based on an older version of the OS. Often it is better to install components yourself so that you get the ones that you want, and when you need to upgrade parts of the system, you have some idea of where to start!</p>
</div>

<p>Other hosting providers support Express as part of a <em>Platform as a Service</em> (<em>PaaS</em>) offering. When using this sort of hosting you don't need to worry about most of your production environment (servers, load balancers, etc.) as the host platform takes care of those for you. That makes deployment quite easy because you just need to concentrate on your web application and not any other server infrastructure.</p>

<p>Some developers will choose the increased flexibility provided by IaaS over PaaS, while others will appreciate the reduced maintenance overhead and easier scaling of PaaS. When you're getting started, setting up your website on a PaaS system is much easier, so that is what we'll do in this tutorial.</p>

<div class="note">
<p><strong>Tip:</strong> If you choose a Node/Express-friendly hosting provider they should provide instructions on how to set up an Express website using different configurations of web server, application server, reverse proxy, etc. For example, there are many step-by-step guides for various configurations in the <a href="https://www.digitalocean.com/community/tutorials?q=node">Digital Ocean Node community docs</a>.</p>
</div>

<h2 id="Choosing_a_hosting_provider">Choosing a hosting provider</h2>

<p>There are numerous hosting providers that are known to either actively support or work well with <em>Node</em> (and <em>Express</em>). These vendors provide different types of environments (IaaS, PaaS), and different levels of computing and network resources at different prices.</p>

<div class="note">
<p><strong>Tip:</strong> There are a lot of hosting solutions, and their services and pricing can change over time. While we introduce a few options below, it is worth performing your own Internet search before selecting a hosting provider.</p>
</div>

<p>Some of the things to consider when choosing a host:</p>

<ul>
 <li>How busy your site is likely to be and the cost of data and computing resources required to meet that demand.</li>
 <li>Level of support for scaling horizontally (adding more machines) and vertically (upgrading to more powerful machines) and the costs of doing so.</li>
 <li>Where the supplier has data centers, and hence where access is likely to be the fastest.</li>
 <li>The host's historical uptime and downtime performance.</li>
 <li>Tools provided for managing the site — are they easy to use and are they secure (e.g. SFTP vs FTP).</li>
 <li>Inbuilt frameworks for monitoring your server.</li>
 <li>Known limitations. Some hosts will deliberately block certain services (e.g. email). Others offer only a certain number of hours of "live time" in some price tiers, or only offer a small amount of storage.</li>
 <li>Additional benefits. Some providers will offer free domain names and support for SSL certificates that you would otherwise have to pay for.</li>
 <li>Whether the "free" tier you're relying on expires over time, and whether the cost of migrating to a more expensive tier means you would have been better off using some other service in the first place!</li>
</ul>

<p>The good news when you're starting out is that there are quite a few sites that provide computing environments for "free", albeit with some conditions. For example, <a href="https://www.heroku.com/">Heroku</a> provides a free but resource-limited <em>PaaS</em> environment "forever", while <a href="http://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html">Amazon Web Services</a>, <a href="https://azure.microsoft.com/en-us/pricing/details/app-service/">Microsoft Azure</a>, and the open source option <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">PWS/Cloud Foundry</a> provide free credit when you first join.</p>

<p>Many providers also have a "basic" tier that provides more useful levels of computing power and fewer limitations. <a href="https://www.digitalocean.com/">Digital Ocean</a> is an example of a popular hosting provider that offers a relatively inexpensive basic computing tier (in the $5 per month lower range at time of writing).</p>

<div class="note">
<p><strong>Note:</strong> Remember that price is not the only selection criterion. If your website is successful, it may turn out that scalability is the most important consideration.</p>
</div>

<h2 id="Getting_your_website_ready_to_publish">Getting your website ready to publish</h2>

<p>The main things to think about when publishing your website are web security and performance. At the bare minimum, you will want to remove the stack traces that are included on error pages during development, tidy up your logging, and set the appropriate headers to avoid many common security threats.</p>

<p>In the following subsections, we outline the most important changes that you should make to your app.</p>

<div class="note">
<p><strong>Tip:</strong> There are other useful tips in the Express docs — see <a href="https://expressjs.com/en/advanced/best-practice-performance.html">Production best practices: performance and reliability</a> and <a href="https://expressjs.com/en/advanced/best-practice-security.html">Production Best Practices: Security</a>.</p>
</div>

<h3 id="Set_NODE_ENV_to_'production'">Set NODE_ENV to 'production'</h3>

<p>We can remove stack traces in error pages by setting the <code>NODE_ENV</code> environment variable to <em>production</em> (it is set to '<em>development</em>' by default). In addition to generating less-verbose error messages, setting the variable to <em>production</em> caches view templates and CSS files generated from CSS extensions. Tests indicate that setting <code>NODE_ENV</code> to <em>production</em> can improve app performance by a factor of three!</p>

<p>This change can be made either by using export or an environment file or using the OS initialization system.  </p>

<div class="note">
<p><strong>Note:</strong> This is actually a change you make in your environment setup rather than your app, but important enough to note here! We'll show how this is set for our hosting example below. </p>
</div>

<h3 id="Log_appropriately">Log appropriately</h3>

<p>Logging calls can have an impact on a high-traffic website. In a production environment, you may need to log website activity (e.g. tracking traffic or logging API calls) but you should attempt to minimize the amount of logging added for debugging purposes.</p>

<p>One way to minimize "debug" logging in production is to use a module like <a href="https://www.npmjs.com/package/debug">debug </a>that allows you to control what logging is performed by setting an environment variable. For example, the code fragment below shows how you might set up "author" logging. The debug variable is declared with the name 'author', and the prefix "author" will be automatically displayed for all logs from this object.</p>

<pre class="brush: js"><strong>var debug = require('debug')('author');</strong>

// Display Author update form on GET
exports.author_update_get = function(req, res, next) {

    req.sanitize('id').escape().trim();
    Author.findById(req.params.id, function(err, author) {
        if (err) {
<strong>            debug('update error:' + err);</strong>
            return next(err);
        }
        //On success
        res.render('author_form', { title: 'Update Author', author: author });
    });

};</pre>

<p>You can then enable a particular set of logs by specifying them as a comma-separated list in the <code>DEBUG</code> environment variable. You can set the variables for displaying author and book logs as shown (wildcards are also supported).</p>

<pre class="brush: bash">#Windows
set DEBUG=author,book

#Linux
export DEBUG="author,book"
</pre>

<div class="note">
<p><strong>Challenge:</strong> Calls to <code>debug</code> can replace logging you might previously have done using <code>console.log()</code> or <code>console.error()</code>. Replace any <code>console.log()</code> calls in your code with logging via the <a href="https://www.npmjs.com/package/debug">debug </a>module. Turn the logging on and off in your development environment by setting the DEBUG variable and observe the impact this has on logging.</p>
</div>

<p>If you need to log website activity you can use a logging library like <em>Winston</em> or <em>Bunyan</em>. For more information on this topic see: <a href="https://expressjs.com/en/advanced/best-practice-performance.html">Production best practices: performance and reliability</a>.</p>

<h3 id="Use_gzipdeflate_compression_for_responses">Use gzip/deflate compression for responses</h3>

<p>Web servers can often compress the HTTP response sent back to a client, significantly reducing the time taken to for the client to get and load the page. The compression method used will depend on what decompression methods the client says that it supports in the request (if no compression methods are supported the response will be sent uncompressed).</p>

<p>You can add this to your site using <a href="https://www.npmjs.com/package/compression">compression</a> middleware. Install this to your project by running the following command at the root of the project.</p>

<pre class="brush: bash">npm install compression</pre>

<p>Open <strong>./app.js</strong> and require the compression library as shown. Add the compression library to the middleware chain with the <code>use()</code> method (this should appear before any routes that you want compressed — in this case, all of them!)</p>

<pre class="brush: js">var catalogRouter = require('./routes/catalog'); //Import routes for "catalog" area of site
<strong>var compression = require('compression');</strong>

// Create the Express application object
var app = express();

...

<strong>app.use(compression()); //Compress all routes</strong>

app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/catalog', catalogRouter);  // Add catalog routes to middleware chain.

...
</pre>

<div class="note">
<p><strong>Note</strong>: For a high-traffic website in production you wouldn't use this middleware. Instead, you would use a reverse proxy like <em>Nginx</em>.</p>
</div>

<h3 id="Use_Helmet_to_protect_against_well_known_vulnerabilities">Use Helmet to protect against well known vulnerabilities</h3>

<p><a href="https://www.npmjs.com/package/helmet">Helmet</a> is a middleware package that can help protect your app from some well-known web vulnerabilities by setting appropriate HTTP headers (see the <a href="https://helmetjs.github.io/docs/">docs</a> for more information on what headers it sets/vulnerabilities it protects against). </p>

<p>Install this to your project by running the following command at the root of the project.</p>

<pre class="brush: bash">npm install helmet
</pre>

<p>Open <strong>./app.js</strong> and require the <em>helmet</em> library as shown. Then add the module to the middleware chain with the <code>use()</code> method.</p>

<pre class="brush: js">var compression = require('compression');
<strong>var helmet = require('helmet');
</strong>
// Create the Express application object
var app = express();

<strong>app.use(helmet())</strong>;
...</pre>

<div class="note">
<p id="production-best-practices-performance-and-reliability"><strong>Note:</strong> The command above adds the <em>subset</em> of available headers that makes sense for most sites. You can add/disable specific headers as needed by following the instructions on <a href="https://www.npmjs.com/package/helmet">npm</a>.</p>
</div>

<h2 id="Example_Installing_LocalLibrary_on_Heroku">Example: Installing LocalLibrary on Heroku</h2>

<p>This section provides a practical demonstration of how to install <em>LocalLibrary</em> on the <a href="http://heroku.com">Heroku PaaS cloud</a>.</p>

<h3 id="Why_Heroku">Why Heroku?</h3>

<p>Heroku is one of the longest-running and popular cloud-based PaaS services. It originally supported only Ruby apps, but now can be used to host apps from many programming environments, including Node (and hence Express)!</p>

<p>We are choosing to use Heroku for several reasons:</p>

<ul>
 <li>Heroku has a <a href="https://www.heroku.com/pricing">free tier</a> that is <em>really</em> free (albeit with some limitations).</li>
 <li>As a PaaS, Heroku 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 Heroku provides for us under the hood.</li>
 <li>While it does have some limitations, these will not affect this particular application. For example:
  <ul>
   <li>Heroku provides only short-lived storage so user-uploaded files cannot safely be stored on Heroku itself.</li>
   <li>The free tier will sleep an inactive web app if there are no requests within a half hour period. The site may then take several seconds to respond when it is woken up.</li>
   <li>The free tier limits the time that your site is running to a certain amount of hours every month (not including the time that the site is "asleep"). This is fine for a low use/demonstration site, but will not be suitable if 100% uptime is required.</li>
   <li>Other limitations are listed in <a href="https://devcenter.heroku.com/articles/limits">Limits</a> (Heroku docs).</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>
</ul>

<p>While Heroku is perfect for hosting this demonstration it may not be perfect for your real website. Heroku makes things easy to set up and scale, at the cost of being less flexible, and potentially a lot more expensive once you get out of the free tier.</p>

<h3 id="How_does_Heroku_work">How does Heroku work?</h3>

<p>Heroku runs websites within one or more "<a href="https://devcenter.heroku.com/articles/dynos">Dynos</a>", which are isolated, virtualized Unix containers that provide the environment required to run an application. The dynos are completely isolated and have an <em>ephemeral</em> file system (a short-lived file system that is cleaned/emptied every time the dyno restarts). The only thing that dynos share by default are application <a href="https://devcenter.heroku.com/articles/config-vars">configuration variables</a>. Heroku internally uses a load balancer to distribute web traffic to all "web" dynos. Since nothing is shared between them, Heroku can scale an app horizontally by adding more dynos (though of course, you may also need to scale your database to accept additional connections).</p>

<p>Because the file system is ephemeral you can't install the services required by your application directly (e.g. databases, queues, caching systems, storage, email services, etc). Instead, Heroku web applications use backing services provided as independent "add-ons" by Heroku or 3rd parties. Once attached to your web application, the add-on services are accessed in your web application via environment variables.</p>

<p>In order to execute your application Heroku needs to be able to set up the appropriate environment and dependencies, and also understand how it is launched. For Node apps, all the information it needs is obtained from your <strong>package.json</strong> file.</p>

<p>Developers interact with Heroku using a special client app/terminal, which is much like a Unix bash script. This allows you to upload code that is stored in a git repository, inspect the running processes, see logs, set configuration variables, and much more!</p>

<p>In order to get our application to work on Heroku, we'll need to put our Express web application into a git repository and make some minor changes to the package.json. Once we've done that we can set up a Heroku account, get the Heroku client, and use it to install our website.</p>

<p>That's all the overview you need in order to get started (see <a href="https://devcenter.heroku.com/articles/getting-started-with-nodejs">Getting Started on Heroku with Node.js</a> for a more comprehensive guide).</p>

<h3 id="Creating_an_application_repository_in_Github">Creating an application repository in Github</h3>

<p>Heroku is closely integrated with the <strong>git</strong> source code version control system, using it to upload/synchronize any changes you make to the live system. It does this by adding a new Heroku "remote" repository named <em>heroku</em> pointing to a repository for your source on the Heroku cloud. During development, you use git to store changes on your "master" repository. When you want to deploy your site, you sync your changes to the Heroku repository.</p>

<div class="note">
<p><strong>Note:</strong> If you're used to following good software development practices you are probably already using git or some other SCM system. If you already have a git repository, then you can skip this step.</p>
</div>

<p>There are a lot of ways of to work with git, but one of the easiest is to first set up an account on <a href="https://github.com/">GitHub</a>, create the repository there, and then sync to it locally:</p>

<ol>
 <li>Visit <a href="https://github.com/">https://github.com/</a> and create an account.</li>
 <li>Once you are logged in, click the <strong>+</strong> link in the top toolbar and select <strong>New repository</strong>.</li>
 <li>Fill in all the fields on this form. While these are not compulsory, they are strongly recommended.
  <ul>
   <li>Enter a new repository name (e.g. <em>express-locallibrary-tutorial</em>), and description (e.g. "Local Library website written in Express (Node)".</li>
   <li>Choose <strong>Node</strong> in the <em>Add .gitignore</em> selection list.</li>
   <li>Choose your preferred license in the <em>Add license</em> selection list.</li>
   <li>Check <strong>Initialize this repository with a README</strong>.</li>
  </ul>
 </li>
 <li>Press <strong>Create repository</strong>.</li>
 <li>Click the green "<strong>Clone or download</strong>" button on your new repo page.</li>
 <li>Copy the URL value from the text field inside the dialog box that appears (it should be something like: <strong>https://github.com/<em>&lt;your_git_user_id&gt;</em>/express-locallibrary-tutorial.git</strong>).</li>
</ol>

<p>Now the repository ("repo") is created we are going to want to clone it on our local computer:</p>

<ol>
 <li>Install <em>git</em> for your local computer (you can find versions for different platforms <a href="https://git-scm.com/downloads">here</a>).</li>
 <li>Open a command prompt/terminal and clone your repository using the URL you copied above:
  <pre class="brush: bash">git clone https://github.com/<strong><em>&lt;your_git_user_id&gt;</em></strong>/express-locallibrary-tutorial.git
</pre>
  This will create the repository below the current point.</li>
 <li>Navigate into the new repo.
  <pre class="brush: bash">cd express-locallibrary-tutorial</pre>
 </li>
</ol>

<p>The final step is to copy in your application and then add the files to your repo using git:</p>

<ol>
 <li>Copy your Express application into this folder (excluding <strong>/node_modules</strong>, which contains dependency files that you should fetch from NPM as needed).</li>
 <li>Open a command prompt/terminal and use the <code>add</code> command to add all files to git.</li>
 <li>
  <pre class="brush: bash">git add -A
</pre>
 </li>
 <li>Use the status command to check all files that you are about to add are correct (you want to include source files, not binaries, temporary files etc.). It should look a bit like the listing below.
  <pre>&gt; git status
On branch master
Your branch is up-to-date with 'origin/master'.
Changes to be committed:
  (use "git reset HEAD &lt;file&gt;..." to unstage)

        new file:   ...</pre>
 </li>
 <li>When you're satisfied commit the files to your local repository:
  <pre class="brush: bash">git commit -m "First version of application moved into github"</pre>
 </li>
 <li>Then synchronize your local repository to the Github website, using the following:
  <pre>git push origin master</pre>
 </li>
</ol>

<p>When this operation completes, you should be able to go back to the page on Github where you created your repo, refresh the page, and see that your whole application has now been uploaded. You can continue to update your repository as files change using this add/commit/push cycle.</p>

<div class="note">
<p><strong>Tip:</strong> This is a good point to make a backup of your "vanilla" project — while some of the changes we're going to be making in the following sections might be useful for deployment on any platform (or development) others might not.</p>

<p>The <em>best</em> way to do this is to use <em>git</em> to manage your revisions. With <em>git</em> you can not only go back to a particularly old version, but you can maintain this in a separate "branch" from your production changes and cherry-pick any changes to move between production and development branches. <a href="https://help.github.com/articles/good-resources-for-learning-git-and-github/">Learning Git</a> is well worth the effort, but is beyond the scope of this topic.</p>

<p>The <em>easiest</em> way to do this is to just copy your files into another location. Use whichever approach best matches your knowledge of git!</p>
</div>

<h3 id="Update_the_app_for_Heroku">Update the app for Heroku</h3>

<p>This section explains the changes you'll need to make to our <em>LocalLibrary</em> application to get it to work on Heroku.</p>

<h4 id="Set_node_version">Set node version </h4>

<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. Heroku detects the presence of this file, and will use it to provision your app environment.</p>

<p>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">&gt;node --version
v8.9.1</pre>

<p>Open <strong>package.json</strong>, and add this information as an <strong>engines &gt; node</strong> section as shown (using the version number for your system).</p>

<pre class="brush: json">{
  "name": "express-locallibrary-tutorial",
  "version": "0.0.0",
<strong>  "engines": {
    "node": "8.9.1"
  },</strong>
  "private": true,
  ...
</pre>

<h4 id="Database_configuration">Database configuration</h4>

<p>So far in this tutorial, we've used a single database that is hard-coded into <strong>app.js</strong>. 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 (if it has been defined), and otherwise use our development database.</p>

<p>Open <strong>app.js</strong> and find the line that sets the MongoDB connection variable. It will look something like this:</p>

<pre class="brush: js">var mongoDB = 'mongodb://your_user_id:your_password@ds119748.mlab.com:19748/local_library';</pre>

<p>Replace the line with the following code that uses <code>process.env.MONGODB_URI</code> to get the connection string from an environment variable named <code>MONGODB_URI</code> if has been set (use your own database URL instead of the placeholder below.)</p>

<pre class="brush: js">var mongoDB = <strong>process.env.MONGODB_URI</strong> || 'mongodb://your_user_id:your_password@ds119748.mlab.com:19748/local_library';
</pre>

<h4 id="Get_dependencies_and_re-test">Get dependencies and re-test</h4>

<p>Before we proceed, let's test the site again and make sure it wasn't affected by any of our changes. </p>

<p>First, we will need to fetch our dependencies (you will recall we didn't copy the <strong>node_modules</strong> folder into our git tree). You can do this by running the following command in your terminal at the root of the project:</p>

<pre class="brush: bash">npm install
</pre>

<p>Now run the site (see <a href="/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.</p>

<h4 id="Save_changes_to_Github">Save changes to Github</h4>

<p>Next, let's save all our changes to Github. In the terminal (whilst inside our repository), enter the following commands:</p>

<pre class="brush: bash">git add -A
git commit -m "Added files and changes required for deployment to heroku"
git push origin master</pre>

<p>We should now be ready to start deploying <em>LocalLibrary</em> on Heroku.</p>

<h3 id="Get_a_Heroku_account">Get a Heroku account</h3>

<p>To start using Heroku 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 installed the Heroku client):</p>

<ul>
 <li>Go to <a href="https://www.heroku.com/">www.heroku.com</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 account 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.</li>
 <li>Enter your password and click <strong>SET PASSWORD AND LOGIN</strong>.</li>
 <li>You'll then be logged in and taken to the Heroku dashboard: <a href="https://dashboard.heroku.com/apps">https://dashboard.heroku.com/apps</a>.</li>
</ul>

<h3 id="Install_the_client">Install the client</h3>

<p>Download and install the Heroku client by following the <a href="https://devcenter.heroku.com/articles/getting-started-with-python#set-up">instructions on Heroku here</a>.</p>

<p>After the client is installed you will be able to run commands. For example to get help on the client:</p>

<pre class="brush: bash">heroku help
</pre>

<h3 id="Create_and_upload_the_website">Create and upload the website</h3>

<p>To create the app we run the "create" command in the root directory of our repository. This creates a git remote ("pointer to a remote repository") named <em>heroku</em> in our local git environment.</p>

<pre class="brush: bash">heroku create</pre>

<div class="note">
<p><strong>Note:</strong> You can name the remote if you like by specifying a value after "create". If you don't then you'll get a random name. The name is used in the default URL.</p>
</div>

<p>We can then push our app to the Heroku repository as shown below. This will upload the app, get all its dependencies, package it in a dyno, and start the site.</p>

<pre class="brush: bash">git push heroku master</pre>

<p>If we're lucky, the app is now "running" on the site. To open your browser and run the new website, use the command:</p>

<pre class="brush: bash">heroku open</pre>

<div class="note">
<p><strong>Note</strong>: The site will be running using our development database. 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.</p>
</div>

<h3 id="Setting_configuration_variables">Setting configuration variables</h3>

<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. We do this by entering the following command:</p>

<pre class="brush: bash">&gt;heroku config:set NODE_ENV='production'
Setting NODE_ENV and restarting limitless-tor-18923... done, v13
NODE_ENV: production
</pre>

<p>We should also use a separate database for production, setting its URI in the <strong>MONGODB_URI</strong>  environment variable. You can set up a new database and database-user exactly <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose#Setting_up_the_MongoDB_database">as we did originally</a>, and get its URI. You can set the URI as shown (obviously, using your own URI!)</p>

<pre class="brush: bash">&gt;heroku config:set <strong>MONGODB_URI</strong>='mongodb://your_user:your_password@ds139278.mlab.com:39278/local_library_production'
Setting MONGODB_URI and restarting limitless-tor-18923... done, v13
MONGODB_URI: mongodb://your_user:your_password@ds139278.mlab.com:39278/local_library_production
</pre>

<p>You can inspect your configuration variables at any time using the <code>heroku config</code> command — try this now:</p>

<pre class="brush: bash">&gt;heroku config
=== limitless-tor-18923 Config Vars
MONGODB_URI: mongodb://your_user:your_password@ds139278.mlab.com:39278/local_library_production
NODE_ENV:    production
</pre>

<p>Heroku will restart your app when it updates the variables. 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>

<h3 id="Managing_addons">Managing addons</h3>

<p>Heroku uses independent add-ons to provide backing services to apps — for example, email or database services. We don't use any addons in this website, but they are an important part of working with Heroku, so you may want to check out the topic <a href="https://devcenter.heroku.com/articles/managing-add-ons">Managing Add-ons</a> (Heroku docs).</p>

<h3 id="Debugging">Debugging</h3>

<p>The Heroku client provides a few tools for debugging:</p>

<pre class="brush: bash">heroku logs  # Show current logs
heroku logs --tail # Show current logs and keep updating with any new results
heroku ps   #Display dyno status
</pre>

<ul>
</ul>

<h2 id="まとめ">まとめ</h2>

<p>これで、本番環境での Express アプリケーションの設定に関するこのチュートリアル、および Express を使用した作業に関する一連のチュートリアルは終了です。それらが役に立つことを願っています。完全に完成したバージョンの <a href="https://github.com/mdn/express-locallibrary-tutorial">Github のソースコードをここで</a>チェックすることができます。</p>

<h2 id="あわせて参照">あわせて参照</h2>

<ul>
 <li id="production-best-practices-performance-and-reliability"><a href="https://expressjs.com/en/advanced/best-practice-performance.html">Production best practices: performance and reliability</a> (Express docs)</li>
 <li><a href="https://expressjs.com/en/advanced/best-practice-security.html">Production Best Practices: Security</a> (Express docs)</li>
 <li>Heroku
  <ul>
   <li><a href="https://devcenter.heroku.com/articles/getting-started-with-nodejs">Getting Started on Heroku with Node.js</a> (Heroku docs)</li>
   <li><a href="https://devcenter.heroku.com/articles/deploying-nodejs">Deploying Node.js Applications on Heroku</a> (Heroku docs)</li>
   <li><a href="https://devcenter.heroku.com/articles/nodejs-support">Heroku Node.js Support</a> (Heroku docs)</li>
   <li><a href="https://devcenter.heroku.com/articles/node-concurrency">Optimizing Node.js Application Concurrency</a> (Heroku docs)</li>
   <li><a href="https://devcenter.heroku.com/articles/how-heroku-works">How Heroku works</a> (Heroku docs)</li>
   <li><a href="https://devcenter.heroku.com/articles/dynos">Dynos and the Dyno Manager</a> (Heroku docs)</li>
   <li><a href="https://devcenter.heroku.com/articles/config-vars">Configuration and Config Vars</a> (Heroku docs)</li>
   <li><a href="https://devcenter.heroku.com/articles/limits">Limits</a> (Heroku docs)</li>
  </ul>
 </li>
 <li>Digital Ocean
  <ul>
   <li><a href="https://www.digitalocean.com/community/tutorials?q=express">Express</a> tutorials</li>
   <li><a href="https://www.digitalocean.com/community/tutorials?q=node.js">Node.js</a> tutorials </li>
  </ul>
 </li>
</ul>

<p>{{PreviousMenu("Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}</p>

<h2 id="このモジュール">このモジュール</h2>

<ul>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li>
</ul>