「Now」の記事 - Crieit

Vercel（元ZeitのNow）でNuxt.jsアプリをデプロイ 2020年最新版

2020-04-27T23:20:13+09:00

now というコマンドを使わないVercel（元ZeitのNow）へのデプロイ方法を解説します。今回の手順ではNuxt.jsを使います。

背景

now というコマンドで簡単にデプロイできるということで一世を風靡したZeitのNowですが、先日Vercelというサービス名に変更されました。その前からちょこちょこ新たな機能をリリースしており、nowというコマンドを使わなくてもGitHub連携によってpushするだけでデプロイできるようになったり、環境変数も独自のsecretsという設定を使わず、管理画面で設定できるようになったりと、かなり手軽になってきているので実際にそれらを使ったデプロイ方法を説明します。

Nuxt.jsアプリを作成

まずはNuxt.jsのアプリケーションを作成します。

npx create-nuxt-app nuxt-vercel-sample
# or
yarn create nuxt-app nuxt-vercel-sample

いくつか設定項目が現れるため下記のように設定しました。適当です。

✨  Generating Nuxt.js project in nuxt-vercel-sample
? Project name nuxt-vercel-sample
? Project description My astonishing Nuxt.js project
? Author name dala00
? Choose programming language TypeScript
? Choose the package manager Yarn
? Choose UI framework Buefy
? Choose custom server framework None (Recommended)
? Choose the runtime for TypeScript Default
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support, DotEnv
? Choose linting tools (Press  to select,  to toggle all,  to invert selection)
? Choose test framework Jest
? Choose rendering mode Universal (SSR)
? Choose development tools (Press  to select,  to toggle all,  to invert selection)

あとは出力されるメッセージの通り、下記のようにして実行できます。

cd nuxt-vercel-sample yarn dev

見た目は利用しているUIフレームワークによって変わります。

GitHubへ登録

今回はnowコマンドは一切使わずGitHub連携でデプロイを行います。ですのでまずはいま作成したアプリケーションをGitHubに登録します。その前にとりあえずcommitしておきます。git initだけは勝手にやってくれています。

git add . git commit -m "Initial commit"

VSCode等でやってもよいでしょう。

まずは適当にGitHubでリポジトリを作成します。

表示されているとおりに設定してpushします（SSHキーの登録などは事前に行っておいてください）。

Vercelにデプロイする

続いてVercel側に今pushしたものをデプロイします。……がその前に、Nuxt.jsをVercelで使うための @nuxtjs/now-builder というものがNuxt.js公式から用意されていますので、それをnow.jsonに設定します。

{ "version": 2, "builds": [ { "src": "nuxt.config.js", "use": "@nuxtjs/now-builder", "config": {} } ] }

これをcommit & pushしておきましょう。

続いてVercelのダッシュボードにImport Projectボタンがあるためそちらをクリックします。

From Git Repositoryを選択します。

Importボタンをクリックします。

プロジェクトの選択画面が開きますので適宜選択します。僕の場合は個別に権限を与えたものだけ選択できるようにしているため、同様の場合は下記のようにEdit your repository access settings on GitHub.を実行してGitHub側で権限を与えてから選択します。

選択できたらSelectしてImportを実行です。プロジェクト名の入力画面が開くので入力してContinueします。

引き続きROOT DIRECTORYやBUILD COMMANDの設定画面なども開きますが、Nuxt.jsアプリケーションの場合は一切何も設定しなくてもデプロイが可能のためひたすらContinueして最後のDeployボタンを押せば完了です（さきほどのnow.jsonの設定が抜けているとビルドに失敗します）。

Buildingステータスになっているのでしばし待ちます。

Readyとなったらデプロイ完了です。

URLがいくつかありますが、どれでも閲覧できます。DEPLOYMENTというURLは一意なデプロイURLです。DOMAINSはそのプロジェクトのURLで、いつも使えるURLです。どれでも良いので開くとローカルで実行したアプリケーションと同じ画面が表示されます。これでデプロイは完了です！

ちなみに下記は今回作ったサンプルです。

https://nuxt-vercel-sample.now.sh/
https://github.com/dala00/nuxt-vercel-sample

更新したい時

プログラムを調整して更新したいときは、GitHubにpushするだけで勝手にデプロイされます。

ちなみに先ほどの画面はProduction Deploymentで、masterブランチのものがProductionとしてデプロイされます。別のブランチを作ってそちらでpushしておくと、その製品版のURLは利用されず、別ブランチ用のURLが作成されるため安全にステージング環境として利用することが可能です。下記のようにDeploymentsメニューで全てのブランチのデプロイを確認できます。

それをクリックすると下記のようにテスト用のURLを利用することが出来ます。

プルリクエストを作るとブランチのマージもGitHub上だけで行えます。

ちなみにGitHub連携しているとこんな感じでnowちゃんが甲斐甲斐しくコメントをしてくれます（そういやこちらはまだ名前が変わってないですね）。これで一人ぼっちで友達がいなくても寂しくありません。

環境変数を設定する

Nowではずっとsecretsという機能を利用してプライベートな値を利用できるようにしていましたが、最近Vercelになったのと同じくらいの時期に管理画面で直接環境変数を設定できるようになりました。下記のように設定ができます。

