LoginSignup
5
6

More than 5 years have passed since last update.

Node.jsアプリを無償の継続的インテグレーションツール:Oracle Developer Cloudを使ってデプロイする

Last updated at Posted at 2016-12-07

概要

Oracle Application Container CloudではNode.jsアプリを稼働させることができます。アプリをデプロイする際、最も原始的な方法はソースコードを手元でzipし、そのアーカイブファイルをブラウザ経由でアップロードする形です。

より洗練された継続的インテグレーションをおこなうには、ソースコードのレポジトリ管理やテストと連動するデプロイの仕組みが必要です。この仕組みを提供するのがDeveloper Cloudで、このサービスは無償で利用できます。

Application Container Cloudは有償です

この記事では手元のコードをDeveloper Cloudのgitレポジトリにプッシュし、アプリをビルド、そしてApplication Container Cloudへデプロイする流れを解説します。

所要時間

30分

手順

新しいプロジェクトの作成

「New Project」ボタンをクリックして新しいプロジェクトを作成します。
click_new_project.png

  • Name: node-bootcamp *任意の名前でOKです
  • Security: Private

project_detail.png

  • Empty Project を選択
    スクリーンショット 2016-12-07 14.23.32.png

  • Wiki Markup: 任意のフォーマットを選択してください
    project_properties.png

これで新しいプロジェクトが作成されました。

このプロジェクトの中には、ソースコードのレポジトリ、ビルド方法、デプロイ設定など、アプリケーションのライフサイクル管理に必要な一通りの機能が入っています。したがってアプリケーションごとにこのプロジェクトを一つ作成するのが最もシンプルな形でしょう。

レポジトリの作成

アプリのソースコードを管理するためのgitレポジトリを作成します。Codeメニューを選択し、「New Repository」ボタンをクリックします。
click_new_repository.png

  • Name: 任意の名前でOKです
  • Initial Content: Empty Repository

new_repository.png

下図のようにレポジトリが作成されます。URLは後ほどリモートレポジトリの登録時に必要になりますのでメモっておいてください。
repository_created.png

コードの準備

それではアプリ本体を準備します。といっても今回はデプロイまでの流れを把握することが目的なので、アプリ自体はexpress-generatorで生成したものをそのまま利用します。したがってまずexpress-generatorでソースツリーを生成します。

$ express -e node-bootcamp

   create : node-bootcamp
   create : node-bootcamp/package.json
   create : node-bootcamp/app.js
   create : node-bootcamp/public
   create : node-bootcamp/public/javascripts
   create : node-bootcamp/public/images
   create : node-bootcamp/public/stylesheets
   create : node-bootcamp/public/stylesheets/style.css
   create : node-bootcamp/routes
   create : node-bootcamp/routes/index.js
   create : node-bootcamp/routes/users.js
   create : node-bootcamp/views
   create : node-bootcamp/views/index.ejs
   create : node-bootcamp/views/error.ejs
   create : node-bootcamp/bin
   create : node-bootcamp/bin/www

   install dependencies:
     $ cd node-bootcamp && npm install

   run the app:
     $ DEBUG=node-bootcamp:* npm start

NPMモジュールをインストールし、Nodeアプリを起動します。

$ cd node-bootcamp/
$ npm install
$ npm start

ブラウザで下記URLにアクセスし、トップページにアクセスできることを確認します。

http://localhost:3000
スクリーンショット 2016-12-07 13.26.27.png

manifest.jsonを作成します。これはApplication Container Cloudが必要とするメタデータで、アプリの起動方法やnode.jsのバージョンが定義されています。

manifest.json
{
    "runtime":{
        "majorVersion":"6" // Nodeのバージョン指定
    },
    "command": "npm start", // このコマンドでNodeアプリが起動されます。
    "release": {},
    "notes": ""
}

gulpおよび必要なgulp-zipをインストールします。gulpは必須ではなく、gruntなど他のオートメーションフレームワークでもOKです。今回はソースコードをまるっとzipするためにgulpを利用します。

$ npm install --save gulp gulp-zip

gulpfile.jsを作成し、ソースをアーカイブするタスク:artifactを追加します。

gulpfile.js
// モジュールをインポート
var gulp = require('gulp');
var zip = require('gulp-zip');

// ソースコードをすべてartifact.zipに固める
gulp.task('artifact', function(){
    return gulp.src('./**')
        .pipe(zip('artifact.zip'))
        .pipe(gulp.dest('./'));
});

一度タスクを実行してartifact.zipが作成されるか確認します。

