vte.cxによるバックエンドを不要にする開発(1.Getting Started) #React

vte.cxはサーバ構築を不要にするバックエンドサービス

これまで、Webサービスを作ろうと思ったら、PHPやRubyといった言語を使ってバックエンドを構築しなければなりませんでした。[vte.cx](link: http://vte.cx)はこれらバックエンドの構築を不要にするサービス(BaaS)です。
vte.cxはバックエンドサービスの開発及び実行環境、フロントエンドアプリケーションの開発ツールとライブラリ、そしてアプリケーションをホスティングする機能を兼ね備えています。これにより、Webアプリケーションの迅速な開発を実現します。

vte.cx自体は弊社が作成した独自のサービスですが、その上で構築するWebアプリケーションはSPA(Single Page Application)というアーキテクチャーのアプリケーションとなり、JavaScriptやReactなどの標準的なライブラリだけで構築されます。一方、バックエンドとはAPIを介する疎結合になっており、vte.cxの独自な機能がフロントエンドに何か制約を課したりすることはありません。また、バックエンドはvte.cxを使わなくても別の言語(PHPなど)に論理的には取替可能です。つまり、vte.cxにロックインされる心配はなく、vte.cxを利用してもそこで培ったフロントエンドの知識が無駄になることはないのです。

むしろ、フロントエンドチームはバックエンドの仕組みを考えなくてもいいように作られていますので、フロントエンドだけに集中して開発できるようになります。また、vte.cxを開発するにあたっての想いをこちらにまとめていますのでぜひ御覧ください。

vte.cxの機能

vte.cxは以下のバックエンド機能とホスティング機能、およびツールとライブラリを提供します。

バックエンド機能
- vte.cxの管理画面からサービスを作成すると、バックエンド機能を提供できるようになります。バックエンド機能とは、ログイン機能やアクセス制御、データベースやBigQueryへの書き込み読み出し、メール送信、PDF帳票生成といったフロントエンドでは実現できない機能のことです。これらは、JavaScript を使ってロジックを書くことで、基本的にフロントエンドからアクセスできます。
ホスティング機能
- vte.cx が提供するデプロイコマンドで、アプリケーションをホスティングすることができます。アプリケーションにはHTMLやCSS、JavaScript、画像などが含まれます。
ツールとライブラリ
- vte.cxアプリケーションを迅速に開発できるcreate-vtecx-app、デプロイツールなどのvtecxutil、認証ライブラリのvtecxauthなど、vte.cxを利用するためのライブラリをnpmパッケージで提供しています。

Getting Started

では、初めての vte.cx アプリケーションをデプロイしてみましょう。
全体の流れは以下のようになっています。

vte.cx アカウントの作成
vte.cx 管理画面からサービスをクリックして作成
create-vtecx-appの実行
(まだインストールしていない方は）node.jsをインストール (v14.17.0を推奨)
IDE(Visual Studio Code)でプロジェクトを開き、コンソール内でvte.cxにログイン
ソースプログラムを作成
デプロイコマンドの実行
アプリケーションを表示
ソースプログラムの編集と個別ファイルのデプロイ

vte.cx アカウントの作成

まずはじめに、アカウント新規登録画面でアカウントを登録してください。
登録するとメールが送信されますので、リンクをクリックして本登録を行ってください。

vte.cx 管理画面から、tutorial 用サービスをクリックして作成

次に管理画面にログインします。先程作成したアカウントでログインしてください。
すると以下の画面が表示されますので、作りたいサービス名とコメントを入れてサービスを作成してみましょう。
サービスは名前の通り、一つのサービスごとに一つ作成します。同時に、サービスをホスティングするドメインも作成されます。つまり、アプリケーションはhttp(s)://{サービス名}.vte.cxでホストされるようになります。次の項目ではこのドメインに、初めてのデプロイを行います。

ローカル環境の準備とcreate-vtecx-appの実行

バックエンド側の準備ができたので次はローカル環境を準備しましょう。
インストールするソフトウェアは以下の２つです。

node.js
Visual Studio Code
- VSCodeにESLintの拡張機能を入れてください

次に、プロジェクトを作成したいディレクトリを作り、その配下で以下のコマンドを実行してください。

npm install create-vtecx-app
npx create-vtecx-app {プロジェクト名}
cd {プロジェクト名}
npm install

ここでプロジェクト名を仮にtutorialとすると以下のような流れになります。

$ npm install create-vtecx-app
npm WARN saveError ENOENT: no such file or directory, open '/Users/takezaki/temp/demo/temp/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/Users/takezaki/temp/demo/temp/package.json'
npm WARN temp No description
npm WARN temp No repository field.
npm WARN temp No README data
npm WARN temp No license field.

+ create-vtecx-app@1.0.0
added 9 packages from 5 contributors and audited 10 packages in 3.079s
found 0 vulnerabilities

$ npx create-vtecx-app tutorial
$ cd tutorial
$ npm install

IDE(Visual Studio Code)でプロジェクトを開き、コンソール内でvte.cxにログイン

VSCodeで上記で作成したプロジェクトを開き、コンソールを表示させてください。コンソールは、「表示>ターミナル」で開けます。
次に、ターミナル上でnpm run loginと実行してください。{サービス名}はvte.cxで作成したサービスを入力し、{アカウント}や｛パスワード}はvte.cxで作成したアカウントとパスワードを入力してください。最後にLogged in.と出てくればログイン成功です。

$ npm run login

> vtecxblank@1.0.0 login /Users/foo/tutorial
> npx vtecxutil login

service:{サービス名}
is production?:n
login:{アカウント}
password:{パスワード}
Logged in.

ソースプログラムの作成

実際にVSCodeを使ってソースプログラムを編集してみましょう。
VSCodeでsrc/components/index.tsxを開いてみてください。
以下のようなReactのコードになっているかと思います。Hello vte.cx!のところを編集して保存してください。

import * as React from 'react'
import * as ReactDOM from 'react-dom'

ReactDOM.render(<div>Hello vte.cx!</div>, document.getElementById('container'))

デプロイコマンドの実行

以下を実行してデプロイを行ってください。
これを実行するとデプロイ対象の複数のファイルがビルドされてサーバに送信されます。
（個別ファイルをデプロイする方法は後ほど説明します）

./deploy.sh

アプリケーションの表示

先程編集したソースプログラムを実行してみましょう。
http://{サービス名}.vte.cx/index.htmlをブラウザで開いてみてください。
Hello vte.cxと表示されましたか？

Hello vte.cx!

ソースプログラムの編集と個別ファイルのデプロイ

先程の./deploy.shコマンドはプロジェクトすべてをデプロイするためのシェルプログラムです。
実際に開発する際は個別にファイルを編集してデプロイすることになります。
そのためのコマンドが以下になります。ターミナルから実行してみてください。

npm run serve:index

すると、ブラウザが自動で起動され、Hello vte.cx!と表示されたかと思います。
これは、Webpack devserverのローカル開発環境が表示されたものです。
次に、VSCodeでsrc/components/index.tsxを編集して保存してください。（Hello vte.cxを他の文字列に変えてみてください)
すると、瞬時にブラウザの表示が変わったかと思います。localhost でホスティングされている内容が変更されているのがわかります。
また、http://{サービス名}.vte.cx/index.htmlをブラウザで開いてみてください。
こちらも同様に変更されているのが確認できます。
つまり、ローカル開発環境では、ローカルとリモート(サーバ）の内容が同時に自動的に更新されるのです。

通常、ローカルでおこなった変更は、ローカルのソースにだけ反映され、サーバ環境は更新しません。サーバ環境のソースも更新したければ、再度デプロイするのが普通のやりかたでしょう。

しかし、vte.cx は、ローカルで変更があった場合、その変更を即座にサーバ環境にも反映させています。これによってフロントとバックエンドの開発をスムーズに進めることができるのです。

今日はここまで。お疲れ様でした。

次回=> vte.cxによるバックエンドを不要にする開発(2.データの登録と取得)