ちなみにProductionは本番、つまり独自ドメインを設定していればそちらのURLや、プロジェクト名.now.sh というシンプルなエイリアスのものなどです。Previewは別のブランチでpushした時に作成されるURLです。DevelopmentはローカルPCにて、now devを実行した時のものです。

設定後は見えなくなります。

Nuxt.js上では、nuxt.config.jsにて例えば下記のように設定します。ローカルでの環境変数は直接指定するか、dotenv等を利用しましょう。

// require('dotenv').config() export default { mode: "universal", env: { TEST_TEXT: process.env.TEST_TEXT },

index.vueにてscript側に値を取得処理を作成し、

methods: { getText() { return process.env.TEST_TEXT } }

表示側でそれを使います。

{{ getText() }}

問題なければ下記のように表示されます。

nowコマンドは？

こちらも使えます。今回のパターンだと不要でしたが、複数のbuildersを使う場合などはローカルで now dev コマンドで開発ができます。この場合は事前に now コマンドを実行してVercel側のプロジェクトと紐付けておく必要があります。

まとめ

ということで2020年に入り、Vercelは進化を遂げ続けており非常に使いやすくなりました。GitHubや自動デプロイに慣れている方はGitHub連携で、GitHubを使ったことがなくてちょっと怖い、という方は今まで通りnowコマンドを使って、柔軟に利用できます。非常に便利ですので使い倒していきましょう。

Vercel（元ZeitのNow）でNext.jsアプリをデプロイ 2020年最新版

2020-04-27T08:55:36+09:00

now というコマンドを使わないVercel（元ZeitのNow）へのデプロイ方法を解説します。今回の手順ではNext.jsを使います。

背景

now というコマンドで簡単にデプロイできるということで一世を風靡したZeitのNowですが、先日Vercelというサービス名に変更されました。その前からちょこちょこ新たな機能をリリースしており、nowというコマンドを使わなくてもGitHub連携によってpushするだけでデプロイできるようになったり、環境変数も独自のsecretsという設定を使わず、管理画面で設定できるようになったりと、かなり手軽になってきているので実際にそれらを使ったデプロイ方法を説明します。

Next.jsアプリを作成

まずはNext.jsのアプリケーションを作成します。

npm init next-app # or yarn create next-app

いくつか設定項目が現れるため下記のように設定しました。

√ What is your project named? ... next-vercel-sample √ Pick a template » Default starter app

あとは出力されるメッセージの通り、下記のようにして実行できます。

cd next-vercel-sample yarn dev

GitHubへ登録

今回はnowコマンドは一切使わずGitHub連携でデプロイを行います。ですのでまずはいま作成したアプリケーションをGitHubに登録します。その前にとりあえずcommitしておきます。

git init git add . git commit -m "Initial commit"

addとcommitはVSCode等でやってもよいでしょう。

まずは適当にGitHubでリポジトリを作成します。

表示されているとおりに設定してpushします（SSHキーの登録などは事前に行っておいてください）。

Vercelにデプロイする

続いてVercel側に今pushしたものをデプロイします。VercelのダッシュボードにImport Projectボタンがあるためそちらをクリックします。

From Git Repositoryを選択します。

Importボタンをクリックします。

プロジェクトの選択画面が開きますので適宜選択します。僕の場合は個別に権限を与えたものだけ選択できるようにしているため、同様の場合は下記のようにEdit your repository access settings on GitHub.を実行してGitHub側で権限を与えてから選択します。

選択できたらSelectしてImportを実行です。プロジェクト名の入力画面が開くので入力してContinueします。

引き続きROOT DIRECTORYやBUILD COMMANDの設定画面なども開きますが、Next.jsアプリケーションの場合は一切何も設定しなくてもデプロイが可能のためひたすらContinueして最後のDeployボタンを押せば完了です。

Buildingステータスになっているのでしばし待ちます。

Readyとなったらデプロイ完了です。

URLがいくつかありますが、どれでも閲覧できます。DEPLOYMENTというURLは一意なデプロイURLです。DOMAINSはそのプロジェクトのURLで、いつも使えるURLです。どれでも良いので開くとローカルで実行したアプリケーションと同じ画面が表示されます。これでデプロイは完了です！

ちなみに下記は今回作ったサンプルです。

https://next-vercel-sample.now.sh/
https://github.com/dala00/next-vercel-sample

更新したい時

プログラムを調整して更新したいときは、GitHubにpushするだけで勝手にデプロイされます。

ちなみに先ほどの画面はProduction Deploymentで、masterブランチのものがProductionとしてデプロイされます。別のブランチを作ってそちらでpushしておくと、その製品版のURLは利用されず、別ブランチ用のURLが作成されるため安全にステージング環境として利用することが可能です。下記のようにDeploymentsメニューで全てのブランチのデプロイを確認できます。

それをクリックすると下記のようにテスト用のURLを利用することが出来ます。

プルリクエストを作るとブランチのマージもGitHub上だけで行えます。

ちなみにGitHub連携しているとこんな感じでnowちゃんが甲斐甲斐しくコメントをしてくれます（そういやこちらはまだ名前が変わってないですね）。これで一人ぼっちで友達がいなくても寂しくありません。

環境変数を設定する

Nowではずっとsecretsという機能を利用してプライベートな値を利用できるようにしていましたが、最近Vercelになったのと同じくらいの時期に管理画面で直接環境変数を設定できるようになりました。下記のように設定ができます。

