Hi 🙋‍♀️about me 😎posts 📚

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

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
{
  "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 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

サンプルということで 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        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: 「...無料でこんだけできるのええ時代や」