Svelteで何かデプロイしたい時には。
普段、バックエンドに引きこもっているデータエンジニアだが、たまにはフロントエンドに出ていってみようかと思い、最速JSに近しい存在という爆速(=>死語?)なSvelteいじって三日目。そろそろ(無料で)デプロイなるものをしてみたい今日このごろ。
...ということで、nodejs系を始めいろいろと無料でお気楽にデプロイできそうなZeit NOWを試してみた。
参考 Now でクラウドの複雑さから解放されよう、今すぐに
github(かgitlabなど)の個人アカウントを持っているならば、たしかに、すぐさまデプロイできたのでメモを残しておく。Zeit now初体験だったが、10分ほどでデプロイをできた。
デプロイしたもの(カス):
アクセス先:
https://svelte1.now.sh
・・・デプロイしたものは、Svelteの公式チュートリアルの一部を改悪しただけのカス。
SvelteをNOWにデプロイする手法(2020年版)
① NOW用Svelteをfolk
『zeit svelte』でググると出てくる以下から、
https://zeit.co/guides/deploying-svelte-with-zeit-now
自分が使っているgitリポジトリのアカウントを選ぶだけ。githubの場合
https://zeit.co/import/git?tab=github
あとは、SSOの認証を行うとディフォルトでprivateリポジトリにfolkしてくれる。
公開すると恥ずかしいサービスを作りたいとか、一山当てたいサービスを作りたい際には、privateリポジトリがディフォルトなのはありがたい限り。
② NOW用Svelteをcloneして編集
folkたら当然、git cloneの類を持ってきて編集することになる。
フォルダ構成は以下の通り。ほぼSvelteのフォルダ構成通りだが.nowフォルダ配下がZeit NOWとの周りの調整を担ってくれているらしい。
とりあえず、お試ししたい場合は、↑のApp.svelteを編集する。今回の場合。
<script>letcount=1$:doubled=count*2$:tripled=count*3lethandleClick=()=>{count=tripled+3}</script>
<style>p{color:purple;font-family:'Comic Sans MS',cursive;font-size:2em;}</style>
<main><h1>滑る手おぢさん(仮)。</h1>
<h2><ahref="https://zeit.co/docs"target="_blank"rel="noreferrer noopener">ZEITNow</a>
でSvelteしてみる。突然だが、おい、オマイラ、掛け算という奴をしてみないか。すごく大きくなるぞ。</h2>
<br/><p>元の数{count}しかして、け奴の×2は、{doubled}然らば、×3{tripled}。けだし大きな数なり。</p>
<buttonon:click={handleClick}>クリックしてみて。只今の元の数:{count}</button>
</main>
③ デプロイ
node/npm入っている人ならば、ひとまず、npm i -g now
した後に、メール認証などを済ませた後は、
編集しているフォルダにて、now --prod
するだけで、git add/git commit / git push、そしてNOWを介して本番デプロイという手順を一気に済ませられる。
セキュリティ云々を考えないなら、ほんとにお気軽。
終わりに
少なくとも個人開発でのnodejsでの開発工程ならば、Zeit NOWは現時点では文句なしの存在ということを確認した。Svelteのバックエンドは数十分で始めた、Svelte+Firebaseのアプリ生活。で、firebaseが良さげと分かっている。
フロントエンド素人として悩ましいのが、node上でSvelteを動かす方法。絶賛開発中のSapperを試してはみたが、(英語でも)文書がなさすぎて素人にはつらすぎる(セキュリティ云々を気にするとfirebaseをバックエンドにしたアプリを公開できるは先になりそう、、)。
どなたかSvelte/Sapperのベストプラクティスを紹介してくださらぬものかのぅ.(コーダー老人的堕ち)。とりあえず、Svelteお試しする分には楽しいので良しとするが。