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

Posted on 2022-12-09

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

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

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

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

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

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

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

クローンして作業

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

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

CodeEngine/hello at main · IBM/CodeEngine

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

Code Engine のプロジェクト作成

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

作成されました。

アプリケーションの作成

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

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

ビルド詳細の指定

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

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

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

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

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

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

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

テストをしてみる

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

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

しばらくすると 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 上で新しいアプリケーションを作成して今回のリポジトリを指定して、新しいアプリケーションをつくります。

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

アプリケーションのテストボタンをクリックして 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

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

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

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 を加えました。