Zenn
🐶

最近話題の「frourio」を無料でサクッとデプロイする方法（Vercel + Heroku）

2020/12/29に公開
5件
Heroku
TypeScript
Vercel
frourio
tech

はじめに

最近話題の frourio をご存知でしょうか？
TypeScriptフルスタック環境 を一発で作れるフレームワークです。実際に試してみると分かりますが、簡単に環境構築が出来ます。

こんな簡単に作れるなら、試しにアプリを作って外部に公開するとこまでやってみたいですよね。
この記事では、その環境を Vercel と Heroku を利用し、無料でサクッとデプロイする手順を紹介します。

全体構成

全体構成図

デプロイ先としては、フロントエンドは Vercel 、バックエンドは Heroku を選択しました。

選択理由

選択理由としては以下です。今回は "無料でサクッと" がコンセプトなのでポイントと考えています。

  • 基本的に無料で利用可能なこと
  • インフラレイヤを意識せずに簡単なセットアップで利用可能なこと

Vercel と Heroku について

Vercel

https://vercel.com

Vercel は Next.js を開発している Vercel社 のサービスで、Webサイトのホスティング機能やサーバーレス関数など様々な機能を備えています。

Zero Config というだけあり、Vercel社 がメインで開発している Next.js とセットで利用するとSSR、SPA、SSG、ISRのWebフロントエンドを簡単なセットアップで作ることができます。

また、個人利用は基本的に全て無料で利用が可能です。Next.js で実装しているのであれば、利用すべきサービスですね。

Heroku

https://www.heroku.com

Heroku は Salesforce社 のサービスで、 インフラ管理を意識せず Node.js, Ruby, Java, Python等で稼働する、様々なアプリケーションをデプロイすることが可能です。

Heroku Postgres などのSQLデータベースも提供しているので、データの永続化と操作が容易に行えます。

また、制限はありますが無料での利用が可能です。

環境構築

それでは、手順を紹介していきます。

コマンド一発で環境構築

create-frourio-app で楽に環境構築していきます。ご紹介するバージョンは0.28.0になります。

Terminal
$ 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関連ファイルをルートディレクトリに追加します。

Dockerfile
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
docker-compose.yml
version: "3.8"

services:
  app:
    build: .
    ports:
      - "8080:8080"
    depends_on:
      - db
    links:
      - db

  db:
    image: postgres:12
    ports:
      - "5432:5432"

Fastify の設定変更

以下、2点の変更を行います。

  1. ポート番号の変更
    Heroku は動的にポート番号が生成されます。そのため、デフォルトでHerokuの環境に設定されている PORT という環境変数を指定するよう修正します。

  2. アドレスの変更
    こちらcreate-frourio-appでデフォルト0.0.0.0で設定されるようになったので対応不要になりました。
    Fastify はデフォルトでリッスンするホストが127.0.0.1（localhost）になっており、docker環境にそのままデプロイしてもAPIのエンドポイントに接続出来ません。
    それは、ホストのlocalhostとdockerのlocalhostは違うからです。なので別ホストから接続が出来るように 0.0.0.0 でリッスンするよう修正します。

server/service/envValues.ts
※ 修正箇所のみ抜粋
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 に落とす必要がありそうなので、その変更を行います。

server/package.json
※ 修正箇所のみ抜粋
"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 に以下を追加します。

server/prisma/schema.prisma
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
+  shadowDatabaseUrl = env("SHADOW_DATABASE_URL")
}

バックエンドのデプロイ

それでは Heroku にバックエンドをデプロイしていきます。なお、 Heroku のアカウントは開設済みの前提で手順を紹介します。

プロジェクトの作成

以下のコマンドで Heroku にプロジェクトを作成します。
作成後、ターミナルにアプリのURLが表記されるので、どこかにメモっておいてください。後ほど利用します。

Terminal
heroku create <PROJECT_NAME>

リポジトリを Heroku に認識させるために以下のコマンドを実行してください。

Terminal
$ heroku git:remote -a <PROJECT_NAME>

Heroku Postgres をアタッチ

アプリにDBを持たせるために以下のコマンドを実行します。今回は無料で利用したいので、hobby-devのプランを選択しています。development databaseとshadow database用の2つを用意してください。

Terminal
$ heroku addons:create heroku-postgresql:hobby-dev

環境変数をセット

