Code Engine で Node.js サーバーを試して Vue + Vite の連携までやってみるメモ

Code Engine で Node.js サーバーを試して Vue + Vite の連携までやってみるメモです。

この記事は IBM Cloud Advent Calendar 2022 の 9 日目の記事です。

2022/12 の情報で進めます。

Code Engine サンプルダウンロード

image

https://github.com/IBM/CodeEngine こちらのリポジトリを ZIP ダウンロードして手元に置きます。ほとんどが Go でできてるので Node.js 使いの私だと若干戸惑うのですが、hello フォルダだけ Node.js のサンプルがあるのでそれを使います。

自分の公開リポジトリを GitHub で作成

image

Code Engine がソースコードを取ってこれるよう、自分の公開リポジトリを GitHub で作成します。

クローンして作業

image

さきほど作成したリポジトリを手元にクローンして作業をはじめます。

Code Engine サンプルの hello のサンプルを直下に置く

image

CodeEngine/hello at main · IBM/CodeEngine

こちらの Code Engine サンプルの hello のサンプルを直下に置きます。

Code Engine のプロジェクト作成

image

Code Engine のページでプロジェクト作成します。ロケーションは東京です。

image

作成されました。

アプリケーションの作成

image

アプリケーションの作成ボタンをクリック。

image

  • 実行するコードの選択
    • ソース・コード
  • ソース・コード URL
    • 今回作成した GitHub のリポジトリの URL を指定
  • リスニングポート
    • 8080

ビルド詳細の指定

image

設定できたらビルド詳細の指定のボタンをクリックします。

image

ソースはそのままの設定で次へ。

image

戦略はそのままの設定で次へ。

image

出力はそのままの設定で完了ボタンをクリックします。

image

作成ボタンをクリックします。

image

作成中でしばらく待ちます。

image

実行中のままになることもあるので 3 分後くらいにリロードしたらうまくいきました。

テストをしてみる

image

アプリケーションのテストボタンをクリックします。

image

アプリケーションの URL ボタンをクリックします。

image

しばらくすると Hello World の文字が出て、うまく作成できました!うれしい!

Express を動くようにする

Node.js の基本的なものは動いたので、仕組みを整えていきます。 Express ライブラリを入れてサーバー挙動を http モジュールから切り替えます。

FROM icr.io/codeengine/node:12-alpine
COPY package.json .
RUN npm install
RUN mkdir public
COPY public/ public/
COPY server.js .
EXPOSE 8080
CMD [ "node", "server.js" ]

Dockerfile をこのように書き換えます。

npm init -y

手元で実行して npm の初期化を行います。

npm i express

express をインストールします。

const express = require('express');
const app = express();

app.use(express.static(__dirname + '/public'));

// bodyParser
app.use(express.json())
app.use(express.urlencoded({ extended: true }));

app.listen(process.env.PORT || 8080, () => {
  console.log("server start!");
  console.log(`app listening at http://localhost:${process.env.PORT || 8080}`)
})

server.js を書き換えて public フォルダ内の静的ファイルがそのまま表示されるようにします。

<html>
  <head>
    <title>Index</title>
  </head>
  <body>
    <h1>Index</h1>
  </body>
</html>

public フォルダを作って public/index.html を作成します。

コミットして再度 Code Engine 上で新しいアプリケーションを作成

ここまでの変更をコミットして Code Engine 上で新しいアプリケーションを作成して今回のリポジトリを指定して、新しいアプリケーションをつくります。

image

さきほどの アプリケーションの作成 → ビルド詳細の指定 → テストをしてみる の流れです。

image

アプリケーションのテストボタンをクリックして URL を見てみると、このように public/index.html のファイルが表示されます。

手元で Vue + Vite のインストール

はじめに | Vite

こちらを参考に手元で Vue + Vite の環境を作ります。

npm create vite@latest my-vue-app -- --template vue

私の場合は npm のバージョンが 8 だったので、このようなコマンドを打ちます。

cd my-vue-app

出来上がったら Vite の案内に従って、my-vue-app フォルダに移動します。

npm install

Vue のフォルダで必要パッケージをインストールします。

npm run dev

手元でテストサーバーを表示します。

image

このように無事動作しました。

Vue の出力フォルダを public フォルダにする

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

Vite の設定ファイル my-vue-app/vite.config.js を以下のように変更します。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build:{
    outDir:"../public"
  }
})

build.outDir で public フォルダ以下に出力先を指定します。

my-vue-app\src\App.vue をちょっと変更する

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

my-vue-app\src\App.vue のこの部分を以下のように変更します。

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue + IBM Cloud Code Engine" />
</template>

変更はシンプルで <HelloWorld msg="Vite + Vue + IBM Cloud Code Engine" /> に、ちょっと IBM Cloud Code Engine を加えました。

ビルドして手元で検証

ターミナルの現在のフォルダは my-vue-app フォルダにいる前提で進めます。

npm run build

で、public フォルダ以下に Vue 関連のファイルをビルドします。

cd ..

プロジェクト直下のフォルダに戻ります。

node server.js

を実行して http://localhost:8080 でブラウザで表示してみます。

image

無事動作が確認できました。

再度、コミットして再度 Code Engine 上で新しいアプリケーションを作成

image

ここまでの変更をコミットして Code Engine 上で新しいアプリケーションを作成します。

さきほどと同じように アプリケーションの作成 → ビルド詳細の指定 → テストをしてみる の流れを、コミットし終えた今回のリポジトリを指定して、新しいアプリケーションをつくります。

image

出来上がったらアプリケーションの URL を表示してみましょう。

image

無事、Vue + Vite の仕組みが表示されました!

同じアプリケーションを更新する方法ももちろんある

今回は毎度新しいアプリケーションを作成したが、同じアプリケーションを更新する方法ももちろんあります。

image

今回のアプリケーションのコードの項目でイメージ・ビルドのところでビュービルドをクリックします。

image

すると今回のアプリケーションが使っているイメージのビルド設定が表示されます。ここでビルドされるイメージの設定があり、最初に設定したソースコードを GitHub から引っ張ってくるなどの設定があるのでビルドの実行依頼をしてイメージを更新します。

image

更新できたら、再度アプリケーションの設定に戻ります。構成のタブで編集して新規リビジョンを作成ボタンをクリックすると、更新したイメージをアプリケーションに反映してくれます。

たまに、イメージ・ビルドやビュービルドが出てこないケースがある

image

条件は不明ですが、たまに、イメージ・ビルドやビュービルドが出てこないケースがあるので、そのときはコンテナー・イメージ参照を確認して、プロジェクトのトップページに戻ります。

image

イメージ・ビルドで、出力がコンテナー・イメージ参照が同じものを選ぶと、さきほどのビルド設定に行くことができます。