Edited at

zeit/now-cli を使ってpublicなhttps環境へNode.jsアプリケーションを高速デプロイしてドメインまで取得する(タダで)

More than 1 year has passed since last update.

:writing_hand: now

ターミナルには 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


package.json

{

"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

index.png

about.png

デプロイ先は 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} とアクセスするとデプロイ時のファイルや実行ログなどを確認できてしまうので注意。

_src.png

これはデプロイ時の -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 オプションで分かりやすいデプロイ名を指定。

static.png

無料プラン内だと動的アプリは3インスタンスまでしか建てられないが、静的アプリは無制限に建てられるのでbuildしてから静的リソースをあげるのが無難そう。

price.png


その他主要コマンド紹介

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


ls | 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 17m


rm | 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 47m


domain


ドメイン管理コマンド。あんま使わない。

空いているドメインと料金は公式サイトから確認できる。

https://zeit.co/domains

domains.png

サンプルということで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.

alias.png


カスタムドメインへのエイリアス

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

cjktech.png

ちなみに、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]

www.png


エイリアス一覧

$ 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 45m


logs


デプロイ先のログ確認コマンド。そんな使わない。

$ 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.244Z

certs, secrets は使ったことない

:moyai: 「...無料でこんだけできるのええ時代や」