以下のコマンドように環境変数をセットしていきます。

Terminal
$ 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です！

Terminal
$ heroku config

デプロイしてみる

Dockerベースでアプリをデプロイします。

Terminal
$ 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

デプロイしたアプリがブラウザで正しく動作しているかを確認します。

Terminal
$ heroku open

以下が表示されればOKです！

GitHubと連携

master が更新された再ビルドするようにします。まずは Heroku のGUIで Automatic deploys を有効にします。

あとは、Dockerビルドするのに以下の設定ファイルを追加するだけです。簡単ですね！

heroku.yml
build:
  docker:
    web: Dockerfile

フロントエンドのデプロイ

特に理由は無いですが、Vercel はGUIで行ったのでGUIでの方法をご紹介します。なお、 Vercel のアカウントは開設済みの前提で手順を紹介します。

GUIでの設定

まずは、該当のリポジトリを選択します。

この後にビルドコマンドの設定と環境変数を設定します。

BUILD COMMAND 
yarn install --cwd server && yarn build:client

APP_URLは先ほどバックエンドのプロジェクトを作成した時にメモしたURLになります。

環境変数
API_BASE_PATH=/api
API_ORIGIN=<APP_URL>

これでDeployすれば完了です。ブラウザでフロント側のURLにアクセスすると以下のようにアプリが起動しているはずです。お疲れ様でした。

今回紹介したサンプルのソースコードは以下のリポジトリに置いています。

記事投稿時のcreate-frourio-appのバージョン
https://github.com/IshinoJun/sample-frourio-build

create-frourio-appの0.28.0のバージョン
https://github.com/IshinoJun/sample-frourio-build-1.1

デプロイしたアプリは以下になります。
https://sample-frourio-build.vercel.app

さいごに

create-frourio-app した環境のデプロイ手順を紹介しました。
"無料でサクッと" っと言いつつもデプロイ周りの知見が全くなかったのでだいぶ苦戦しましたw
今回紹介したサービスには色々と制限があるので、個人開発したアプリをちょっと試しにデプロイみるかーって時に良いかもですね。皆さんも良かったら試してみてください！

参考記事

Discussion

すばるすばる

Vercel + Heroku やろうとして詰まってました！！！！
ありがとうございます！ありがとうございます！ありがとうございます！

1つだけ気になったのですが、デプロイしてみる の最初に

$ heroku container:login

が必要な気がします。こちらの手違いでしたらごめんなさい。

https://qiita.com/SuguruOoki/items/9a0b4a5a3876ebc9b9fb

JI23JI23

3回もお礼ありがとうございます！ありがとうございます！ありがとうございます！

失礼しました、必要ですね！修正致しました。ご指摘ありがとうございます。
手順作成時は既にHeroku 上の Container Registry にログイン済みだったので抜けておりました。

dTATdTAT

お世話になっております。ちょうどfrourio入門したところだったので大変参考になりました。
ただ現状で同じ手順をためしたのですがいくつか相違点がありましたので共有いたします。

create-frourio-app@0.27.2 | MIT | deps: 25 | versions: 83
Create a frourio project in seconds

まず環境変数名が変更になっているようです。
envValues.tsおよびcreate-frourio-appのdeployヒントいずれもAPP_XXXの接頭辞が追加されているようです。

export {
  API_JWT_SECRET,
  API_USER_ID,
  API_USER_PASS,
  API_SERVER_PORT,
  API_BASE_PATH,
  API_ORIGIN,
  API_UPLOAD_DIR
}

ですので heroku config:set もAPI_をつけたものを設定する必要があります。

またfastifyまわりの設定はserver/index.tsからserver/entrypoints/index.tsに変更になっています。

import { init } from '$/service/app'
import { API_SERVER_PORT } from '$/service/envValues'
init().listen(API_SERVER_PORT, '0.0.0.0')

IPがデフォルトで'0.0.0.0'に指定されるようになったようです。

あとはpackage.json内部のbuild, generateスクリプトが変更になっているので場合によってはDockerfileのCMDを変更する必要があるかもしれません。

以上お役にたてれば幸いです。

JI23JI23

コメントありがとうございます！
yarn create frourio-appで構築される内容が変わった感じですね！
別途、修正致しておきます！

JI23JI23

遅くなりました。create-frourio-app の0.28.0に合わせて記事を修正しておきました。
ご指摘ありがとうございました。