ActiveReportsJS/JavaScript/Neon/Next.js/TypeScript/Vercel

VercelとNeonで構築するActiveReportsJSのサーバーレスWeb帳票 ― Git pushでデプロイ完了！

by MESCIUS-dev

クラウド環境でのシステム開発が当たり前になった今、開発者に求められるのは「シンプルさ」と「スピード」です。

その要求に応えるプラットフォームが Vercel です。Git にpushするだけでデプロイが完了する。複雑な設定は一切不要。そんな「開発者体験の徹底追求」が、多くの開発チームに支持されています。

静的サイトのホスティングから始まった Vercel ですが、今では Next.js の最適な実行環境として、API Routes でバックエンド機能も実装可能な Webアプリ開発基盤へと進化してきました。さらに、マネージドな PostgreSQL「Neon」との連携により、データベースを使ったアプリケーションも手軽に構築できます。

以下の記事では、Vercel + Neonの組み合わせでCRUD処理が行える Web APIを構築する方法を詳しく解説しています。本記事では、 この前回記事で構築したCRUDアプリを発展させ、JavaScript帳票ライブラリ「ActiveReportsJS（アクティブレポートJS）」を組み合わせて、データベースの データをレポートとして出力する帳票機能をステップバイステップで 実装していきます。

事前準備

開発環境

以下の開発環境を事前に準備してください。

上記に加え、ActiveReportsJS「V6J（v6.0.1）」を使用します。あらかじめ製品版、またはトライアル版をインストールしてください。トライアル版は無料で以下より入手可能です。

プロジェクトの準備

つづいて、プロジェクトの作成を行います。

今回は、前回記事で作成したVercel上のCRUDアプリケーションをベースに帳票機能を追加していきます。以下のGitHub上に公開されているリポジトリをクローンし、新しいプロジェクトとして利用します。

以下のコマンドでリポジトリをクローンし、プロジェクト名を指定して作成します。今回は「vercel-crud-reports-app」というプロジェクト名にしています。

git clone https://github.com/MESCIUSJP/vercel-crud-app.git vercel-crud-reports-app
cd vercel-crud-reports-app

※ clone時にディレクトリ名を指定することで、新しいプロジェクト名として利用できます。

次に、既存のGit履歴を引き継がず新規プロジェクトとして利用するため、`.git` フォルダを削除します。

Remove-Item -Recurse -Force .git

つづいて、自分のGitHubリポジトリに登録し直します。あらかじめ https://github.com/new にアクセスし、空のリポジトリ vercel-crud-reports-app を作成しておいてください。

リポジトリを作成したら、以下のコマンドでGit初期化〜pushまでを行います。

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/<your-account>/vercel-crud-reports-app.git
git push -u origin main

※ <your-account> はご自身のGitHubアカウント名に置き換えてください。

つづいて、必要な依存パッケージをインストールします。

npm install

インストール後、そのままのバージョンでは脆弱性警告の影響により、Vercelへのデプロイが失敗する場合があります。そのため、以下のコマンドで Next.js と React のバージョンを更新しておきます。

npm install next@15.5.19 react@19.1.4 react-dom@19.1.4

Next.jsとReactのパッケージ更新が完了したら、以下のコマンドでプロジェクトをVisual Studio Codeで開き、ターミナルを起動しておきます。

code .

Neonデータベースの準備

つづいて、データベースの準備を行います。

今回は、以下の記事で作成したアプリケーションを前提に、構築済みのNeonデータベースを利用します。未実施の場合は、先にアプリケーションの作成を行ってください。

Vercelプロジェクトの作成

続いて、Vercelプロジェクトの作成を行います。

Vercelプロジェクトは、先ほどGitHubに作成したリポジトリをImportする形で作成します。Vercelのダッシュボードにアクセスし、「Add New Project」から対象のリポジトリを選択してください。

Vercelプロジェクト作成
Vercelプロジェクト作成2

GitHubリポジトリをインポート後、「Deploy」ボタンを押してデプロイを実行します。初回デプロイ時にエラーとなる場合がありますが、現時点では問題ないため、そのまま進めてください。

Vercelプロジェクト作成3

デプロイ完了後、ダッシュボードに戻り、作成したVercelプロジェクトを選択します。

Vercelプロジェクト作成4

続いて、Vercelプロジェクト「vercel-crud-reports-app」と、作成済みのNeonデータベースを接続します。サイドメニューから「Storage」を選択し、表示された画面で「Connect」ボタンを押します。

