最近話題の「frourio」を無料でサクッとデプロイする方法(Vercel + Heroku)
はじめに
最近話題の frourio をご存知でしょうか?
TypeScriptフルスタック環境 を一発で作れるフレームワークです。実際に試してみると分かりますが、簡単に環境構築が出来ます。
こんな簡単に作れるなら、試しにアプリを作って外部に公開するとこまでやってみたいですよね。
この記事では、その環境を Vercel と Heroku を利用し、無料でサクッとデプロイする手順を紹介します。
全体構成
デプロイ先としては、フロントエンドは Vercel 、バックエンドは Heroku を選択しました。
選択理由
選択理由としては以下です。今回は "無料でサクッと" がコンセプトなのでポイントと考えています。
- 基本的に無料で利用可能なこと
- インフラレイヤを意識せずに簡単なセットアップで利用可能なこと
Vercel と Heroku について
Vercel
Vercel は Next.js を開発している Vercel社 のサービスで、Webサイトのホスティング機能やサーバーレス関数など様々な機能を備えています。
Zero Config というだけあり、Vercel社 がメインで開発している Next.js とセットで利用するとSSR、SPA、SSG、ISRのWebフロントエンドを簡単なセットアップで作ることができます。
また、個人利用は基本的に全て無料で利用が可能です。Next.js で実装しているのであれば、利用すべきサービスですね。
Heroku
Heroku は Salesforce社 のサービスで、 インフラ管理を意識せず Node.js, Ruby, Java, Python等で稼働する、様々なアプリケーションをデプロイすることが可能です。
Heroku Postgres などのSQLデータベースも提供しているので、データの永続化と操作が容易に行えます。
また、制限はありますが無料での利用が可能です。
環境構築
それでは、手順を紹介していきます。
コマンド一発で環境構築
create-frourio-app で楽に環境構築していきます。ご紹介するバージョンは0.28.0
になります。
$ yarn create frourio-app
そうすると http://localhost:3000
が立ち上がり、以下のような設定を求められるのでポチポチ入力していきます。細かい説明はここでは省きますが、frourio の開発者が詳しく説明してくれているこの記事を読むと良いでしょう。
なお、今回紹介する手順は以下の構成になります。
- Server engine :
Fastify (5x faster)
- Client framework :
Next.js (React)
- Building mode :
Static (export)
- HTTP client of aspida :
axios
- React Hooks for data fetching :
SWR
- Daemon process manager :
None
- O/R mapping tool :
Prisma (recommended)
- Database type of Prisma :
PostgreSQL
- Skip DB connection checks :
No
- Testing framework :
Jest
- Package manager :
Yarn
- CI config :
None
- API server hosting :
None
- Static hosting service :
Vercel
これで数分待つと環境が出来上がります!とても簡単ですね。
ただ、このままではデプロイしても動作しません。細かな設定を変えていきます。
Dockerファイルの用意
今回は Heroku にDockerベースでデプロイするので、以下のDocker関連ファイルをルートディレクトリに追加します。
FROM node:12.18.0
RUN mkdir /src
RUN mkdir /src/server
WORKDIR /src
COPY /server/package.json /server/yarn.lock ./server/
RUN yarn install --cwd ./server
COPY . .
EXPOSE 8080
CMD yarn migrate:dev && yarn generate:server && yarn build:server && yarn start:server
version: "3.8"
services:
app:
build: .
ports:
- "8080:8080"
depends_on:
- db
links:
- db
db:
image: postgres:12
ports:
- "5432:5432"
Fastify の設定変更
以下、2点の変更を行います。
-
ポート番号の変更
Heroku は動的にポート番号が生成されます。そのため、デフォルトでHerokuの環境に設定されているPORT
という環境変数を指定するよう修正します。 -
アドレスの変更
こちらcreate-frourio-appでデフォルト0.0.0.0
で設定されるようになったので対応不要になりました。
Fastify はデフォルトでリッスンするホストが127.0.0.1(localhost)
になっており、docker環境にそのままデプロイしてもAPIのエンドポイントに接続出来ません。
それは、ホストのlocalhostとdockerのlocalhostは違うからです。なので別ホストから接続が出来るように0.0.0.0
でリッスンするよう修正します。
※ 修正箇所のみ抜粋
const SERVER_PORT = process.env.PORT ?? process.env.API_SERVER_PORT ?? '8080'
export {
SERVER_PORT
}
Prisma のバージョン変更
本日時点(2020/12/29)で Prisma は クラウドベースのデータベース(Herokuなど)にMigrateするとshadow database の作成が出来ずエラーが発生します。こちらのissueでサポートを検討しているようですが、現時点では Prisma のバージョンを 2.12.0 に落とす必要がありそうなので、その変更を行います。
※ 修正箇所のみ抜粋
"scripts": {
"migrate:dev": "prisma migrate save --experimental && prisma migrate up --experimental"
},
"dependencies": {
"@prisma/client": "2.12.0"
},
"devDependencies": {
"@prisma/cli": "2.12.0"
}
こちらの不具合ですが、2.17.0で解決されました🎉
development databaseとは別にもう一つshadow databaseを追加で指定することで解決します。そのため、schema.prisma
に以下を追加します。
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
+ shadowDatabaseUrl = env("SHADOW_DATABASE_URL")
}
バックエンドのデプロイ
それでは Heroku にバックエンドをデプロイしていきます。なお、 Heroku のアカウントは開設済みの前提で手順を紹介します。
プロジェクトの作成
以下のコマンドで Heroku にプロジェクトを作成します。
作成後、ターミナルにアプリのURLが表記されるので、どこかにメモっておいてください。後ほど利用します。
heroku create <PROJECT_NAME>
リポジトリを Heroku に認識させるために以下のコマンドを実行してください。
$ heroku git:remote -a <PROJECT_NAME>
Heroku Postgres をアタッチ
アプリにDBを持たせるために以下のコマンドを実行します。今回は無料で利用したいので、hobby-dev
のプランを選択しています。development databaseとshadow database用の2つを用意してください。
$ heroku addons:create heroku-postgresql:hobby-dev
環境変数をセット
以下のコマンドように環境変数をセットしていきます。
$ heroku config:set ENV_VAR_NAME="value"
今回は以下を追加しています。APP_URL
は先ほどプロジェクト作成した時にメモしたURLになります。
DATABASE_URL
とSHADOW_DATABASE_URL
は GUI のResources > 該当のDB > Settings > Database Credentials > View Credentials
のURI
になります。
DATABASE_URL=<DATABASE_URL>
SHADOW_DATABASE_URL=<DATABASE_URL>
API_JWT_SECRET=supersecret
API_USER_ID=id
API_USER_PASS=pass
API_BASE_PATH=/api
API_UPLOAD_DIR=upload
API_ORIGIN=<APP_URL>
以下のコマンドで正しく環境変数がセットされていることを確認出来たらOKです!
$ heroku config
デプロイしてみる
Dockerベースでアプリをデプロイします。
$ heroku container:login
$ heroku container:push web
$ heroku container:release web
ビルドに少々時間がかかるのでログでも状況を確認をします。
heroku logs --tail
以下のようなログが表示されればOKです!
2020-12-28T11:06:02.566450+00:00 heroku[web.1]: State changed from starting to up
デプロイしたアプリがブラウザで正しく動作しているかを確認します。
$ heroku open
以下が表示されればOKです!
GitHubと連携
master
が更新された再ビルドするようにします。まずは Heroku のGUIで Automatic deploys
を有効にします。
あとは、Dockerビルドするのに以下の設定ファイルを追加するだけです。簡単ですね!
build:
docker:
web: Dockerfile
フロントエンドのデプロイ
特に理由は無いですが、Vercel はGUIで行ったのでGUIでの方法をご紹介します。なお、 Vercel のアカウントは開設済みの前提で手順を紹介します。
GUIでの設定
まずは、該当のリポジトリを選択します。
この後にビルドコマンドの設定と環境変数を設定します。
yarn install --cwd server && yarn build:client
APP_URL
は先ほどバックエンドのプロジェクトを作成した時にメモしたURLになります。
API_BASE_PATH=/api
API_ORIGIN=<APP_URL>
これでDeploy
すれば完了です。ブラウザでフロント側のURLにアクセスすると以下のようにアプリが起動しているはずです。お疲れ様でした。
今回紹介したサンプルのソースコードは以下のリポジトリに置いています。
記事投稿時のcreate-frourio-appのバージョン
create-frourio-appの0.28.0
のバージョン
デプロイしたアプリは以下になります。
さいごに
create-frourio-app した環境のデプロイ手順を紹介しました。
"無料でサクッと" っと言いつつもデプロイ周りの知見が全くなかったのでだいぶ苦戦しましたw
今回紹介したサービスには色々と制限があるので、個人開発したアプリをちょっと試しにデプロイみるかーって時に良いかもですね。皆さんも良かったら試してみてください!
Discussion
Vercel + Heroku やろうとして詰まってました!!!!
ありがとうございます!ありがとうございます!ありがとうございます!
1つだけ気になったのですが、デプロイしてみる の最初に
が必要な気がします。こちらの手違いでしたらごめんなさい。
3回もお礼ありがとうございます!ありがとうございます!ありがとうございます!
失礼しました、必要ですね!修正致しました。ご指摘ありがとうございます。
手順作成時は既にHeroku 上の Container Registry にログイン済みだったので抜けておりました。
お世話になっております。ちょうどfrourio入門したところだったので大変参考になりました。
ただ現状で同じ手順をためしたのですがいくつか相違点がありましたので共有いたします。
まず環境変数名が変更になっているようです。
envValues.tsおよびcreate-frourio-appのdeployヒントいずれもAPP_XXXの接頭辞が追加されているようです。
ですので heroku config:set もAPI_をつけたものを設定する必要があります。
またfastifyまわりの設定はserver/index.tsからserver/entrypoints/index.tsに変更になっています。
IPがデフォルトで'0.0.0.0'に指定されるようになったようです。
あとはpackage.json内部のbuild, generateスクリプトが変更になっているので場合によってはDockerfileのCMDを変更する必要があるかもしれません。
以上お役にたてれば幸いです。
コメントありがとうございます!
yarn create frourio-app
で構築される内容が変わった感じですね!別途、修正致しておきます!
遅くなりました。create-frourio-app の0.28.0に合わせて記事を修正しておきました。
ご指摘ありがとうございました。