ちなみにProductionは本番、つまり独自ドメインを設定していればそちらのURLや、プロジェクト名.now.sh というシンプルなエイリアスのものなどです。Previewは別のブランチでpushした時に作成されるURLです。DevelopmentはローカルPCにて、now devを実行した時のものです。

設定後は見えなくなります。

Next.js上では、next.config.jsにて例えば下記のように設定します。ローカルでの環境変数は直接指定するか、dotenv等を利用しましょう。envはサーバー側（というかビルド時）、publicRuntimeConfigでクライアント側に環境変数を渡せます（漏洩してはいけない値を渡さないようにしましょう）。

// require('dotenv').config() module.exports = { env: { TEST_TEXT: process.env.TEST_TEXT, }, publicRuntimeConfig: { TEST_TEXT: process.env.TEST_TEXT, }, }

index.jsを下記のように調整することで利用できます。

import getConfig from 'next/config' const { publicRuntimeConfig } = getConfig() export default function Home() { return (
Create Next App
Welcome to{' '} Next.js! {publicRuntimeConfig.TEST_TEXT}

問題なければ下記のように表示されます。

nowコマンドは？

こちらも使えます。今回のパターンだと不要でしたが、 @now/next というbuilders以外を使う場合はローカルで now dev コマンドで開発ができます。この場合は事前に now コマンドを実行してVercel側のプロジェクトと紐付けておく必要があります。

まとめ

ということで2020年に入り、Vercelは進化を遂げ続けており非常に使いやすくなりました。GitHubや自動デプロイに慣れている方はGitHub連携で、GitHubを使ったことがなくてちょっと怖い、という方は今まで通りnowコマンドを使って、柔軟に利用できます。非常に便利ですので使い倒していきましょう。

Vercel（元ZeitのNow）にてNext.jsでnode-canvasを使ってOGP

2020-04-24T12:00:32+09:00

追記 2020/10）
2020年7月頃から？、Vercelが改善されて簡単にOGPが作れるようになりました。
VercelのAPI RoutesでOGPを作成する 2020年版
追記終わり

Next.jsアプリケーションをVercel（元ZeitのNow）で利用してOGPを生成しようと思ったが無理で、それでもなんとか成功させたある男の記録（2020/4、Next.js9.3現在）。

VercelでNext.js

そもそもNext.jsはVercelの人が作っている。そのため多分かなり親和性が高い。GitHub連携して適当にpushすればすぐなんの設定もなくすぐデプロイできる。ということでまずは何も考えずガリガリアプリケーションを作成していた。

何がうまくいかなかったのか

まず作っていたもの。それは普通のNext.jsアプリケーション。それにOGPもつけようと思っていた。調べてみるとNext.jsには API Routes という機能があり、別途サーバー用の機能を準備しなくてもちょっとしたAPIならpages/apiの下に通常のページと同じ配置でメソッドを追加すればサーバーサイドの処理も書けてしまう。

これでOPGも可能そうだと思い、事前にnode-canvasを使って試していたところうまくいっていた。前も別のところで同じことをやっていたのだが、基本的にこういうデプロイ先はフォントが無いことがあるため、node-canvasにあるregisterFontという機能を使って直接ttfのようなフォントファイルを読み込むことで文字も描画できるようにしている。

しかし、これがうまくいかなかった。なんかregisterFontあたりエラーが出る。調べてみたところこんなissueをみつけた。

Next.js API routes (and pages) should support reading files · Issue #8251 · zeit/next.js

そう、なんか __dirname もちゃんと機能していないし、fs.readFileSync もまともに動かない……。

ということで、フォントの読み込みができなかった。

なぜファイルを読み込めないのか

なぜかはよくわからないが、とにかくVercelは内部的にはAWSのLambdaを使っており、その関係でデプロイする時に関係ないファイルを無視していたり、フォルダ構成も全く違う感じになってたり、色んな要因でうまくいかないのではないかと思われる。詳しくはわからない。が、上記issueやこのPR Fix for __dirname by huv1k · Pull Request #8334 · zeit/next.js を見る限り、なかなか改善できていないようなので多分構成的にそんな簡単ではないのではないかと思われる。

ということで、そのうち改善されるのかもしれないが、とにかく今や今後すぐに改善されるとは思わないほうが良いっぽく、無理なら無理でどうするかを考える必要がありそうだった。

解決の手がかり

実はこのissueの中に、下記のようなコメントがあった。結果としてはこれが解決方法。

https://github.com/zeit/next.js/issues/8251#issuecomment-614220305

具体的には @now/next と @now/node のbuildersを併用するというもの。

buildersとは

Vercelにはbuildersという概念があり、これによりどの様にアプリケーションをデプロイするかを決めることができる。 @now/next はNext.jsをデプロイする時に自動的に選択される、Next.js用のbuilders。 @now/nodeはそれ以外のNode.jsアプリケーション。

なぜ併用するのか

ではなぜ併用する必要があるのかと言うと、先程のissueにも書かれているのだが、実はincludeFilesという設定があり、これを利用すると指定したファイルをデプロイ時に無視しないようにし、正常にデプロイ先で読み込むことができるようになる。

ところが、これが現在 @now/next では利用できない。そのため、 @now/node を併用して利用することでOPGの生成のようにファイルを読み込む日強グアある処理だけはそちらで稼働させようという考え。

実際に解決した方法

まず、pages/apiにあった処理を functions/index.ts に移した。Next.js側では使えないため、API Routesも使えない。そのため Next.jsの外に出して別で稼働させる。apiというフォルダに入れれば @now/node で /api/～～ というURLで実行できるのだが、これはNext.jsのAPI Routesと被ってしまうので今回はとりあえず /functions/～～ というURLでアクセスできるようにした。具体的なnow.jsonの設定は下記の通り（最近はGitHub経由でデプロイできるし、独自ドメインや環境変数も管理画面で設定できるのでそもそもnow.json自体なく、今回追加したこれで全部）。

{ "builds": [ { "src": "next.config.js", "use": "@now/next" }, { "src": "functions/index.ts", "use": "@now/node", "config": { "includeFiles": ["fonts/*"] } } ], "routes": [ { "src": "/functions/(.+)", "dest": "/functions/index.ts" } ] }

これでfontsというフォントを入れたフォルダを維持したまま、functionsで始まるURLで @now/node ビルドのサーバーサイド処理にアクセスすることができる。

で、色々端折るけどfunctions/index.tsはこんな感じ。

import * as path from 'path' const { createCanvas, registerFont } = require('canvas') import { NowRequest, NowResponse } from '@now/node' export default function (req: NowRequest, res: NowResponse) { registerFont(path.join('fonts', 'myfont.ttf'), { family: 'myfont', }) const canvas = createCanvas(600, 315) const context = canvas.getContext('2d') context.font = '15px myfont' context.fillStyle = '#424242' context.fillText('hello', 100, 100) const image = canvas.toBuffer() res.writeHead(200, { 'Content-Type': 'image/png', 'Content-Length': image.length, }) res.end(image, 'binary') }

ちなみに、あくまでも @now/next と @now/node は別環境のため、フォントをアップできたからといってNext.js側でそれを利用することは出来ない。今回はOGPだったためURLだけで連携できるのでOKだった。

まとめ

このように、一時期は別サーバーで対応が必要かとも考えたが、なんとかVercelだけで全てを完結させることができたので本当に良かった。Vercel最高。だけどはやくファイルの読み込み関連はいい感じに使えるように改善して欲しいものだ。

ちなみに実際に作ったのはこれ（石を進めたときだけOGPが出る）

リバーシ棋譜ツール

Vercel（元ZeitのNow）にてNext.jsのAPI Routesでnode-canvasを使う

2020-04-22T09:09:44+09:00

Next.jsにはAPI Routesという機能があり、pages/api 配下に通常のページと同じように配置してサーバーサイドの処理を書くことができる。アクセスは /api/パス のような感じ。

export default (req, res) => { res.statusCode = 200 res.setHeader('Content-Type', 'application/json') res.end(JSON.stringify({ name: 'John Doe' })) }

https://nextjs.org/docs/api-routes/introduction

この機能を使ってOGPを実装し、いざVercelにデプロイしてみるとなぜか動かない。ローカルではうまくいったのに。下記のようなエラーが出る。

Error: libuuid.so.1: cannot open shared object file: No such file or directory

GitHubにも同じ現象についてのissueがあり、解決法を書いている人もいた。

https://github.com/zeit/now/issues/3460#issuecomment-574712112

ちょっと分かりづらいのでもうちょっと詳しく解説。

wget https://github.com/jwerre/node-canvas-lambda/raw/master/node12_canvas_lib64_layer.zip unzip -j -d canvas_lib64 node12_canvas_lib64_layer.zip

上記はローカルで実行する。そして出来上がったcanvas_lib64フォルダをコミットしてしまう（now-buildコマンドに混ぜてみたがwgetが無いとどやされた）。

ちなみに上記のzipファイルの配置が時々変わるようなので、その場合は該当のリポジトリを確認。

{ "scripts": { "now-build": "cp canvas_lib64/*so.1 node_modules/canvas/build/Release/" } }

上記は自分のpackage.jsonのscriptsの中にこのnow-buildコマンドを追加するという意味。ただ、これだとうまくいかなかったため下記にした。多分コピーだけになってしまってビルドされなくなってしまったのではないかと思う。

cp canvas_lib64/*so.1 node_modules/canvas/build/Release/ && yarn build

これで動いた。

ただし、VercelにてNext.jsのAPI Routesでは、なんと他のファイルを読み込むことが出来ない。フォントも画像も。そのためこのままだとひたすら描画して作るしかない。

対処法は @now/next と @now/node のbuildersを併用するのだが詳しくは後日別の記事にて。

↓後日の別の記事
Vercel（元ZeitのNow）にてNext.jsでnode-canvasを使ってOGP

Nowで運用している画像配信サーバーにリサイズ機能を追加した

2020-04-13T08:27:03+09:00

Cloud Runに引っ越したことで重いページとそうでないページがはっきりしてきた（以前は全てのページが重くて逆に気にならなかった）のだが、その際にLighthouseで調べているとPerformanceのスコアが非常に悪く、画像の読み込みにめちゃくちゃ時間がかかっていることに気づいた。

トップページの記事ランキングなどにはサムネイルを表示していたりするのだが、アップロードされた画像をそのまま表示していた。中には横幅2000とか3000以上の画像もあったりする。そのためそういう画像がいくつも同じページ内にあると当然読み込みに時間がかかるし、Wifiじゃない状況でスマホで見たりすると通信容量の消費も激しくなるだろうし全然ユーザーフレンドリーじゃない。

ということで丁度モチベーション切れだったこともあり、せっかく気になってきたので対応してみることにした。

画像配信サーバーの改造

アップロードされた画像は全てZeitのNowで運用している画像配信サーバーで配信している。

NowのエッジキャッシュでCloud Storage節約サーバー作成

ということで、これを改造してリサイズに対応できればよいのではないかと思った。具体的には通常の画像のURLの後ろに ?mw=700&mh=300 のように、パラメータを指定した場合だけリサイズするようにする形。

リサイズに使用したパッケージ

リサイズと言えばImageMagick（現在はgm？）かなと思ったが、一応調べてみたところsharpというパッケージも非常に人気があるらしかったのでそちらを使ってみることにした。

lovell/sharp: High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP and TIFF images. Uses the libvips library.

一番シンプルな形だとこんな感じでいける。BufferをリサイズしてBufferにするパターン。

const resized = await sharp(image).resize(width).toBuffer()

めちゃくちゃ簡単。ImageMagickだとサーバーに何かインストールしておかなきゃいけないんじゃないかとか色々気になったりするが、特にそういう必要もない。

実際の実装方法

縦横を指定する場合

CSSの object-fit: cover を使っているところが結構あったので、その部分の表示を変えることなくリサイズする仕組みを作った。具体的には ?mw=700&mh=300 のパラメータを付けると、どちらかがはみ出してもいいのでその範囲でなるべく大きな画像にする方法（余白ができないようにする）

色々処理を作っていたが、これはパラメータを指定するだけでできた。

if (query.mw && query.mh) { image = await sharp(image) .resize(Number(query.mw), Number(query.mh), { fit: 'outside' }) .toBuffer() }

こんな感じでfitを指定すると色々な形でのリサイズ方法があるため便利。

横幅だけを指定する場合

記事ページなどは許可する最大の横幅を指定し、それ以上だったらリサイズする形にした。

さすがにfitでこの条件指定までは出来なかったため、チェックは自分で行った。さすがに画像を変換する時にサイズの取得は必要になるため、多分サイズを取得する機能があるだろうと思ったがやはりあった。ということで下記のような処理を作った。metadataというメソッドでサイズや画像の形式など、色々な情報が取れる。

async function resizeByMaxWidth(image, maxWidth) { const sharpImage = sharp(image) const metadata = await sharpImage.metadata() if (metadata.width < maxWidth) { return image } return await sharpImage.resize(maxWidth).toBuffer() }

まとめ

ということで色々対応したが、スコアは全然改善しなかった。他にもAPIで取ってきたデータのユーザー画像のサイズが大きかったりして、対応しきれていない部分がある。

とはいえ、やろうと思えばあらゆるURLの画像を同様の配信サーバーを作ってプロキシすることで縮小できるため、他にも色々使い所はありそう（今回は自分用のリポジトリに実装しているので前述URL内で公開しているリポジトリには反映していない。機能的にもブレるため）。Nowなのでサーバーの管理も不要だしCDNキャッシュしてくれて高速だし本当に楽。

Now CLIを使わずGitHub連携だけでデプロイ

2020-04-11T22:30:34+09:00

いつからかは知らないが、ZeitのNowにGitHub連携がついていた。元々 now というコマンドで簡単にデプロイできてすごい、ということで有名になった記憶があるが、もうそれすらも要らなくなった。

ログイン後、ダッシュボードの右上に Import Project というボタンがあるので、それを押せばGitHub連携ができる画面がある。

あとはもうpushするだけでデプロイできる。

しかもプロジェクトのトップページにも書かれているが、 To deploy to production, push to the default branch. ということでmasterにpushすれば production ビルドになる。これは試していないので恐らくだが、エイリアスを設定していたり独自ドメインを設定していたりすると自動的にそこにデプロイされるんじゃないかと思われる（ちらっとためしたがプルリクエストをマージしたらそのブランチのデプロイに指定したエイリアスや独自ドメインのエイリアスが移動するっぽい）。

そして上記の画像にもあるように、別ブランチにpushすればそれもテスト環境として利用することができるようになっているのですごく便利になっているっぽい。

本番
https://sharp-test-zeta.now.sh

別ブランチ
https://sharp-test-6hin77k34.now.sh

ちなみに試したリポジトリ。勝手にURLも設定されている。
https://github.com/dala00/sharp-test

しばらく見ないうちに進化していてとても良い。

ということで、Now CLIを使わずにデプロイまでできるようになった。もちろん secrets を設定したりする場合は必要になってくると思うが、何にしろだいぶ簡単に利用できる様になってきたのではないかと思う。正直コマンドでデプロイしたりエイリアスを設定したりするのは時間が経つとやり方を忘れてしまったり、今もこの方法で大丈夫なのかと不安になってしまうのでpushだけでできるようになったのは非常にありがたい。

NOWでデプロイできるGoogleフォームみたいに追記できるAPIを作ったので、GitHubに公開してみた

2019-09-13T18:30:51+09:00

Spread Sheet APIを見てたら、Googleフォームみたいに空いている行に追記できるらしい...
便利そうなので、汎用的に使えるようにNOW APIとしてデプロイできるようにしてみた＆GitHubにも公開してみた。

作ったもの

GitHub: Append Row API using ZEINT NOW and Spread Sheet API

こんな感じで、API叩くとスプレッドシートに追記できる。

使い方: デプロイする

1. git clone

まずはgit clone

$ git clone https://github.com/memory-lovers/append-row-api_zeit-now.git

2. サービスアカウントのキーファイルの配置

credential.jsonというファイル名で、認証情報のキーファイルを配置

3. 追記したいスプレッドシートの権限設定

そのままだとサービスアカウントに書き込み権限がないためエラーに...
そのため、追記したいスプレッドシートの共有権限にサービスアカウントを追加が必要。

サービスアカウントの作成やスプレッドシートの共有設定は、
以下の記事がわかりやすかった...(´ω｀)
「Node.jsでGoogleスプレッドシートを操作する - LCL Engineers' Blog」

3. ローカルで試す

now devコマンドでローカルで動かすことができます。
実行するとhttp://localhost:5001で起動します。

$ now dev -p 5001 // or $ npm run dev

nowコマンドやアカウントがない場合...

こちらのZEITのページからログイン&アカウント作成!

公式ドキュメントにあるように、インストールとログイン!

# nowコマンドのインストール $ npm i -g now # CLIでのログイン $ now login

3. ZEIT now にデプロイ

nowコマンドでデプロイできます。
プロジェクト名は、now.jsonのnameに書いてあるappend-apiになります。

$ now // or $ npm run deploy

使い方: API の呼び出し

デプロイした API は、以下のパラメタを受け取ります

追記するシートの ID: spreadsheetId

追記する内容の配列: values

curl で呼び出すサンプルは以下のとおりです。
URL には、https://append-api.memory-lovers.now.sh
のようなデプロイした URL を設定。

ローカルで起動した場合は、https://localhost:5001を設定。

#!/bin/bash SHEET_ID='YOUR_SHEET_ID' URL='API_URL' curl -i \ -H "Accept: application/json" \ -H "Content-Type:application/json" \ -X POST --data '{ "spreadsheetId": "'$SHEET_ID'", "values": [ ["A", "B", "C"], ["D", "E", "F"] ] }' \ "$URL/append"

コードはこんな感じ。

主にExpressに関する処理が多いですが、Google APIsを使うのは、
const doAppend = async (spreadsheetId, values) => {のあたりに集約。

import bodyParser from "body-parser"; import Express from "express"; import { google } from "googleapis"; require("./credential.json"); // サービスアカウントの認証情報 const app = Express(); // POSTのBODYにJSONを使うため、body-parserを有効化 app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); /** * Spread Sheetに行を追加する処理 * @param {String} spreadsheetId シートID * @param {String[][]} values 追記するデータ。2次元配列で指定 */ const doAppend = async (spreadsheetId, values) => { // パラメタのチェック if (!spreadsheetId || !values) throw new Error("Error: Invalid Params"); // Spread Sheet APIを使うための認証処理 const auth = await google.auth.getClient({ scopes: ["https://www.googleapis.com/auth/spreadsheets"] }); const sheets = google.sheets({ version: "v4", auth }); // APIを呼び出して、行の追加処理 const req = { // シートのID spreadsheetId: spreadsheetId, // A1に追記することを指定 range: "A1", // 追記する形式を指定。 valueInputOption: "USER_ENTERED", // A1に値があったら下方向に空欄を探しにいく insertDataOption: "INSERT_ROWS", // 追加する行のデータ。2次元配列で指定 resource: { values: values } }; await sheets.spreadsheets.values.append(req); }; // '/append'にアクセスしたら、doAppend関数を呼ぶようにマッピング app.post("/append", async (req, res) => { try { // パラメタのチェック if (!req.body) throw new Error("Error: Empty Body"); // パラメタの取得 const spreadsheetId = req.body.spreadsheetId || ""; const values = req.body.values || ""; // 追記処理の呼び出し await doAppend(spreadsheetId, values); res.end(); } catch (error) { console.error(`Error in append: ${error}`, error); res.status(500).send({ error: `${error}` }); } }); export default app;

はまったところ...credential.jsonを認識しない...

now.jsonに環境変数GOOGLE_APPLICATION_CREDENTIALSを設定して、
読み込むファイルを指定していたけど、エラーが...

"env": { "GOOGLE_APPLICATION_CREDENTIALS": "./credential.json" }

Error in append: Error: The file at ./credential.json does not exist, or it is not a file.

デプロイされたフォルダを見てみると、credential.jsonが配置されていない...

いろいろ調べてみたところ、ビルドをするので関連のないファイルは配置されないっぽい...
なので、index.jsの冒頭に以下を追加して、読み込むように変更してみたところ、
うまく認識されるようになったヽ(=´▽`=)ﾉ

require("./credential.json"); // サービスアカウントの認証情報

活用事例1: 問い合わせ管理

開発しているWebサービスの問い合わせ効率化のために利用(´ω｀)

Nuxtに用意したフォームで受けた内容をスプレッドシートに転記して管理できるように♪

書籍のリクエスト、できてきた(*´ω｀*)ピタゴラスイッチ的にFirestoreトリガーで、Slackに通知とSpread Sheetに追記ヽ(=´▽`=)ﾉ

これで、だいぶ楽になるはず(*´ω｀*)♪ pic.twitter.com/9SIY2T23u3
— 積読ハウマッチ📚きらぷか (@kira_puka) September 12, 2019

以前、書いた記事のSlackAPIも使い、
通知と管理を一度にできるようになりましたヽ(=´▽`=)ﾉ

活用事例2: 統計情報の収集

定期的にユーザ数やデータ数などを集計してスプレッドシートに追記できるように！
スプレッドシートに追記するとグラフを出せるようになるのですてき(´ω｀)

SpreadSheetAPIとなかよくなれたのでとりあえず、取ってる統計データを入れてみた(*´ω｀*)ここ1週間で、1,300万円分が積まれ、総額2,000万円近く、登録されてた( ﾟдﾟ)!強者達が...集まってきている...((((；ﾟДﾟ))))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ#積読ハウマッチ pic.twitter.com/esCqTrQmLK
— 積読ハウマッチ📚きらぷか (@kira_puka) September 11, 2019

個人開発なので常に稼働が足りないですが、
こういった裏方作業的なのも、もっと効率化していけるようになりたい...!!

以上!!

こんなのつくってます！！

最近、積読用の読書管理アプリ「積読ハウマッチ」をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで

参考にしたサイト様

スプレッドシート API で行を追加する - Qiita

Googleスプレッドシートをプログラムから操作 - Qiita

Google spreadsheetの値を取得する - Qiita

API キーの使用 | 認証 | Google Cloud

googleapis/google-api-nodejs-client: Google's officially supported Node.js client library for accessing Google APIs. Support for authorization and authentication with OAuth 2.0, API Keys and JWT (Service Tokens) is included.

Google APIs Node.js Client を使って Google Analytics のページビューを取得する｜ DevelopersIO

Storing complex secrets · Issue #749 · zeit/now

Storing authentication credentials file · ZEIT

ZeitのNowにデプロイするファイルを指定する時の注意 - Crieit

Nowを使って静的サイトとAPIを単一レポジトリで運用する

curlチートシート - Qiita

NowのエッジキャッシュでCloud Storage節約サーバー作成

2019-03-18T08:40:36+09:00

ZeitのNowは標準でCDNがついています。それを利用してCloud Storageで公開している画像をキャッシュさせて料金を抑えるためのサーバーアプリケーションを作成しました。改造すればS3用としても使えると思います。GitHubでソースや使い方も公開しています。

~~ちなみに、実運用ではまだちょっとしか試していないため現時点では実際に料金がどうなるかは未検証です。~~　ずっと試していますが恐らく節約にはなっていると思います。

一応テストした限りでは下記のようにキャッシュはされているようです。（HITになっている）

具体的にどういうことか

Cloud StorageはGCPのサービスのうちの一つで、ファイルを保存することができます。また、設定により画像などをそのまま公開してWebページ用に利用することもできます。

ただ、表示するための通信量などにより課金されるため、無料枠はあるのですがちょっとアクセスが多くなる時などはオーバーすることもあります。そういった時に、他のサーバーなどで画像をキャッシュしておいてそこから配信を行えばCloud Storage側の通信がなくなるため、料金を節約することができます。

なぜNowを使うのか

適当なクラウドを使うと結局そこの通信量がかかったりするため、CDNのエッジキャッシュで配信するのが一番効率的なのではないかと思います。ZeitのNowだと無料ですしデプロイも非常に簡単ですのでそこで可動できるようなCloud Storage Proxyサーバーを作ってみました。

しかもどうもデフォルトでCDN配信を行ってくれるようで、画像の拡張子で適切なヘッダを送信しておけば勝手にエッジキャッシュを行ってくれるようです。元々は独自ドメインを設定してCloudflareでCDN配信しようと思っていたため、手間が省けて助かりました。

また、メインのアプリケーションと分離しての作成になるため、どのサービスにも使い回すことができます。

元々メインアプリケーションに組み込んで作ろうと思っていたのですが、下記の記事を見て非常に作成が簡単にできそうだったので一気に作りました。

Now でクラウドの複雑さから解放されよう、今すぐに - Qiita

使い方

Nowにデプロイしたら、下記のようなURLにアクセスします。

https://{{ nowのデプロイホスト名 }}/{{ Cloud Storage上のファイルパス }}

プロジェクトIDやバケット等は事前に環境変数で指定しておきます。ここにアクセスすると同じパスのCloud Storage上のファイルを取得し、そのままブラウザに表示します。CDNキャッシュ可能な拡張子やレスポンスヘッダのため、キャッシュ状態がHITになり、以後はCDN上から配信されるため、Cloud Storageへのアクセスが減ります。（多分エリアやタイミングによってキャッシュ状態が変わる可能性があるので完全ではなさそうな気がします）

ソース

メイン処理だけ見ると下記のようになります。

module.exports = async (req, res) => { const contentType = getContentType(req.url) const path = req.url.substr(1) const file = bucket.file(path) const image = await getRawData(file) res.writeHead(200, { 'Cache-Control': 'public, max-age=315360000', Expires: new Date(Date.now() + 315360000000).toUTCString(), 'Content-Type': getContentType(path), 'Content-Length': image.length }) res.end(image) }

GitHubで公開していますのでご興味があれば遊んでみてください。改造すれば色々な使い方ができると思います。

dala00/cloud-storage-proxy

追記）
ちなみに元々上記でやっていたようにGCPのjsonファイルを直接アップする方法ではなく、Nowの方で連携できるやり方があるのでそちらに対応しておきました。詳しくは下記参照です。

Google Cloud - Integrations - ZEIT

Zeit Nowの具体的なTips集 - Qiita

試験運用中

この記事の最初の画像もNowからの配信のものです。URLも下記のようになっています。

[https://crieit.now.sh/upload_images/bd7e316e8d8673d87a278823386ae3245c8cfe20b742c.png](https://crieit.now.sh/upload_images/bd7e316e8d8673d87a278823386ae3245c8cfe20b742c.png)

懸念点

最初にも書きましたが、料金については運用して検証していますが、実際どれほど節約になっているかは細かく計算はしていません。通信量は減ると思いますが、オブジェクトの取得オペレーションが無料枠を超えてしまう場合もあると思いますのでその場合は別途料金が発生してくる可能性があります。

ですので、もし柔軟なカスタマイズが可能であればバズっている記事や人気の記事だけその画像を使うように置き換えると良いかもしれません。とはいえ、多分ちょっとした個人開発レベルであれば大丈夫ではないかと思いますが…。

あまりに通信量が多くなると今度はNow側も無料ではいけなくなる可能性もあります。（…が、サーバーはともかく、CDNの通信量も関係あるんでしょうか？）このあたり詳しい事が完全に理解できているわけではないので色々試してみる必要はあるかもしれません。とにかく、むちゃくちゃ大規模なサービスで無料にしちゃおう、みたいなことは難しい可能性があります。

なんにしろ引き続き検証していきます。

追記）
一応バズったりした時に200円くらい行ったりしたのが大体常時50円以下になったような気がするような気もします。

あとCDN関連でいうと他にもこんな遊びもしています。

Crieitの記事詳細ページが日本の技術系投稿サービスで最速になった

ZeitのNowにデプロイするファイルを指定する時の注意

2018-09-28T08:14:25+09:00

ZeitのNowにNuxt.jsのアプリケーションをデプロイする場合、公式のマニュアルにもあるようにnowコマンドで簡単にデプロイすることができる。ただ、うまくいかないパターンがあった。

Now Deployment - Nuxt.js

症状

デプロイ後確認してみると、作成したアプリケーションではなく、Nuxtをインストールした時の状態の画面が表示されてしまっていた。

原因

.gitignoreで指定したファイルは通常Nowにデプロイされる際には無視されるのだが、設定することで強制的にアップすることができる。具体的には now.json というファイルに files という設定を行うことで可能。

{ "files": { "secret.js" } }

恐らく、これによりこのファイルしかアップロードされなくなってしまったのではないかという気がした。package.jsonは恐らく重要なので勝手にアップされ、Nuxtがデフォルトの状態でインストールされて表示されていたのではないだろうか。

対処方法

filesにすべてのフォルダとファイルを指定することで解決した。（不要なものもあるかもしれない）

{ "files": { "assets", "components", "layouts", "middleware", "pages", "plugins", "static", "store", "secret.js", "nuxt.config.js", "yarn.lock" } }

golangのechoで静的なサイトを建てるならNowがお手軽という話

2018-09-19T19:42:20+09:00

NowというPaasが、golangをデプロイするのにお手軽だということがわかった。

golang echo でサーバ書いて Dockerfile 書いて now でアップロードしてみた。ドメインは適当に取って now ln で alias 張った。めちゃ簡単だし LE も作ってくれる。便利やん。https://t.co/fXT7yR2BZC
— mattn (@mattn_jp) 2018年9月18日

公開するまでの手順

Nowのアカウントを作成する

DotTkで無料ドメインを取得する。

Nameserverにzeit.worldを４つくらい指定しておく。

Dockerfile, main.go, now.jsonを作成する。

取得したドメインをnow.jsonのaliasに記述しておく。

nowで一旦デプロイできるか確認する。

問題なければnow aliasでproductionとしてデプロイする。

source code

こちら

「Now」の記事 - Crieit

Vercel（元ZeitのNow）でNuxt.jsアプリをデプロイ 2020年最新版

Vercel（元ZeitのNow）でNext.jsアプリをデプロイ 2020年最新版

Welcome to{' '} Next.js! {publicRuntimeConfig.TEST_TEXT}

Vercel（元ZeitのNow）にてNext.jsでnode-canvasを使ってOGP

Vercel（元ZeitのNow）にてNext.jsのAPI Routesでnode-canvasを使う

Nowで運用している画像配信サーバーにリサイズ機能を追加した

Now CLIを使わずGitHub連携だけでデプロイ

NOWでデプロイできるGoogleフォームみたいに追記できるAPIを作ったので、GitHubに公開してみた

はまったところ...credential.jsonを認識しない...

NowのエッジキャッシュでCloud Storage節約サーバー作成

ZeitのNowにデプロイするファイルを指定する時の注意

golangのechoで静的なサイトを建てるならNowがお手軽という話

はまったところ...`credential.json`を認識しない...