zeit/now-cli を使ってpublicなhttps環境へNode.jsアプリケーションを高速デプロイしてドメインまで取得する(タダで)
ターミナルには Hyper
React アプリケーションには Next.js
静的リソースのホスティングには serve
簡易サーバには Micro
を使っている zeit 教のワイが、デプロイ周りの統合 CLI である now を紹介してゆく
諸々の作業には zeit のアカウントが必要になるのでsign upしておく
インストール & ログイン
$ yarn global add now
$ now login
～～～
✔ Email confirmed
✔ Fetched your personal details
> Ready! Authentication token and personal details saved in "~/.now"さんぷる
Next.js で動くアプリケーションをデプロイしてみる
$ mkdir nextjs-now && cd $_ && mkdir pages && yarn init --yes
$ echo 'export default () => <div>Welcome to next.js!</div>' > pages/index.js
$ echo 'export default () => <div>this is about page</div>' > pages/about.js{
"name": "nextjs-now",
"scripts": {
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "^6.1.1",
"react": "^16.4.1",
"react-dom": "^16.4.1"
}
}$ now
～～～
> Using Node.js 8.11.3 (default)
> https://nextjs-now-lrqrqxzguz.now.sh [in clipboard] (sfo1) [3s]
> Building…
> ▲ yarn
～～～
> Done in 10.43s.
> ▲ npm run build
～～～
> Build completed
～～～
> ✔ Scaled 1 instance in sfo1 [33s]
> Success! Deployment ready
デプロイ先は https://{name}-{hash}.now.sh といった感じのドメインになる。
今回は → https://nextjs-now-lrqrqxzguz.now.sh
そのままでは hash が含まれた汚いドメインになってしまうが、ドメイン名にはエイリアスを使えるので一旦落ち着いて欲しい。→ ln | alias
デプロイ先の環境で package.json の scripts に記載されている build -> start が実行されるらしいので事前 build をしてもしなくてもいい。
https://zeit.co/docs/deployment-types/node
{deploy-domain}/_src or https://zeit.co/{account-name}/{app-name}/{hash} とアクセスするとデプロイ時のファイルや実行ログなどを確認できてしまうので注意。
これはデプロイ時の -p | --public オプションで on/off の指定が可能だが、無料枠では常に true となるので private なデプロイをしたい場合は課金必須。
静的アプリケーションのデプロイ
serve や express を使わずに build した静的ファイルだけデプロイしても動いてくれる。
$ npx create-react-app react-build-now
$ cd react-build-now && yarn build
$ now build/ -n react-build-now
～～～
> Synced 1 file (468.52KB) [4s]
> https://react-build-now-hbgmialagb.now.sh [in clipboard] [3s]
> Deployment complete!デフォルトではディレクトリ名でデプロイされてしまうので -n | --name オプションで分かりやすいデプロイ名を指定。
無料プラン内だと動的アプリは 3 インスタンスまでしか建てられないが、静的アプリは無制限に建てられるので build してから静的リソースをあげるのが無難そう。
その他主要コマンド紹介
$ now -h
𝚫 now [options] <command | path>
Commands:
Cloud
deploy [path] Performs a deployment (default)
ls | list [app] List deployments
rm | remove [id] Remove a deployment
ln | alias [id] [url] Configures aliases for deployments
domains [name] Manages your domain names
certs [cmd] Manages your SSL certificates
secrets [name] Manages your secret environment variables
dns [name] Manages your DNS records
logs [url] Displays the logs for a deployment
scale [args] Scales the instance count of a deployment
help [cmd] Displays complete help for [cmd]
Administrative
billing | cc [cmd] Manages your credit cards and billing methods
upgrade | downgrade [plan] Upgrades or downgrades your plan
teams [team] Manages your teams
switch Switches between teams and your account
login Login into your account or creates a new one
logout Logout from your accountls | list
デプロイ状況の確認コマンド。よく使う。
$ now ls
> 3 total deployments found under championof-jk [941ms]
> To list more deployments for an app run `now ls [app]`
app url inst # type state age
react-build-now react-build-now-sjauopubrg.now.sh - STATIC READY 3m
nextjs-now nextjs-now-lrqrqxzguz.now.sh 1 NPM READY 26m複数回 deploy している場合は同じ app に対して複数 URL が作成されることがあるので app の詳細がみたい場合はapp-nameと続ける。
$ now ls react-build-now -a
> 2 total deployments found under championof-jk [940ms]
app url inst # type state age
react-build-now react-build-now-sjauopubrg.now.sh - STATIC READY 6m
react-build-now react-build-now-hbgmialagb.now.sh - STATIC READY 17mrm | remove
デプロイの削除コマンド。よく使う。 URL を指定するとそのインスタンスを削除、app を指定すると全インスタンスを削除となる。
$ now ls react-build-now -a
> 3 total deployments found under championof-jk [1s]
app url inst # type state age
react-build-now react-build-now-dfivznzgfa.now.sh - STATIC READY 6s
react-build-now react-build-now-sjauopubrg.now.sh - STATIC READY 8m
react-build-now react-build-now-hbgmialagb.now.sh - STATIC READY 20m
$ now rm react-build-now-dfivznzgfa.now.sh
> Found 1 deployment for removal in championof-jk [1s]
> The following 1 deployment will be permanently removed:
UU1ph9P2Fkf0vkr4n4Ssbdr7 https://react-build-now-dfivznzgfa.now.sh 2m ago
> Are you sure? [y/N] y
> Success! 1 deployment removed [1s]
- react-build-now-dfivznzgfa.now.sh
$ now ls react-build-now -a
> 2 total deployments found under championof-jk [937ms]
app url inst # type state age
react-build-now react-build-now-sjauopubrg.now.sh - STATIC READY 11m
react-build-now react-build-now-hbgmialagb.now.sh - STATIC READY 22m
$ now rm react-build-now
> Found 2 deployments for removal in championof-jk [2s]
> The following 2 deployments will be permanently removed:
AhoBaSijWXeSOWeaEbrGVBXZ https://react-build-now-sjauopubrg.now.sh 11m ago
e2osMbRXmYSeMEFE5U6V0XCe https://react-build-now-hbgmialagb.now.sh 23m ago
> Are you sure? [y/N] y
> Success! 2 deployments removed [1s]
- react-build-now-sjauopubrg.now.sh
- react-build-now-hbgmialagb.now.sh
$ now ls react-build-now -a
> 0 total deployments found under championof-jk [1s]scale
インスタンス数を変更するコマンド。そんな使わない。
$ now ls
> 1 total deployment found under championof-jk [1s]
> To list more deployments for an app run `now ls [app]`
app url inst # type state age
nextjs-now nextjs-now-lrqrqxzguz.now.sh 1 NPM READY 43m
$ now scale nextjs-now-lrqrqxzguz.now.sh 0 1
> Fetched deployment "nextjs-now-lrqrqxzguz.now.sh" [984ms]
> Scale rules for bru1, sfo1 (min: 0, max: 1) saved [2s]
> ✔ Scaled 1 instance in sfo1 [5s]
> ✔ Scaled 1 instance in bru1 [20s]
> Success! Scale state verified [20s]
$ now ls
> 1 total deployment found under championof-jk [936ms]
> To list more deployments for an app run `now ls [app]`
app url inst # type state age
nextjs-now nextjs-now-lrqrqxzguz.now.sh 2 NPM READY 44m
$ now scale nextjs-now-lrqrqxzguz.now.sh 0
> Fetched deployment "nextjs-now-lrqrqxzguz.now.sh" [1s]
> Scale rules for bru1, sfo1 (min: 0, max: 0) saved [4s]
⠦ Waiting for instances in to be ready> Success! Scale state verified [1s]
$ now ls
> 1 total deployment found under championof-jk [1s]
> To list more deployments for an app run `now ls [app]`
app url inst # type state age
nextjs-now nextjs-now-lrqrqxzguz.now.sh 0 NPM READY 47mdomain
ドメイン管理コマンド。あんま使わない。
空いているドメインと料金は公式サイトから確認できる。 https://zeit.co/domains
サンプルということで index とかは気にしないので安くて無難そうなものを買ってみる。(事前にクレカ情報を入れてある)
$ now domain buy championofjk.tech
> The domain "championofjk.tech" is available to buy under championof-jk! [2s]
> Buy now for $5 (1yr)? [y|N]
> Success! Domain "championofjk.tech" purchased [17s]
> NOTE: You may now use your domain as an alias to your deployments. Run `now alias --help`dns
DNS 管理コマンド。あんまり使わない。
$ now dns ls
> 3 Records found under championof-jk [2s]
championofjk.tech
id name type value created
CAA 0 issue "letsencrypt.org" default
ALIAS alias.zeit.co. default
* CNAME alias.zeit.co. default
$ now dns add championofjk.tech ext A 127.0.0.1
> Success! DNS record for domain championofjk.tech created under championof-jk [13s]ln | alias
デプロイ先のドメインにエイリアスを張るコマンド。それなりに使う。
now.sh ドメインのサブドメインへのエイリアス
早い者勝ちシステム
$ now ln https://nextjs-now-gwzhdbycvt.now.sh nextjs-now
> Assigning alias nextjs-now to deployment nextjs-now-gwzhdbycvt.now.sh
> Success! nextjs-now.now.sh now points to nextjs-now-gwzhdbycvt.now.sh [3s]
$ now ln https://nextjs-now-gwzhdbycvt.now.sh nextjs
> Assigning alias nextjs to deployment nextjs-now-gwzhdbycvt.now.sh
> Error! The alias nextjs is a deployment URL or it's in use by a different team.
カスタムドメインへのエイリアス
$ now ln https://nextjs-now-gwzhdbycvt.now.sh championofjk.tech
> Assigning alias championofjk.tech to deployment nextjs-now-gwzhdbycvt.now.sh
> Success! championofjk.tech now points to nextjs-now-gwzhdbycvt.now.sh [3s]
ちなみに、now から買ったドメインのデフォルト設定は全てのドメインがalias.zeit.coに向いているのでサブドメインを指定してやってもうまくいく。
$ now ln https://nextjs-now-gwzhdbycvt.now.sh www.championofjk.tech
> Assigning alias www.championofjk.tech to deployment nextjs-now-gwzhdbycvt.now.sh
> Success! www.championofjk.tech now points to nextjs-now-gwzhdbycvt.now.sh [3s]
エイリアス一覧
$ now alias ls
> 3 aliases found under championof-jk [986ms]
source url age
nextjs-now-gwzhdbycvt.now.sh www.championofjk.tech 11m
nextjs-now-gwzhdbycvt.now.sh championofjk.tech 26m
nextjs-now-gwzhdbycvt.now.sh nextjs-now.now.sh 45mlogs
デプロイ先のログ確認コマンド。そんな使わない。
$ now ls
> 1 total deployment found under championof-jk [1s]
> To list more deployments for an app run `now ls [app]`
app url inst # type state age
nextjs-now nextjs-now-lrqrqxzguz.now.sh 1 NPM READY 40m
$ now logs nextjs-now-lrqrqxzguz.now.sh
> Fetched deployment "nextjs-now-lrqrqxzguz.now.sh" in championof-jk [1s]
2018-07-22T03:05:01.400Z yarn
～～～
2018-07-22T03:05:12.113Z npm run build
～～～
2018-07-22T03:05:34.695Z npm start
～～～
2018-07-22T03:05:35.221Z > next start
2018-07-22T03:05:35.244Zcerts, secrets は使ったことない
:moyai: 「...無料でこんだけできるのええ時代や」