フォーム読み込み中
Chromebook で始めるクラウドネイティブな Web アプリ開発
ソリューションアーキテクト
向山 裕一朗
ソフトバンク入社当初はエンタープライズ向けの営業として直接お客様と対面する業務に従事していました。しかし、お客様とのプロジェクトや社内の業務効率化の取組みの中で開発するスキルが少しずつ伸びはじめ、現在はソリューションアーキテクトとして開発、提案両面で活動をしています。
2023年3月28日掲載
Chromebook は「ChromeOS」を実行する端末です。クラウド中心のコンピューティングに最適化されておりインターネットに接続されている事が前提で、主に Web ブラウザーを使用してオンラインで作業を行います。とても軽量で持ち運びに便利であり、バッテリー寿命も長い為、外出や移動の多い人に向いています。
また、端末価格は安価である事が多いものの、セキュリティアップデートの自動更新やサンドボックスを使用した端末内部でのデータ分離等に対応しており安全性にも優れています。そんな Chromebook を活用してクラウドネイティブなアプリ開発環境を用意しました。本記事では上記の手法やそのメリットについてご紹介します。
- Chromebook でフレキシブルな開発環境を構築できます
- クラウドネイティブな開発に入門することができます
環境
本記事では以下のような環境を利用し、実際に環境構築やクラウド環境へのアプリケーションデプロイを行います。
- Chromebook C1
- ChromeOS 110.0.5481.181（64 ビット）
- Google Cloud
Chromebook で開発するメリット
Chromebook は端末としての性能は高くはない事が多く、パワフルな処理を長時間必要とするような作業には向いていません。よってプログラミングには不向きと捉えられる事がありますが、特徴を活かす事で以下のようなメリットを享受できます。
安価な端末コスト
Chromebook は Windows や Mac と比較して安価な価格で入手する事ができます。また Chromebook 内で提供されるサンドボックスによってデータは分離されています。更に万が一マルウェアにより OS の一部を改ざんされたとしても検出する事が可能で安全性の高い環境を安価に維持する事ができます。
従来、開発に必要な端末スペックや安全な環境を入手する為にはある程度のコストをかける必要がありました。これを Chromebook × クラウドネイティブ な開発環境を採用することで安価に入手する事ができるようになります。
簡単なセットアップ
Chromebook はセットアップが簡単です。Google アカウントを用意し、ログインと簡単な設定を入力する事ですぐに使えるようになります。また、端末の初期化も待ち時間は殆どなく即座に環境を再構築して使い始める事ができます。これにより、案件ごとに開発環境を再構築する事が容易に行えます。また、一時的な人員向けに端末を支給する際にも簡単にセットアップ・初期化が行える為、利用者の移り変わりが早いケースでも対応する事ができます。
持ち運びに優れる
Chromebook は端末重量が軽い事が多く、また、バッテリーのみでも長時間稼働する事ができます。性能の高いノートパソコン等は持ち運びに適さない事が多く、重量がある、バッテリーがすぐに切れてしまう等の問題があります。画面サイズを必要とする場合は外付けディスプレイを必要としますが、Chromebook 単体であれば身軽に移動し、テレワークやサテライトオフィスでフレキシブルに働くことができます。
業務環境と開発環境の分離
Chromebook には Linux IDE という機能があります。これを有効化する事で端末内で仮想的に Linux 環境を起動させる事ができます。ChromeOS の環境から 仮想 Linux 環境は分離されており、例えば Gmail や Google Drive、ChromeOS 側のローカルファイルの保管先と異なる領域で管理されます。高度な端末管理製品を導入しなくとも ChromeOS 標準の機能でデータを安全に保護する事ができます。
Chromebook 上での開発例
今回は開発したアプリケーションをコンテナ形式へビルドし、指定したコンテナレジストリへ格納、そのコンテナを Google Cloud Run へデプロイするパターンを例にご紹介します。
開発例 1
構成イメージ
なるべく費用をかけずに安価に利用できるパターンをご紹介します。開発を Google Cloud Shell 内で行い、Google Cloud Build でテストとビルドを実施した後、Google Cloud Run へデプロイしアプリケーションを公開します。
必要なコスト
今回利用する Google Cloud サービスには全て無料枠が存在します。枠内に収まる場合は費用をかけずに試すことができます。最新の無料枠の情報は以下リンクを参照下さい。本記事では無料枠に収まる想定とします。（2023 年 3 月 6 日調査時点）
- Google Cloud Shell
- 週 50 時間迄
- 5GB の永続ディスク
- Google Cloud Build
- 1 日あたり 120 分
- Google Cloud Run
- 1 ヵ月あたり 200 万リクエスト
- 1 ヵ月あたり 360,000 GB 秒のメモリ、180,000 vCPU 秒のコンピューティング時間
- 1 ヵ月あたり 1 GB の北米からの下り（外向き）ネットワーク
ポイント
- Cloud Shell や Cloud Build を活用してビルド時の性能不足を解消
- Cloud Build にてビルド後、シームレスにデプロイを自動実行
- 開発環境をクラウドに置く事で、端末が変わってもスムーズに作業を再開
環境構築方法
以下より本パターンにおける環境構築方法をハンズオン形式にてご紹介します。
Chromebook で Linux 開発環境の有効化
Chromebook 上の Linux はデフォルトで OFF になっています。以下の手順で有効化致します。
- Chromebook で右下の時刻を選択します
- [設定] ＞ [詳細設定] ＞ [デベロッパー] を選択します
- [Linux 開発環境] の横の [オンにする] を選択します
- 画面上の手順に沿って操作します
- ターミナル ウィンドウが開きます
Linux 開発環境へソフトウェアのインストール
Visual Studio Code （Download Link）
Chromebook Linux 開発環境は Debian の為、ダウンロードサイトより `.deb` 形式のインストーラーをダウンロードします。端末の CPU によって x64, Arm32, Arm64 より適切なインストーラーを選択しましょう。もし、利用中の端末の CPU 詳細が分からない場合は Chrome を開き、 `chrome://system` へアクセスする事でシステム情報を取得することができます。
※ インストーラーは Linux 開発環境側にダウンロードしなければならないことに注意しましょう。[ランチャー] から [ファイル] を起動すると、サイドバー に [Linux ファイル] と表示されています。
fcitx-mozc （Download Link）
Chromebook の Linux 開発環境は デフォルトでは日本語の入力ができません。Mozc をインストールすることで日本語にも対応することができます。Mozc は マルチプラットフォーム向けに設計されたオープンソースの IME となります。以下にインストール方法を掲載します。
1. Google Chrome 上で Linux 開発環境を起動し、shell で以下の通りに実行します。
# Shell
# install & setup
sudo apt-get update
sudo apt-get install fcitx-mozc -y
echo 'fcitx > /dev/null 2>&1' >> ~/.profile
# start application
fcitx-configtool
2. インストールが完了したら Chromebook の ランチャー を起動し、アプリ一覧を開きます。アプリ一覧に [Fcitx] というアイコンが追加されていれば、これを開きます。
3. デフォルトで以下の画面が立ち上がります。[Keyboard - English（US）] を選択し、画面左下の [ー] アイコンをクリックして削除します。
4. [＋] アイコンをクリックし、追加する言語の一覧が表示されたら、[Only Show Current Language] のチェックボックスを外し、[Search Input Method] 欄へ [Mozc] と入力します。表示された [Mozc] を選択して、[OK] を押します。
上記にて設定完了です。Visual Studio Code を起動し日本語入力が可能か確認します。
gcloud CLI （Download Link）
Google Cloud Shell へ SSH 接続する為に gcloud CLI をインストールします。ダウンロードが完了したら、以下の手順を進めます。
1. 認証
# Shell
gcloud auth login
2. SSH 接続情報の作成
以下の操作により Cloud Shell に接続されます。後ほど利用する為、Cloud Shell 接続時に表示されているユーザー ID をメモしておきます。接続後 Chromebook 側に戻りフォルダ `~/.ssh`に`google_compute_engine` `google_compute_engine.pub` が生成されている事を確認します。
# Shell
gcloud cloud-shell ssh
3. SSH Config の編集
`~/.ssh/config` へ以下の設定を追加します。
# Shell
chmod 700 ~/.ssh
cat << EOF > config
Host gcloudshell
ProxyCommand gcloud cloud-shell ssh --ssh-flag='-W localhost:22'
User ${2の手順でメモしたユーザーID}
IdentityFile ~/.ssh/google_compute_engine
StrictHostKeyChecking no
EOF
4. 正しく設定されているか確認します。
# Shell
ssh gcloudshell
5. Visual Studio Code へ Remote - SSH のセットアップ（Download Link）
Visual Studio Code 側に戻り、拡張機能 Remote - SSH をインストールします。この拡張機能により `~/.ssh/config` を Remote - SSH が読み取って、 Visual Studio Code を Cloud Shell に連携する事ができます。インストールが完了すると Visual Studio Code サイドバー に Remote - SSH が追加されます。これを開くと追加した Cloud Shell の Config の情報が表示され、Visual Studio Code と Cloud Shell を連携する事ができるようになります。
補足
Google Cloud Shell には Web IDE も用意されています。IDE に特段こだわりが無い場合は利用してみましょう。Cloud Shell 上でポート解放し、アプリケーションをプレビューする事もできます。
サンプルアプリケーションの用意
本記事では Web アプリケーション開発として node.js の簡易な Express アプリケーションを用意します。 Visual Studio Code を Cloud Shell へ接続し、Cloud Shell 環境上で以下の通り実行します。
※ 本作業を行う前に Google Cloud 管理コンソール上にて Artifact Registry, Cloud Build, Cloud Run を有効化してください。
※ 最後の build.yaml ファイルの作成箇所へ、ご自身のプロジェクト ID に書き換えの上、以下をコンソールへ貼り付けを行ってください。
# Shell
mkdir -p ~/sample/app
cd ~/sample/app
git init
# setup
npm init -y
npm install --save express
# create files
cat <<EOF > server.js
const express = require('express')
const app = express()
const port = 3001
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
EOF
cat <<EOF > Dockerfile
FROM node
COPY . /app
WORKDIR /app
EXPOSE 3001
RUN npm ci
CMD [ "node", "server.js" ]
EOF
# 以下 ${} 内はご利用の環境の情報の置き換えください。
cat <<EOF > build.yaml
steps:
- name: 'gcr.io/cloud-builders/docker'
args: ['build', '-t', 'us-west2-docker.pkg.dev/${ご利用の google cloud project id}/app/sample:latest', '.']
- name: 'gcr.io/cloud-builders/docker'
args: ['push', 'us-west2-docker.pkg.dev/${Google Cloud Project ID を入力します}/app/sample:latest']
- name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
entrypoint: gcloud
args: ['run', 'deploy', 'sample', '--image', 'us-west2-docker.pkg.dev/${Google Cloud Project ID を入力します}/app/sample:latest', '--allow-unauthenticated', '--region', 'us-west2']
images:
- us-west2-docker.pkg.dev/${Google Cloud Project ID を入力します}/app/sample:latest
EOF
Google Artifact Repositories のセットアップ
コンテナの保管先を作成します。
# Shell
# gcloud cli の接続プロジェクト指定
gcloud auth login
gcloud config set project ${Google Cloud Project ID を入力します}
# artifacts repositories へ docker レジストリの作成
gcloud artifacts repositories create app --repository-format=docker \
--location=us-west2 --description="Docker repository"
Google Cloud Build のセットアップ
Cloud Build でのビルド設定を進めていきます。まずは、事前に Cloud Build の管理コンソールへアクセスし、Cloud Run 管理者 のステータスを "無効" から "有効にする" へ変更します。
以下コマンドを実行し、 Cloud Build でのビルドと Cloud Run へのデプロイを開始します。
# Shell
gcloud builds submit \
--region=us-west2 --config \
build.yaml
この操作の後、問題がなければ Google Cloud Run にてアプリケーションが実行されます。このように Cloud Shell にて開発を行いつつ、重たい処理であるビルド等を Cloud Build で実施、かつ Cloud Run へのデプロイを自動化することができます。Cloud Build は今回簡易なコードで作成しましたが、ビルドの前にテストコマンドを追加することでビルド前に自動的に検証を行うこともできます。 build.yaml を作り込んでいき、快適な CI/CD を実現しましょう。
開発例 2
構成イメージ
必要なコスト
構成例 1 にて利用した Google Cloud Build と Google Cloud Run は、構成例 2 でも利用します。以下に発生するコスト例として記載します。（2023 年 3 月 6 日調査時点）
- 前提
- 4 vCPU, 16 GB RAM, 100 GB 永続ディスクの e2-standard-4 を使用
- 1 日 9 時間 × 22 営業日 = 198 時間 /月 利用した時
- 毎月の利用料想定
- コンピューティング $0.32 /時間 × 198 時間 = $63 /月
- 管理手数料 $0.05 /時間 × 198 時間 = $10 /月
- コントロールプレーン $0.2 /時間 × 198 時間 = $37 /月
- 永続ディスク $0.1 /GB × 100 GB = $10 /月
- 合計 $63 + $10 + $37 + $10 = $120 /月
Google Cloud Build （無料枠内とする）
- 1 日あたり 120 分
Google Cloud Run （無料枠内とする）
- 1 ヵ月あたり 200 万リクエスト
- 1 ヵ月あたり 360,000 GB 秒のメモリ、180,000 vCPU 秒のコンピューティング時間
- 1 ヵ月あたり 1 GB の北米からの下り（外向き）ネットワーク
※ 2023 年 3 月 6 日調査時点では Google Cloud Workstations はプレビュー版であり、プレビュー期間中は 管理手数料とコントロール プレーンの料金は請求されません。
Cloud Workstations のセットアップ
Cloud Workstations の管理コンソールにアクセスしましょう。以下のような画面が表示されたら、「CREATE CONFIGURATION」を選択し、クラスタの構築を進めます。
設定値は以下のように入力します。入力が終わったら `作成` を押します。
- 名前：任意のラベル名
- Cluster： 作業を行うクラスタ。今回は新規作成
- Quick Start workstations：クラスターを常時起動とするか否か。今回は Disabled
作成が完了すると以下の画面に遷移します。表示されている構成を右にスライドします。
一番右に表示されているメニューアイコンを選択し、表示されたリストから「＋ Create Workstation」を選択します。
ワークステーションの作成を進めます。以下の通り入力し、`作成`を選択します。
- 名前： 任意のラベル名
- Configuration：前段の操作で作成した Configuration を指定
操作が完了すると以下のような画面に遷移します。作成時点ではサーバーは停止となっているため、`START`と表示されたボタンを選択します。起動まで数分時間がかかる為、完了するまで待機します。起動が完了すると`START`と表示されていたボタンが`LAUNCH`という表示に変わります。変わり次第これを選択しましょう。選択すると Web エディター が起動します。
以下はアクセスした際の Web エディターになります。 Visual Studio Code と同じ UI にて利用する事ができ、また、拡張機能のタブを開けば Visual Studio Code 向けに公開されている拡張機能を利用する事もできます。Chromebook と Cloud Workstations を活用し、どこでも快適に開発できる環境を手に入れましょう。
ポイント
- Cloud Workstations は構成例 1 に比べて開発環境のスペックを選択する事が可能
- Cloud Workstations はローカルの お好みの IDE やエディター と接続可能
- Cloud Shell 上では十分な開発ができなくなった際に Cloud Workstations へ移行する
まとめ
クラウド環境を活用する事で Chromebook のメリットを享受しつつ、開発を行なっていく事ができます。パワフルなリソースを必要とするようなケースや、ネイティブアプリ開発を行うケースでは従来通りの環境の方が適切ではありますが、もしメリットにマッチするケースは是非 Chromebook の活用もお試しください。
また、ソフトバンクではクラウドネイティブな開発を支援する「クラウドネイティブアプリケーションプラットフォーム（CNAP）」という製品を提供しています。もし開発しているアプリケーションの規模が大きくなってきたり、Kubernetes への移行を検討されるようなケースがありましたら是非ご検討いただければ嬉しいです。
以上、Chromebook で始めるクラウドネイティブな Web アプリ開発 の紹介となりました。
※ Docker and the Docker logo are trademarks or registered trademarks of Docker, Inc. in the United States and/or other countries. Docker, Inc. and other parties may also have trademark rights in other terms used herein.
関連サービス
クラウドネイティブ・アプリケーションプラットフォーム（CNAP）
ソフトバンクはAWS アドバンストティアサービスパートナーです。「はじめてのAWS導入」から大規模なサービス基盤や基幹システムの構築まで、お客さまのご要望にあわせて最適なAWS環境の導入を支援します。
Google Cloud
Google サービスを支える、信頼性に富んだクラウドサービスです。お客さまのニーズにあわせて利用可能なコンピューティングサービスに始まり、データから価値を導き出す情報分析や、最先端の機械学習技術が搭載されています。
MSPサービス
MSP（Managed Service Provider）サービスは、お客さまのパブリッククラウドの導入から運用までをトータルでご提供するマネージドサービスです。
＼ 業務課題をデジタルで支援 ／
デジタルツールの選定から導入の手引きまで、中小規模のお客さまへわかりやすくお伝えします。
メールマガジン登録（無料）
ビジネスに役立つ記事やウェビナー情報をお届けします。
おすすめの記事
条件に該当するページがございません
