Zenn
🦕

Deno x React の Aleph.js を触ってみる & Vercelにデプロイしてみる

2021/04/03に公開
React
Deno
Vercel
Aleph.js
tech

はじめに

タイトル通りのやってみた系の記事なのですが、まず簡単に利用している技術の紹介です！

https://alephjs.org/

  • Vercel ... 静的サイト/サーバレス機能のホスティングサービスプラットフォーム
    • ご存知の通りNextjsをも開発/サポートしている会社が提供しています
    • そのためNextjsと親和性が高く、Aleph.jsもVercelに対してデプロイが可能です

https://vercel.com/

Aleph.jsを触ってみる

セットアップ

Denoさえ入れていれば、Aleph.jsを動かすことができます。
ただしalpha版ということもあり、バージョン設定によっては正しく動作しないことがあります...
(今回は自分がアプリ生成->デプロイまでできたバージョンを記載します)

aleph.js 0.3.0-alpha.22
deno 1.8.2

インストールコマンド

Denoは任意の方法でダウンロードした上で、下記を実行。

deno upgrade --version
deno install --unstable -A -f -n aleph https://deno.land/x/aleph@v0.3.0-alpha.22/cli.ts

ref: Get Started - Aleph.js

サンプルアプリ生成

# cd /path/to/<your_project>
aleph init .
aleph dev

下記のようなカウンターアプリがすぐ作れます。
こちらをGithubリポジトリにPushしておいてください。

※ SSGもできます

aleph build
# npm exec serve -s ./dist

Vercelにデプロイしてみる

作ったカウンターアプリをVercelにデプロイしてみます。
ref: Deployment - Aleph.js

事前準備として、Vercelにログインをし、Githubの連携をしておきます。
ref: Vercelへnext.js使用フロントエンドアプリをデプロイしてみたら楽すぎた。

  1. Dashboardより "New Project" -> "Import Git Repository" でサンプルアプリをプッシュしたリポジトリを選択します

※ "Import Project"でのディレクトリ設定は、デフォルト(リポジトリのルートディレクトリ)のまま"Continue"とすること

  1. "Import Project"にて、設定を行う

”Build and Output Settings”を開き、下記の通り入力をする

  • BUILD COMMAND
    • curl -fsSL https://deno.land/x/install/install.sh | sh -s v1.8.2 && /vercel/.deno/bin/deno run -A https://deno.land/x/aleph@v0.3.0-alpha.22/cli.ts build
  • OUTPUT DIRECTORY
    • dist

その他はデフォルトで問題なし
("PROJECT NAME"は任意で、"FRAMEWORK PRESET"はOtherでよい)

(Default) After change
  1. "Deploy"をクリックする

下記のようにビルド/デプロイ経過が表示され、完了するとデプロイ完了画面が表示されます。

00:36:44.733  	Cloning github.com/linnefromice/... (Branch: main, Commit: 617c5b8)
00:36:45.282  	Cloning completed: 548.237ms
00:36:45.304  	Analyzing source code...
00:36:46.981  	Installing build runtime...
...
00:37:03.461  	Deno was installed successfully to /vercel/.deno/bin/deno
00:37:03.462  	Manually add the directory to your $HOME/.bash_profile (or similar)
00:37:03.462  	  export DENO_INSTALL="/vercel/.deno"
00:37:03.462  	  export PATH="$DENO_INSTALL/bin:$PATH"
00:37:03.462  	Run '/vercel/.deno/bin/deno --help' to get started
00:37:03.479  	Download https://deno.land/x/aleph@v0.3.0-alpha.22/cli.ts
...
00:37:30.759  	INFO - bundle
00:37:32.492  	INFO   {} polyfill.js (ES2015) • 9KB
00:37:34.569  	INFO   {} deps.js • 152KB
00:37:34.581  	INFO   {} shared.js • 431B
00:37:34.645  	INFO   {} /pages/index.js • 5KB
00:37:34.645  	INFO   {} main.js • 385B
00:37:34.647  	INFO - Pages (SSG)
00:37:34.670  	INFO   ○ / • 5KB
00:37:34.679  	INFO - Public Assets
00:37:34.679  	INFO   ∆ /logo.svg • 874B
00:37:34.679  	INFO Done in 14065ms
00:37:35.809  	Uploading build outputs...
00:37:45.628  	Build completed. Populating build cache...
...

  1. デプロイ完了画面の"Visit"をクリックする
    • Deployされたカウンターアプリにアクセスできます！

本記事でデプロイしたアプリはこちらでアクセスできます。
https://alephjs-counter-app.vercel.app/

おわりに

Aleph.js自体はCurrently in alpha, not ready for production.なので、本番利用は難しいですが、Vercelを利用したデプロイはさくっとできたので、ブログ/ポートフォリオなど個人製作で(少し遊ぶ気持ちで)使ってみるのはいいかもしれません。

本記事で少しでも興味を持ってもらえたらと思います！
※ サンプルも少し別の種類があったりします(mdファイルを使っているものetc)
aleph.js/examples at master · alephjs/aleph.js

Discussion