Vercelプロジェクト作成5
Vercelプロジェクト作成6

ダイアログが表示されたら「Connect Project」を選択して接続します。

Vercelプロジェクト作成7

接続が完了すると、NeonデータベースがVercelプロジェクトに紐づけられます。

Vercelプロジェクト作成7

環境変数の設定

続いて、環境変数の設定を行います。

ローカル環境での設定

リポジトリには環境変数のサンプルファイル .env.local.example が含まれているため、以下のコマンドでコピーして .env.local を作成します。

cp .env.local.example .env.local

作成した .env.local を開き、Vercelダッシュボードまたは Neon Console から取得した接続情報に書き換えてください。

Vercel環境での設定

Vercel上では、先ほど「Storage」からNeonデータベースを接続したことで、接続に必要な環境変数は自動的にプロジェクトへ設定されます。

そのため、基本的に手動で環境変数を追加する必要はありません。

なお、Vercel CLI を利用している場合は、以下のコマンドでVercelに設定されている環境変数をローカルに取得することも可能です

vercel env pull .env.local

ActiveReportsJSで帳票機能を実装

それでは、ここからは準備したプロジェクトに、ActiveReportsJSを組み込み、帳票機能を実装していきます。

ActiveReportsJSのインストール

まず、ActiveReportsJSパッケージ、React対応パッケージ、ビューワの日本語化用ローカライズパッケージをインストールします。ターミナルで以下のコマンドを実行してください。

npm install @mescius/activereportsjs-react@6.0.1 @mescius/activereportsjs@6.0.1 @mescius/activereportsjs-i18n@6.0.1

コンポーネントの実装

つづいて、コンポーネントを実装していきます。以下のように「components」フォルダ内に「ReportViewer.tsx」を追加します。

コンポーネント実装

ActiveReportsJSはクライアントサイドでのみ動作するため、サーバーサイドレンダリングに対応した「Next.js」を使用する場合は、該当コンポーネントがクライアントサイドで実行されることを'use client';の指定によって明示する必要があります。「ReportViewer.tsx」に実装するコードは以下の通りです。

"use client";

import React from "react";
import { Viewer, Props as ViewerProps } from "@mescius/activereportsjs-react";
import { Core, PdfExport } from "@mescius/activereportsjs";
import "@mescius/activereportsjs-i18n";
import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";

// トライアル版として動作させる場合、以下処理をコメントアウトしてください
Core.setLicenseKey(process.env.NEXT_PUBLIC_ACTIVEREPORTSJS_LICENSE || "");

const pdf = PdfExport;

export type ViewerWrapperProps = ViewerProps & { reportUri: string };

const ViewerWrapper = (props: ViewerWrapperProps) => {
  const ref = React.useRef<Viewer>(null);
  React.useEffect(() => {
    ref.current?.Viewer.open(props.reportUri);
  }, [props.reportUri]);
  return <Viewer {...props} ref={ref} />;
};

export default ViewerWrapper;

ライセンスキーの設定

ReportViewer.tsx では、Core.setLicenseKey(process.env.NEXT_PUBLIC_ACTIVEREPORTSJS_LICENSE || "") のように、環境変数からActiveReportsJSのライセンスキーを読み込んでいます。そのため、.env.local にライセンスキーを設定しておく必要があります。

先ほど設定したNeonの環境変数の下に、変数名 NEXT_PUBLIC_ACTIVEREPORTSJS_LICENSE として追加し、取得した開発ライセンスキーを設定してください。

NEXT_PUBLIC_ACTIVEREPORTSJS_LICENSE= "取得した開発ライセンスキー"

※トライアル版として動作させる場合は、ReportViewer.tsx 内の Core.setLicenseKey(...) の行をコメントアウトすれば、この環境変数の設定は不要です。

ページ実装

つづいて、コンポーネントを呼び出すためのページを作成するために「app」フォルダ配下に「ReportsPage」フォルダを作成し、その中に「page.tsx」を追加します。

ReportsViewerページの追加

「page.tsx」ファイルは以下のように実装します。「components/ReportViewer.tsx」ファイルを動的インポートし、その際{ ssr: false }オプションを指定することで対象ファイルをSSR（サーバーサイドレンダリング）しないように設定します。

"use client";

import type { NextPage } from "next";
import React from "react";
import { ViewerWrapperProps } from "../components/ReportViewer";

