Netlify CLIを使ってNetlifyにwebサイトをデプロイする

Netlifyを使って静的webサイトをホストする機会がでてきたので、その時のメモです。 netlify-cliのインストールドキュメントにはグローバルインストールの方法がかかれています。 $ npm install […]

Netlifyを使って静的webサイトをホストする機会がでてきたので、その時のメモです。

Table of Contents

netlify-cliのインストール

ドキュメントにはグローバルインストールの方法がかかれています。

$ npm install -g netlify-cli

個人的な好みで今回は--save-devしてみました。

$ npm install netlify-cli --save-dev

コマンドは./node_modules/netlify-cli/bin/cli.jsで実行できます。

$ ./node_modules/netlify-cli/bin/cli.js -h

  Usage: cli [options] [command]

    The premium hosting service for modern static websites

    Read more at https://www.netlify.com/docs/cli


  Commands:

    create [options]   Create a new site
    deploy [options]   Push a new deploy to netlify
    update [options]   Updates site attributes
    delete [options]   Delete site
    sites [options]    List your sites
    open [options]     Open site in the webui
    init               Configure continuous deployment

  Options:

    -h, --help                 output usage information
    -V, --version              output the version number
    -t --access-token   Override the default Access Token
    -e --env      Specify an environment for the local configuration

新しくサイトを作成する

サイトの作成はcreateコマンドを使います。

$ ./node_modules/netlify-cli/bin/cli.js create -h

  Usage: create [options]

  Create a new site

  Options:

    -h, --help                   output usage information
    -n --name              Set .netlify.com
    -d --custom-domain [domain]  Set the custom domain for the site
    -p --password [password]     Set the password for the site

--access-tokenオプションでNetlify管理画面から作成したパーソナルアクセストークンを使うといいかなと思います。

$ ./node_modules/netlify-cli/bin/cli.js create -n YOUR_SITE_NAME --access-token YOUR_NETLIFY_PERSONAL_ACCESS_TOKEN
Creating new site
Site created: https://app.netlify.com/sites/YOUR_SITE_NAME

デプロイ用のサイトが出来上がった。

webサイトをデプロイする

あとは作成したサイトにwebサイトをデプロイするだけです。

デプロイするコマンドはnetlify deployを使います。

$ ./node_modules/netlify-cli/bin/cli.js deploy -h

  Usage: deploy [options]

  Push a new deploy to netlify

  Options:

    -h, --help         output usage information
    -s --site-id [id]  Deploy to site with 
    -p --path [path]   Path to a folder or zip file to deploy
    -d --draft         Deploy as a draft without publishing

site-idに先程作成したサイトのIDを入れます。
この値はNetlify管理画面にある「API ID」を使ってください。

–site-idのパラメータは、API IDを使う。

デプロイするファイル構成

今回はclient/配下のファイルだけデプロイします。

$ tree -L 2 -I node_modules
.
├── client
│   ├── css
│   ├── img
│   ├── index.html
│   └── js
└── package.json

デプロイする

$ ./node_modules/netlify-cli/bin/cli.js deploy --site-id YOUR_API_ID  -p client/ --access-token YOUR_NETLIFY_PERSONAL_ACCESS_TOKEN
Deploying folder: client/

Deploy is live (permalink):
  https://XXXXXXXXXXXXXXXXXX.SITE_NAME.netlify.com

Last build is always accessible on https://SITE_NAME.netlify.com

この時-dオプションをつけるとドラフト（非公開）でデプロイすることができます。

$ ./node_modules/netlify-cli/bin/cli.js deploy --site-id YOUR_API_ID  -p client/ -d  --access-token YOUR_NETLIFY_PERSONAL_ACCESS_TOKEN
Deploying folder: client/

Draft deploy XXXXXXXXXXXXXXXXXX:
  https://XXXXXXXXXX.SITE_NAME.netlify.com

デプロイが終われば、Netlifyの管理画面にプレビュー画像も表示されるようになります。

おわりに

Netlifyはバージョン管理などもできますので、静的webサイトやSPAをホストするのであればかなり便利です。
あと複数人で管理される際は、package.jsonにnetlify-cliを入れておいてそちらからコールしてもらうほうがトラブル少ない気がします。