$ gulp artifact
[14:02:03] Using gulpfile ~/Workspaces/node-bootcamp/gulpfile.js
[14:02:03] Starting 'artifact'...
[14:02:05] Finished 'artifact' after 1.34 s
$ ls 
app.js      bin     manifest.json   package.json    routes
artifact.zip    gulpfile.js node_modules    public      views

ちゃんと作成されているようです。
このファイルはDeveloper CloudのBuildの中で作成されますので確認できたら消しておきます。

$ rm artifact.zip

gitレポジトリを初期化します。

$ git init

リモートレポジトリとしてDeveloper Cloudのgitレポジトリを追加します。先ほどDeveloper CloudのCodeメニューに表示されていたURLを使って登録します。

$ git remote add origin あなたのgitレポジトリのURL

.gitignoreファイルを作成し、gitで管理しないファイルを列挙します。

.gitignore
.gitignore
.DS_Store
node_modules
npm-debug.log

gitでコードをDevleoper Cloudにプッシュします。

$ git add .
$ git commit -m 'first commit'
$ git push origin master

Jobの作成とBuild実行

まずBuildメニューで新しいJobを作成します。
スクリーンショット_2016-12-07_14_06_37.png

  • Job Name: 任意の名前でOKです
  • Create a free-style job: チェック

スクリーンショット 2016-12-07 14.07.10.png

その新しいJobのSource Controlタブで下記の設定を追加します。

  • Git: チェック
  • Repository: node-bootcamp.git スクリーンショット 2016-12-07 14.07.27.png

Build Stepsタブで下記のStepを追加します。

  • タイプ: Execute Shell
  • Command:
npm install
gulp artifact

スクリーンショット 2016-12-07 14.08.01.png

まずnpm installによって必要なNPMモジュールをインストールしています。これはgitレポジトリにはこれらのNPMモジュールを含めていないため、完全な形のアーカイブを作るのに必要な処理です。

gulp artifactは先ほどテストした通り、ソースコード全体をまるっとzipで固める処理です。このzipで固めたファイル(今回だとartifact.zip)はartifactと呼ばれ、Application Container Cloudへソースコードをデプロイするために必要になります。

Post Buildタブで下記の設定を追加します。

  • Archive the artifacts: チェック
  • Files To Archive: artifact.zip
  • Discard all but the last successful/stable artifact to save disk space: チェック
  • Compression Type: NONE スクリーンショット 2016-12-07 14.08.16.png

これはBuild Stepsで作成したartifact.zipをartifactとしてデプロイ時に利用しますよ、という設定です。

「Build Now」ボタンをクリックして作成したジョブを実行します。
スクリーンショット_2016-12-07_14_08_26.png

ジョブは実行待ちのキューに入り、しばらくすると実行されます。画面をそのままにしておくと、ほどなくして下図のように進捗が表示されます。
スクリーンショット_2016-12-07_14_43_47.png

下図のようにStatusに緑のチェックがつけばビルド完了です。
スクリーンショット_2016-12-07_14_44_53.png

Deployの設定と実行

Deployメニューで新しい設定を作成します。
スクリーンショット_2016-12-07_14_46_16.png

下記のように設定します。

  • Configuration Name: 任意の名前
  • Application Name: 任意の名前
  • Deployment Target: NewをクリックしてApplication Container Cloudを選択。続けて表示されるフォームに、デプロイ先のApplication Container Cloudのアカウントを入力し、Test Connectionボタンをクリック、その後Use Connectionボタンをクリックします。
    スクリーンショット_2016-12-07_14_48_54.png

  • Runtime: Node

  • Subscription: 任意の課金単位

  • Type: On Demand

  • Job: 先ほど作成したJob

  • Build: 先ほど成功したジョブ

  • Artifact: 先ほど成功したBuildで作成したArtifact

スクリーンショット 2016-12-07 14.52.18.png

画面右上の「Save and Deploy」ボタンをクリックします。するとApplication Container Cloudへのデプロイが開始されます。初回はそこそこ時間がかかりますが、5分くらいで完了すると思います。
スクリーンショット_2016-12-07_16_13_22.png

Application Container Cloudの方を確認すると、下図のように新しいアプリケーションが作成され、稼働しているはずです。URLをクリックするとアプリケーションのトップページにアクセスできます。
スクリーンショット_2016-12-07_16_15_02.png

手元のPCで確認したときと同じ画面が表示されれば無事にNode.jsアプリがデプロイされたということになります。
スクリーンショット 2016-12-07 16.16.56.png

5
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
6