// 動的インポートを使用して、レポートビューワのラッパーをロードします。詳細については、「https://nextjs.org/docs/advanced-features/dynamic-import」を参照してください。
import dynamic from "next/dynamic";
const Viewer = dynamic<ViewerWrapperProps>(
  async () => {
    return (await import("../components/ReportViewer")).default;
  },
  { ssr: false }
);

const Home: NextPage = () => {
  return (
    <div style={{ width: "100%", height: "100vh" }}>
      <Viewer reportUri="reports/Invoice_green.rdlx-json"  language="ja" />
    </div>
  );
};

export default Home;

レポートファイルの作成

つづいて、帳票として出力するレポートファイルを作成します。今回はGitHubに公開中の以下のレポートを使用します。

GitHubより取得したレポートファイルは、次のように「public」フォルダに「reports」フォルダを作成し、その中に格納します。

レイアウト追加

格納したファイルをActiveReportsJS デザイナより開き、データソースの設定を変更します。次のようにデータソースの編集アイコンを選択してデータソースダイアログを開きます。ダイアログ表示後、「形式」を「外部ファイルまたはURL」へ変更します。

データソースの設定変更1

変更すると、次のように、エンドポイントの指定が可能となりますので、ここに作成済みのWeb API「/api/invoices」を設定し、［変更を保存］ボタンを押します。

データソースの設定変更2

この設定により、帳票のデータソースとして作成済みのWeb APIからデータを取得できるようになりました。

ローカル環境で動作確認

ここまでの実装が完了したら、ローカル環境で動作を確認します。

以下のコマンドでアプリケーションを起動します。

npm run dev

起動後、ブラウザで「http://localhost:3000」にアクセスすると、前回作成したSwagger UIの画面が表示されます。ここで、データベース内のデータを確認してください。データが存在しない場合は、適宜追加しておきます。

データの登録を確認したら、「http://localhost:3000/ReportsPage」にアクセスします。ActiveReportsJSで作成した請求書帳票が表示され、Web APIから取得したデータが反映されていることを確認できます。

Vercelへデプロイ

ここまででアプリケーションの構築が完了しましたので、Vercel環境へデプロイします。

作成したGitHubリポジトリとVercelプロジェクトはすでに連携済みのため、ローカルリポジトリの変更をGitHubへpushするだけで、デプロイが自動的に開始されます。

以下のコマンドを実行するか、Visual Studio Codeのソース管理機能からコミット・pushすることで、デプロイを実行できます。

git add .
git commit -m "Add reports feature"
git push origin main

GitHubへのpushが完了したら、Vercelのダッシュボードからプロジェクトの状態を確認してみます。

デプロイ確認

Statusが「Ready」となれば、デプロイは完了です。「Domains」からアプリケーションにアクセスし、実際の動作を確認してみましょう。

Vercel環境上に環境変数を設定

トップページは正しく動作していますが、「ReportsPage」ではViewer上にライセンス未設定のエラーが表示されます。

このエラーは、Vercel環境にActiveReportsJSのライセンスが設定されていないことが原因です。Vercelの環境変数に配布ライセンスを追加し、エラーを解消していきます。

Vercelの環境変数設定画面で「Add Environment Variable」をクリックし、次のように配布ライセンスの環境変数を追加します。

環境変数の追加
環境変数の追加2

再確認

「ReportsPage」に再度アクセスし、動作を確認します。正しく請求書が表示されていれば完了です。

さいごに

今回は、VercelとNeonで構築したサーバーレスWebアプリに、JavaScript帳票ライブラリ「ActiveReportsJS」を組み込み、データベースの内容を帳票として出力する手順をご紹介しました。

CRUDで扱っているデータをそのまま帳票化できるようになることで、Webアプリでも「印刷・PDF出力・帳票レイアウト」といった業務システムらしい要件に対応できるようになります。

また、GitHubへのpushだけでデプロイが完了するVercelの仕組みにより、コードの修正から公開までをスムーズに進められる点も魅力です。

クラウドやサーバーレス環境での開発を検討されている方は、ぜひ本記事を参考に、帳票機能付きのWebアプリ構築にチャレンジしてみてください。

今回ご紹介したソースコードはGitHubで公開していますので、ぜひ手元で動かしながら試してみてください。

製品サイトでは、今回ご紹介したActiveReportsJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼  この記事をシェアする  ／