---
title: "継続的配置パイプラインとオープンソース Node.js Web アプリ"
description: "オープンソース Node.js Web アプリを自動化するために、Now.sh、GitHub、Travis CI を使って継続的配置パイプラインを構築する方法。"
authors:
  - name: "Idorenyin Obong"
    url: "https://auth0.com/blog/authors/idorenyin-obong/"
date: "Aug 9, 2018"
category: "Developers,Tutorial,Continuous Deployment"
tags: ["continuous-deployment", "open-source", "web-app", "node-js"]
url: "https://auth0.com/blog/jp-continuous-deployment-pipelines-and-open-source-node-js-web-apps/"
---

# 継続的配置パイプラインとオープンソース Node.js Web アプリ



**TL;DR**：本書では、オープンソース Web アプリので継続的配置パイプラインを構築する方法について学んでいきます。デモの目的で、パイプラインを自動化する Now.sh、GitHub、Travis CI を使用します。ただし、他のプログラミング言語（Python、Java、 .NET Core など）やツール（BitBucket、AWS、 CircleCI など）を使用するという戦略でいきます。

<include src="JpTweetQuote" quoteText="オープンソース Web アプリので継続的配置パイプラインを構築する方法について学んでいきます。"/>

## 継続的配置の概要

[_継続的配置_](https://www.scaledagileframework.com/continuous-deployment/)（CD として広く知られる）はソフトウェアのリリースを自動化することに関係する現代ソフトウェアエンジニアリングのアプローチです。ソフトウェアを生産に押し出す通常の手動方式を使う代わりに、継続的配置はパイプラインを使用するこのプロセスを簡単にし、自動化することを狙います。継続的配置では、ソースコードに更新することはすべてのテストに合格すれば、運用サーバーも更新することでもあります。継続的配置は継続的インテグレーションや継続的デリバリーに間違えられることがよくあります。この概念の感覚をつかむために、まずほかの2つの概念を区別しましょう。

[_継続的インテグレーション（__CI__）_](https://www.atlassian.com/continuous-delivery/continuous-integration-intro)では、新しいコードがチェックインされたら、ビルドが生成され、テストされます。その狙いはソフトウェア全体が中断されないように、新しいコードすべてをテストすることです。このため、プッシュされた更新すべての書き込みテストが必須になります。CI の重要性は特にひとつのチームに複数の開発者がいるときに、安定したコードベースを常に確実にすることです。このため、自動化テストが失敗すると、バグがより早く発見されます。

[_継続的デリバリー_](https://aws.amazon.com/devops/continuous-delivery/)は継続的インテグレーションの一歩先を行きます。テストの後、リリースプロセスも自動化されます。その狙いはリリース可能なビルドを生成することです（生産へ移動できるだけの安定性があるビルドなど）これは、リリースを準備する煩わしさの削減に役立ちます。継続的デリバリーでは、正規のリリースがあるので、フィードバックもより早くなります。

継続的デリバリーと継続的配置の間の大きな違いはリリースが行われるその方法です。一方は手動であるのに対して、他方は自動化されています。継続的デリバリーでは、ソフトウェアは常に、手動で生産に押し出される状態にあります。それに対して、継続的配置はソフトウェアが安定して作動するバージョンが即座に生産にプッシュされます。継続的配置は継続的デリバリーが必要ですが、その反対は当てはまりません。

これらすべてでは、コードが存在するレポジトリと、コードをチェックするレポジトリをモニターする継続的インテグレーションサーバーが必要です。そのサーバーがコードの中の更新に気づくと、パイプラインをトリガーします。このコンテキストのパイプラインはプロジェクトで実行されるコマンドやタスクを含むスクリプト/ファイルです。一般的に、継続的インテグレーションを構成するときは、それに平行してパイプラインをセットアップします。継続的インテグレーションサーバーの一部には [_Travis CI_](https://travis-ci.org/)、_Jenkins_、_TeamCity_などがあります。

本書では、継続的インテグレーションサーバーが実際に継続的配置を示すために GitHub レポジトリと一緒にセットアップする方法を学んでいきます。継続的配置の重大な理由は、大きなチームのより良い統合、より早くかつより簡単なリリース、より早いフィードバック、開発生産性の全体的な向上などがあります。

## 継続的配置向け オープンソース Web アプリを準備する

本章では、Node.js を使ってシンプルな Hello World アプリを構築していきます。そのようなものとして、まず、 次に進む前にお使いのマシンに Node.js がインストールされているか確認します。

```bash
node --version
```

上記のコマンドを実行すると、端末は `v9.11.1` と同様のものを印刷します。`node` が見つかりません」というメッセージが表示されたら、この [リンク](https://nodejs.org/en/download/)に従って Node.js と NPM をインストールします。

### Node.js Web アプリをスキャフォールディングする

ここで、お使いにマシンに Node.js がインストールできたので、Node.js アプリケーションの構造をセットアップします。簡単にセットアップするために、新しいディレクトリで `npm init -y` を実行します（これはプロジェクトルートになります）。このコマンドによって `package.json` ファイルが生成され、それには Node.js アプリの詳細が含まれます。この `package.json` ファイルには使用されている依存関係の名前に関係するアプリの基本情報が含まれています。

プロジェクトと `package.json` ファイルを作成するには、端末で次のコマンドを実行します。

```bash
# create the project root
mkdir node-cd

# move into the project root
cd node-cd

# start it as an NPM project
npm init -y
```

最後のコマンドを実行すると、NPM が `package.json` ファイルを生成します。ここで、アプリのディレクトリを開いたら、次を含む `package.json` ファイルが表示されます。

```json
{
  "name": "node-cd",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

### Node.js Web アプリの依存関係をインストールする

`package.json` ファイルを作成した後、プロジェクトを構築するために必要な依存関係をインストールする必要があります。本書では、`express` と [`body-parser`](https://github.com/expressjs/body-parser) の２つの依存関係だけが必要です。次のコマンドを実行して、これらすべての依存関係を一度にインストールします。

```bash
npm install express body-parser --save
```

このインストールが完了すると、`node_modules` フォルダーが表示されます。さらに、`package.json` ファイルにはインストールされた依存関係とそのバージョンが含まれています。

### Node.js で Web ページを作る

アプリのセットアップ中に NPM がアプリのエントリ ポイントとして `index.js` ファイルを宣言します。では、このファイルを作成します。プロジェクト ルートで、次のコマンドを実行してファイルを作成します。

```bash
touch index.js
```

次に、HTML ファイルを作成する必要があります。通常、ビューのディレクトリを作成することが推奨されます。そのようなものとして、プロジェクトルートの次のコマンドを実行して、ディレクトリや HTML ファイルを作成します。

```bash
# ビューのディレクトリを作成します
`mkdir`` pages`

# 最初のビューを作成します
`touch pages/index.html`
```

ここで Node.js Web アプリを HTML ファイルで使用できるようにするため、`index.js` ファイルを開き、次のように設定します。

```javascript
// 依存関係をインポートします
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');

// Express を初期化します
const app = express();

// ルートのエンドポイント
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname + '/pages/index.html'));
});

// Node.js Web アプリを実行するポートを選択します
const port = 5000;

// それから選択されたポートをモニターします
app.listen(port, () => console.log(`Server is running on port ${port}`));
```

このスニペットにはこのアプリに必要なすべてのサーバーロジックが含まれています。ご覧のように、宣言されているのはただひとつのエンドポイントです（`index.html` ページを読み込むもの）また、上記のコードで定義されているように、このアプリはポート `5000` で実行します。

ここで、コンテンツの一部を `index.html` ファイルに追加するには、このファイルを開き、次のコードを挿入します。

``` html  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title Page</title>
    <!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
  <h1 class="text-center">Hello World</h1>  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

```

これは、コンテンツデリバリネットワーク（CDN）で参照される [_ブートストラップ（見事な__ Web __アプリを構築するのに役立つライブラリ）_](https://getbootstrap.com/) や [_jQuery __（ブートストラップで必要な__ JavaScript __ライブラリ）_](https://jquery.com/) の基本的な HTML コードです。Web ページはテキストを見出しにするために `h1` タグにある **Hello World** テキストを含みます。ここで、このコマンドでサーバーを実行します。

```bash
node index.js
```

[`http://localhost:5000`](http://localhost:5000/) に移動しますと、次のようなものが表示されます。

![Hello world screenshot](https://images.ctfassets.net/23aumh6u8s0i/2414BTBltAi6IjZZKi2CuZ/ea5d0f242327cffa162b608a7092679b/hello-world-node-js-web-app)

これだけです！本書の目的には、現在のプロジェクトで十分です。では、プロジェクトをバージョン管理システムに提出する必要があります。

## GitHub およびオープンソース Web アプリ

本書の始めで、作動中の継続的配置を実証するレポジトリの必要性について説明しました。この場合のレポジトリは単にソースコードが格納されている場所です。そのようなものとして、プロジェクトのソースコードをリモート（オンライン）リポジトリに格納する必要があります。

[_Git_](https://git-scm.com/) は現在で回っている_バージョン管理システム_の中で最も人気が高く、最も高度なものです。よって、Git レポジトリをホストできるサービスを選択してください。現在、たくさんのホストが出回っていますが、その中でも最も人気が高い GitHub を使用します。_GitHub_ は Web サービスで、Git リポジトリをホストします。実際はこれ以上のものを提供してくれますが、その詳細については [_GitHub __の機能についてはこちら_](https://github.com/features)をご覧ください。

### GitHub アカウントを作成する

GitHub のアカウントをお持ちでない方は、_Web __サイト_でアカウントを作成してください。アカウントをすでにお持ちの方は、ご自分のプロファイルにログインしてください。アカウントを作成するには、固有のユーザー名、メールアドレス、任意のパスワードが必要です。

![Creating a GitHub account - Github.com signup form](https://images.ctfassets.net/23aumh6u8s0i/4ZtyPHgFvBTn5bjp4S5l3w/2cfeb42ea22f6dc17aff901e8606e6cf/creating-a-github-account)

登録が終了したら、メールアドレスを通してアカウントを確認し、フルアクセスを取得します。

### GitHub 101：アカウントと新規レポジトリを作成する

GitHub は公開レポジトリ（オープンソースのプロジェクトなど）には無料で、本書の場合にぴったりです。新しいレポジトリを作成するには、プロファイルを開き、[+]ボタンをクリックし、*新しいレポジトリ*を選択します。プロファイルは次のように表示されます。

![GitHub profile view and creating a new repository](https://images.ctfassets.net/23aumh6u8s0i/39WWYXQWCHhoQES2T9dXY4/185d2e600e57724dea8b6283df1a080f/github-profile)

*新しいレポジトリ*のオプションをクリックした後、次のようなフォームが表示されます。

![Creating a new GitHub repository](https://images.ctfassets.net/23aumh6u8s0i/6pfRdJRFUHubGrTCFjOSkh/927c7e956ae1b8b14d83513c5fdd4afd/creating-new-github-repo)

そのフォームにレポジトリの名前（`node-js-cd-pipeline`）、詳細（継続的配置など）を記入してから、*リポジトリの作成*ボタンをクリックします。GitHub がレポジトリを作成したら、リダイレクトされます。そこで、リポジトリの `URL`（`https://github.com/KingIdee/node-js-cd-pipeline.git` のような URL）をコピーできるようになります。この後使用しますので、これをクリップボードにコピーしてください。

> **注：**以前すでに [_SSH キーで GitHub アカウントを構成](https://help.github.com/articles/connecting-to-github-with-ssh/)していたら、それをコピーして別の URL フォーマットを使用します。これは`git@github.com:KingIdee/node-js-cd-pipeline.git` のようなフォーマットです。

### オープンソース Web アプリを GitHub にプッシュする

Node.js Web アプリをセットアップしてその GitHub レポジトリを作成したら、ソースコードをオンラインにプッシュする用意ができましたので、プロジェクトのルートから次のコマンドを実行します。

```bash
git init
```

> **注：**`git`コマンドを実行するには Git CLI（コマンド ライン インターフェイス）をインストールする必要があります。

このコマンドは `.git` フォルダを作成してプロジェクトディレクトリ（ほとんどのオペレーティングシステムでこのディレクトリはデフォルトで非表示です）の Git を初期化します。Git を初期化したら、リモートでの GitHub レポジトリをセットアップする必要があります。

```bash
git remote add origin REPO_URL
```
> 必ず、以前にコピーしたリポジトリ URL と `REPO_URL` とを置き換えます。

プロジェクトをリモートリポジトリにプッシュするとき、特定のファイルを無視する必要があることがあります。このプロジェクト（とほとんどの Node.js プロジェクト）の場合、`node_modules` ディレクトリを無視する必要があります。よって、`.gitignore` ファイルを次のようにディレクトリに作成します。

```bash
touch .gitignore
```

それから、そのファイルを開き、次の行をペーストします。

```bash
/node_modules
```

次に、プロジェクトに行った変更をコミットし、リモートレポジトリにプッシュします。これは、次のコマンドを実行して行います。

```bash
# 変更したファイルを追加します
git add -A

# それらを Git にコミットします
git commit -m "first commit"

# それらを GitHub にプッシュします
git push -u origin master
```

最初のコマンド（`git add`）は Git への変更が影響されるすべてのファイルに追加されますが、`.gitignore` ファイルに明示的に記載されているものは例外です。それから、２つめのコマンド（`git commit`）はどのような変化があったかを指摘するメッセージが追加/変更ファイルに追加され、ローカルの Git レポジトリにそれらを格納します。最後に、`git push` コマンドはプロジェクトに加えられたローカルでの変更をリモートのレポジトリ（この場合 GitHub）にプッシュし、リモートでの変更を追跡するローカルプロジェクトをセットアップします。

すべてに問題がなければ、作成したリポジトリにアクセスすると、プロジェクトのソースコードがオンラインで見えるようになります。

![Pushing local changes to the GitHub remote repository](https://images.ctfassets.net/23aumh6u8s0i/30iggS3Bi1VtFEySKX8LFz/a9247d43a937aecee5fea899e81631a8/pushing-changes-to-the-github-remote-repo)

## Now.sh アプリとオープンソースアプリ

[_Now_](http://now.sh/) はサービスとしてのプラットフォーム（PaaS）で、プロジェクトがクラウドで簡単に配置できるようになります。Now を使って Node.js アプリケーションが簡単に配置できるようになりますが、他の言語（Python、Java など）で開発されたアプリも簡単に配置できますが、この場合は _Dockerfile_ が必要です。

Now は開発者が簡単に継続的配置をできるようにすることを狙いとしています。当然のことながら、Web サイトの構築を Node.js で配置するにはサーバー構成や管理の十分な知識のほかに、端末を自由に使いこなす必要があります。Now を使ってアプリのロジックにより焦点を合わせることができるので、配置について心配が減ります。

Now の素晴らしい機能には次などがあります。

* 無料の固有 URL：配置されるあらゆる URL には、通常、`<appname>-<random string>.now.sh`（例：`helloworld-hddnhdvhsd.now.sh`）のようなフォームで生成される固有な `URL` がある。.
* プロセス ログ：配置されるアプリのコマンドを実行するポイントからスクリーンでログインしてサーバーを開始するポイントまでのあらゆるプロセスが、ダッシュボードに表示されている配置インスタンスのリンクをクリックすると表示される。
* SSL 証明書管理 - [_Let's Encrypt_](https://letsencrypt.org/) をご利用になりますと、SSL での配置が無料になる。

さらに素晴らしいことに、Now は1銭も支払わずに、軽量のオープンソースアプリケーションをインフラストラクチャで配置できるようになります。_この場合のコードはプロジェクトに関心がある人誰もに対して公開されています_。今回はオープンソースのアプリを開発しているので、これは問題にはなりません。また、（データベースに接続する資格情報などの）環境変数はソースコードの一部ではありませんから、一般には共有されません。

### Now.sh アカウントを作成する

Now.sh アカウントを作成するには、[Now の新規登録ページ](https://vercel.com/onboarding)で利用可能な方法のひとつを選択します（電子メールまたは  GitHub アカウントを通してなど）。電子メールを通して登録する場合、マジックリンクでメッセージを受信しますので、そのリンクをクリックしてアカウントを確認します。その後、登録に使用したブラウザのタプが Now のダッシュボードで再度読み込まれます。

そのほかに、*GitHub で登録* オプションを選択すると、認証メールがメールアドレスに送信されます。

Ｅメールを確認した後、[Now へのログイン](https://zeit.co/login)ができるようになります。新規ユーザーの場合、ルグインした後のダッシュボードは次のように表示されます。

![Signing up for a Now.sh account](https://images.ctfassets.net/23aumh6u8s0i/5pXJd08sx2IRPuGzT4TWae/a54bdc22d823b54065bd2ec779286f59/signing-up-to-now)

### 新規トークンを取得する

登録プロセスが完了して、ログインしたら、[_右上にあるプロファイルの画像をクリックしてから、Ｅメールアドレスをクリックします_](https://vercel.com/account)（*設定*オプションの下に表示されます）。.その後、Now はアカウント設定を表示し、プロファイル画像の下に*トークン*へのリンクが表示されます。それをクリックします。

この次のスクリーンに、*承認されているアプリ*というセクションと、新規トークンを作ることができる入力フィールドが表示されます。このフィールドで、*継続的配置*のような説明的な名前を挿入し、`入力`を押します。その後、 Now が新規トークンを生成します。

差し当たり、このページは開いたままにしてください。間もなく、このトークンをコピーすることになりますので。

## 継続的配置向けの Travis CI を構成する

[_Travis CI_](https://travis-ci.org/) は継続的配置サーバーで、オープンソースのプロジェクトに使用できます。必要であれば、プライベートのプロジェクトにも使用できますが、この場合、[その他の Web サイト](https://travis-ci.com/)を使用しなければなりません。上記で説明したように、継続的インテグレーションサーバーはレポジトリの変更をモニターするために使用され、事前に構成されたプロセスが見つかればトリガーします。

Travis CI と特に、GitHub で利用可能なプロジェクトだけをサポートします。これらプロジェクトは `.travis.yml` と呼ばれるパイプラインファイルをレポジトリのルートディレクトリに追加して構成されます。

### Travis アカウントを作成する

次に進むには、[_Travis CI_](https://travis-ci.org/) で登録する必要があります。Travis CI は GitHub だけの登録が必要です。すでに GitHub アカウントをお持ちなので、その Web サイトを開き、登録します。

### GitHub オープンソースのプロジェクト向けに Travis CI を構成する

登録が完了したら、[ご自分のプロファイルに公開リポジトリのリスト](https://travis-ci.org/profile)が表示されます。そこでは、リポジトリが表示され、その隣にあるチェックボックスボタンをクリックして Travis CI が更新できるようにします。

![Activating the GitHub repository on Travis CI](https://images.ctfassets.net/23aumh6u8s0i/5fRlaGKDpUNYA4X4I6IUQP/887618ba1f5c852f53c525d9ad69a0ae/activate-repository-on-travis-ci)

### オープンソース Web アプリで Travis を構成する

Travis CI をアクティブ化した後、プロジェクトに戻り、`.travis.yml` と呼ばれるファイルを作成し、次のコードをそれにペーストします。

```bash
language: node_js
node_js:
- node
cache:
  directories:
  - node_modules
before_deploy:
  - npm install now --no-save
  - now rm node-cd --token $NOW_TOKEN --yes || true
deploy:
- provider: script
  # そのアプリケーションを now.sh に配置します
  script: now --public --token $NOW_TOKEN
  skip_cleanup: true
  on:
    master: true
```

このファイルを慎重に分析するのであれば、次が分かります。

* `language` プロパティはプロジェクトで使用する主なテクノロジーが何かを定義する（Node.js など）。
* `Before_deploy` プロパティは配置段階の前に実行されるコマンドを適切に特定する。この場合、インストールされた Now CLI が必要で、以前のすべての配置を削除することを Travis CI に伝える（`now rm node-cd`）。この最後のコマンドは Now の無料レベルを使っているのでが必要である。
* `Deploy` セクションはプロジェクトを配置するために使用するレシピ（コマンド）を定義する。この場合、`master` ブランチに送信される変更を配置する `now` を使用することを Travis に伝える（`master: true`）。

**注：**これがなぜ、`now rm node-cd` コマンドに対して `|| true` が必要かと疑問に思われている方への説明です。初めてコードをプッシュする場合、Now でのアプリはありませんから、このコマンドは失敗します。`|| true` を追加しなければ、Travis CI は `now rm` コマンドが失敗するのでビルド プロセスを停止します。

これを念頭に置いて、`package.json` ファイルを開き、次のように `scripts` セクションを再定義します。

```json
{
  "scripts": {
    "start": "node index.js"
  }
}
```

### Now トークンを Travis CI に与える

セキュリティは、秘密キーが関係するかもしれないので、アプリケーションを配置するときには重要です。例えば、この場合、Now トークンが秘密キーです。環境変数としてこのキーを Travis CI に設定することが実行のアプローチに見えるかもしれません。残念ながら、これは完全に安全ではありません。キーを適切に安全にするには、Travis CLI（コマンド ライン インターフェイス）を使用する必要があります。これを使用するには、Ruby と RubyGems をマシンにインストールする必要があります。

これらをまだインストールしていないのであれば、[_このドキュメンテーションに従って_](https://github.com/rubygems/rubygems)してください。

その後、`gem` を使用して Travis CLI をインストールします。

```bash
gem install travis
```

Travis CLI をローカル環境にインストールしたら、これを使ってプロジェクトのルートディレクトリにある次のコマンドを実行して Now トークンを暗号化できます。

```bash
travis encrypt NOW_TOKEN=YOUR_TOKEN --add
```

上記のコマンドにある `YOUR_TOKEN` と [Now ダッシュボードで利用可能なトークン（このページは開いたままのはずですね？）](https://vercel.com/account/tokens)を置き換えるのを忘れないでください。

このコマンドは Now トークンを暗号化し、そのエンコードしたバージョンを `env` セクションの下にある `.travis.yml` に追加します。このコマンドが成功すると、以下に表示のように `.travis.yml` ファイルに構成の一部が表示されます。

```bash
env:
  global:
    secure: DZC4XpjVPoPl4oXKPD2QATP4++vpPUXllQW0XZjUnSp4S/U9zQamciEMPjvwot324CC/nWm8eL5EyY5WIEyhvhbWwtl85GIYJJeSVhJbkOcwX9Z8Z95aE+9ajI0IMNgE9xS0f8jHYqUOSGTDz0aagGrl8ZgA/qI7qL7QZKLgX07e3nh5Zgyjtrgvyukhchtyiuhoetryuiozb4EoUUc8LJAZJPXBcok/qAmuxPQe6vZt5OTmhNPeL0efdRt861dql45A2qHKOGREYm3Ma0aV1IuqeCLrmoJkT5u7oGd+pG+OWh7LlgA1bjFbTufT/2YiGqCKDNLwbsX8OzBqOlu0Snm8Rb32Yr6VJIw/ulVweg+ZRsEIdNaY=
```

Travis CI（このプロパティを読み取り、解読できる唯一のパーティー）はこのキーを使って配置スクリプトを実行するときに `NOW_TOKEN` 環境変数に設定します。それから、最後に、プロジェクトを Now（`now --public --token $NOW_TOKEN` コマンドを通して）に配置するこの変数を使います。

### Now での名前を定義する

最後に、Now と Travis を一緒に設定しなければならなことはプロジェクトルートに `now.json` と呼ばれるファイルを作成し、次のコンテンツをそれに加えます。

```json
{
  "name": "node-cd"
}
```

このファイルはプロジェクトの `name` を Now に伝えるので Now がそれを配置するときに固有 URL を定義するのに役立ちます。

## 作動中の継続的配置パイプライン

配置パイプラインをテストするには、ファイルを追加（または変更/削除）して、コミットし、リモートの GitHub レポジトリにプッシュするだけです。このレポジトリで Travis CI を有効にしたので、GitHub は新しい変更について Travis CI に警告し、その配置プロセスが始まります。

### 最初の変更をプッシュする

まだその変更をコミットしたり `.``travis.yml`、`package.json`、`now.json` に送信したりしていないので、変更を GitHub にプッシュするためにプロジェクトのルートディレクトリから次のコマンドを発行できます。

```bash
git add -A

git commit -m "継続的転回パイプラインをTravis CI や GitHub で構成した"

git push
```

変更を GitHub レポジトリにプッシュすると、Travis CI は配置プロセスをトリガーし、そのビルド プロセスを引継ぎます。そのプロセスが進むと、Travis ダッシュボード上にログが見えてきます。

![Travis CI logs while deploying your open-source web app](https://images.ctfassets.net/23aumh6u8s0i/4en9HoDa8w6wbvHgOMcAyA/8832d34afd457fd4587f71e0d2eacf03/travis-deploying-your-application)

> **注：**現在のジョブを見るには、[ログイン中に、Travis CI のメインページに移動してください](https://travis-ci.org/)。そこから実行中のジョブがすべて見えるはずです。

Travis CI がビルドプロセスを完了したら、[Now ダッシュボード](https://vercel.com/dashboard)に移動して現在の配置インスタンスを見ることができます。そこでは、新しい配置へのリンクが*イベント*セクションの下に表示されます。

![Now.sh dashboard events after the first deployment](https://images.ctfassets.net/23aumh6u8s0i/15uayETB5nzl9x22WhbdCa/4dd4f43a8adc8bda039bd2806b5ad19d/now-dashboard-after-deployment)

それをクリックすると、新しいブラウザタブにオープンソースの Node.js アプリが開かれます。

### ２つめの変更をプッシュする

ここで、継続的配置パイプラインが適切に機能することを確認するために、`pages/index.html` ファイルにさらに変更を加えて GitHub にプッシュします。たとえば、このファイルを開いて、`h1` 要素とこれを置き換えます。

``` html  

<h1 class="text-center">
  I've just finished configuring a Continuous Deployment pipeline for my open-source, Node.js web app.
</h1>

```

それから、端末から次のコマンドを発行します。

```bash
git add -A

git commit -m "index.html ファイルの新規メッセージ"

git push
```

最後のコマンドの後、GitHub は新しい変更について Travis CI に通知し、新規の配置プロセスが始まります。数分後、Travis CI がそのビルドを終え、Now を使ってオープンソースの Node.js Web アプリの新規バージョンを配置します。

それを見るには、[Now ダッシュボード](https://vercel.com/dashboard)に戻り、アイコンをクリックして Now が定義した最新の URL を開きます。

![The second deployment of the open-source web app](https://images.ctfassets.net/23aumh6u8s0i/7AK1QheVFPVFcb6uvPwvZe/165d3dc4a9800aac73d3a806164c4d1c/second-deployment)

<include src="JpTweetQuote" quoteText="オープンソース Web アプリの継続的配置パイプラインを構築しました。"/>

<include src="asides/JpNode" />

## まとめ

本書では、継続的配置という、最新のソフトウェア開発におけるホットな用語のひとつを取扱いました。Git、継続的インテグレーションサーバー、および継続的配置におけるそれぞれの役割も簡単に学んできました。特に、オープンソース Web アプリ用の継続的配置パイプラインを構成する GitHub、Travis CI、Now.sh といったツールを使用しました。すごいですね？

この知識を使って、継続的インテグレーションをもっと複雑なプロジェクトに適用することができます。CI サーバーや Git をホストする新しい Web サービスなど、本書で使ったものと同様のツールに挑戦してみるのもいいでしょう。

皆さんが構築されたものを見る日を楽しみにしています。頑張りましょう！
