BETA

svelteとsapperでwebアプリを作ってherokuにデプロイする(した)方法

投稿日:2019-06-15
最終更新:2019-06-15

概要

多分これから世を席捲するであろう svelte と sapper を使って web アプリを作り、heroku にデプロイした。
svelte は公式のチュートリアル以外に情報があんまりないので誰かの役に立つことを願ってやり方をメモ。(sapper も情報が少ないけど、どちらも公式ページはしっかりしている)
ここでは細かい説明ではなく heroku デプロイのためにしなければいけないことを書く。

ちなみに自分がデプロイしたアプリは別プロジェクトのためのツールとして作ったものなので、UI はお察し。
プログラミング歴 0 年の新卒が最新のフレームワークを使って爆速ポートフォリオサイトを作ってみた みたいな Qiita のランキングに乗りそうなやつの 100 倍ショボい。
sapper を使いこなせていないからソースもショボいけどツールとしての役目はしっかり果たしているから問題なし。

単語抽出
github

技術

svelte

公式サイト
github
Vue とか React みたいなコンポーネント指向でフロント開発ができるフレームワーク。
でも他のやつと違って、特定の js に依存しない。(Vue で言えば vue.js とか vue-router.js とか vuex.js とかに依存しない)
.svelte ファイルとしてコードを書いた後、ビルドによって単体でクリーンな js が出力される。
リッチハリスさんが主体となって作っている。
router は提供されていないけど store はデフォルトで入っている。
大量のオブジェクトを描画したりするスピードが体感的に速い気がする。
ビルドも速い。
非同期通信を上手く扱う仕組みがイケている。
でも pug と typescript が上手く組み込めない。

sapper

公式サイト
github
これもリッチハリスさんが作っている。
svelte を使って大規模な web アプリを作るためのフレームワーク。
Vue でいうところの Nuxt。
ルーティングはもちろんのこと SSR も対応しているし、service worker も最初から考えて作られている。
SSR ができるから静的サイトのジェネレイト(nuxt generate 的なヤツ)もできる。
いかにパフォーマンスを出すかを主眼に置いて作られているように見える。

heroku

これはいろんなところで沢山説明されているから割愛。
sapper で作ったアプリをデプロイする場所。
ソースコードを github に push すると自動でビルドしてデプロイされるように設定する。

web アプリ作成

sapper のサンプルを手に入れる

sapper の公式ページに従い、

npx degit "sveltejs/sapper-template#rollup" my-app  

でサンプルコードを取得する。
npm がインストールされていれば npx も入っているはず。
my-app の所は適当な名前にする。

#rollup の所を #webpack にすれば、バンドラに webpack が使用される。
でもリッチハリスさんは rollup が好きみたいだから rollup のままでいいと思う。

cd my-app  
npm install  

で依存するパッケージをインストールする。

試しに開発用で起動する

npm run dev  

これで http://localhost:3000 にアクセスしてヒゲのおじさんが出現すれば成功。
あとは svelte と sapper のドキュメントを読みながら開発する。
もちろん hot reload されるので、ソースコードの変更は即座にブラウザに反映される。

heroku 用の設定を追加

heroku に どんなアプリか? 起動コマンドは何か? を教えるため、Procfile というものを作る必要がある。
(作らない場合はデフォルト設定が使われると書いてあったけど作らないと動かなかったから何か別の設定をすれば作らなくもていいかと思われる)
The Procfile

Procfile の中身は簡単で、下記内容のファイルをプロジェクト直下に Procfile という名前で作成する。

web: node __sapper__/build  

このファイルがあることで、heroku が github の push を検知してソースコードを heroku 上でビルドした後、ファイルに記載されたコマンドでアプリが開始されるようになる。
ちなみに heroku は package.json の script に設定した build コマンドを使用してビルドを実行する。
build コマンドは sapper のサンプルに既に設定されているため、特にいじる必要はない。

デプロイ

github にソースコードを置いて heroku に自動デプロイする。
やり方を書こうと思ったけど既にいい記事があった。
heroku 初級編 - GitHub から deploy してみよう -


超簡単に書いておくと、
github にソースコードを置き、heroku 管理画面の Deploy タブで github 連携から該当リポジトリを選択
で完了する。
Settings タブを開けば公開される URL が確認できる。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

あひゃえもんの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう