[Node.js] Koa.js を使用したWebアプリの作成 – ヘルプ - ロリポップ！マネージドクラウド

ご自身の開発環境で開発した Node.js アプリをマネージドクラウドで公開する方法です。
Node.js コンテナは git コマンドを利用して、アプリケーションをデプロイすることが可能です。

手順

1. Node.js のプロジェクトを作成しよう

プロジェクト作成ページから Node.js のアプリケーションを選んで、プロジェクトを作成します。

2. SSH の公開鍵を登録しよう

SSHの公開鍵が未登録の場合は SSH公開鍵ページで登録します。

3. Git リポジトリの作成

まずアプリケーションの元となる、ソースコードを作成します。ソースコードは Git リポジトリという仕組みで管理する必要があります。

(※ 以下MacOS/Linux 環境のコマンドラインでの進行となります為、別途GUIツールをご利用の場合は適宜読み替えをお願いします。)

# リポジトリとなるディレクトリを作成する
mkdir my-project
cd my-project

# リポジトリとして初期化
git init

以上で Gitリポジトリの作成ができました。

4. 最初のソースコードを作成する

まずはアプリケーションの起動に必要なパッケージを取得します。今回は Koa.js を使用します。

# .gitignore ファイルを作成
echo 'node_modules' >> .gitignore

# npm を初期化 (対話式に設定が行われますので必要に応じて入力してください)
npm init

# 必要なパッケージを追加
npm install koa

次に下記内容を含むファイルを index.js として作成します。仕様として、アプリケーションはポート 80 を Listen する必要があります。

const Koa = require('koa')
const app = new Koa()

app.use(async (ctx) => {
  ctx.body = 'Hello World'
})

app.listen(80)

続いてディレクトリに作成されている package.json を開いて scripts に start という項目を追加します。マネージドクラウドにおけるコンテナ起動処理のデフォルト設定ではこの記載によりアプリケーションが起動されます。

{
  "scripts": {
    "start": "node ./index.js"
  }
}

最後に変更をリポジトリに記録します。

# 変更のあったファイルをすべて登録する
git add .

# 登録された変更を確認する
git status

# コミット
git commit -m "ここにコミットメッセージを記載します (例: ファーストコミット)"

5. アプリケーションをデプロイする

アプリケーションの公開(デプロイ)を行うためには、マネージドクラウドに対してリポジトリを push する必要があります。プロジェクトの詳細ページを表示し、「SSH / SFTP」＞「リポジトリ」に記載されている下記のようなコマンドをコピーして実行します。

git remote add lolipop ssh://<ユーザー名>@<ホスト名>:<ポート>/

次のコマンドを実行して、 Node.js コンテナへデプロイします。

git push lolipop master

コンソール中に下記のような表示があればデプロイは正常に終了しています。
デプロイが正常終了するとコンテナは自動的に再起動され、更新されたソースコードを参照するようになります。

remote: Syncing...
remote: Deploy :ok:
remote: Build success! Thanks for using Lolipop! Managed Cloud.
remote: Restarting app...

デプロイ後は、プロジェクトのURLへアクセスを行い実際に表示ができるかご確認ください。
すべて正常に完了しておりましたら下記のような表示になります。

その他

アプリケーションの更新するには？

デプロイ後、アプリケーションの更新を行うには初回のデプロイと同じく、変更をリポジトリへの登録(コミット)し、リポジトリの更新情報を送信(プッシュ)することで行います。例として先ほど作成した index.js を下記のように書き換えてみましょう。

const Koa = require('koa')
const app = new Koa()

app.use(async (ctx) => {
  // 変更箇所はこちらです。お好きな文字列にしていただいても構いません。
  ctx.body = 'こんにちは、世界。'
})

app.listen(80)

続いてリポジトリに変更を登録してマネージドクラウドに送信します。

# 変更のあったファイルをすべて登録する
git add .

# 登録された変更を確認する
git status

# コミット
git commit -m "ここにコミットメッセージを記載します (例: メッセージを変更)"

# マネージドクラウドに送信
git push lolipop master

デプロイ後に、再びプロジェクトのURLへアクセスを行い実際に表示ができるかご確認ください。
「Hello World」という表示が「こんにちは、世界」に変わっていたら成功となります。 (ブラウザのキャッシュにより初回の表示に変化がないこともあるため必要に応じてリロードを行ってください)

Yarnpkg を使用するには？

マネージドクラウドでは push した際に、 npm install が実行されます。 yarnpkg を利用してパッケージの管理を行っている場合は、こちらのマニュアルも参照ください

このセクションの記事

手順