[Netlify] コマンドでデプロイする方法

# 概要
本記事では、コマンドで Netlify にデプロイする方法についてまとめる。コマンドを実行するために、netlify-cli の環境の用意と、トークンとサイト ID を取得する。

# 全体像
![スクリーンショット 2020-11-15 22.21.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/8ae064a8-5515-15de-db8f-8b5d1af52aff.png)


デプロイするために、3 つのパラメーターが必要

| 名前 | 説明 | 
|:--|:--|
|サイト|html が入ったフォルダ| 
|トークン|認証するときに必要な Token|
|サイトID|デプロイ先のサイトを示すID|

https://cli.netlify.com/commands/deploy/

# 準備
- GitHub のアカウント（ここでは、GitHub アカウントを利用してログインする）
- Docker 使える環境

# 公開とドメインの指定の流れ
## ファイルの追加
GitHub アカウントで[ログイン](https://app.netlify.com/login/email)すると、以下の画面が表示される
公開したいファイルが格納されているフォルダーをドラッグ&ドロップで赤枠に追加する

![スクリーンショット_2020-10-18_14_31_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/870862b3-6ccf-b469-a2cb-ef07c2584b51.png)

追加が完了すると、以下のような画面が表示され、適当な文字列でリンクが生成されていることが確認できる
![スクリーンショット_2020-10-18_14_37_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/038372ca-328c-5260-678b-b8be229ae5cf.png)

リンクをクリックすると、サイトが公開されていることが確認できる。

## ドメインの設定
自動的に生成されたリンクから任意のリンクに変更する。
[Domain settings] をクリック
![スクリーンショット_2020-10-18_14_37_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/4845758a-1389-d816-8247-2b0f60b5a413.png)

[Domains] の [Custom domains] の枠内にある [options] をクリック
![スクリーンショット_2020-11-03_19_24_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/d1c87ff7-04ab-de46-f3b5-2bc55149d44e.png)

[Site name] を設定すると、枠の下に `https://設定したSite name.netlify.app`と表示される。これが新しいサイトのリンクになる。
![スクリーンショット_2020-10-18_14_41_57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/e71c496d-35ab-6a55-7cc9-10617c99286a.png)

# サイトの更新・下書きサイトの公開の流れ
サイトの更新・下書きサイトを公開するためには`netlify`コマンドを実行すると便利。実行するためには、Node.js のバージョン8 以降の環境で Netlify CLI のインストールが必要となるため、ここでは、Docker 上で node.js の実行環境を用意する。
 
## `docker-compose.yml` の準備
以下を記述した`docker-compose.yml`をもとに、node.js の実行環境を準備する。ここでは、Docker の使い方については割愛する。

```
  node:
    image: node:14.10
    volumes: 
      - .:/project
    tty: true
    working_dir: /project
    command: bash
```

## Netlify-Cli のインストール
以下のコマンドを実行する（参考：[Netlify install](https://docs.netlify.com/cli/get-started/#installation))

```
npm install netlify-cli -g
```

## デプロイ（公開）
デプロイ時には、以下のコマンドを実行する。（参考：[NetlifyCli deploy](https://cli.netlify.com/commands/deploy/#deploy))

```
netlify deploy --dir=docs --prod --auth ${NETLIFY_AUTH_TOKEN} --site ${NETLIFY_SITE_ID}
```
`--dir=docs`デプロイするフォルダを指定（ここでは、「docs」）
`--prod`本番環境に公開。これを記載しないと、下書きサイトとして別のURLで公開される。
`--auth`デプロイに利用する認証トークン
`--site`サイトIDの指定

### NETLIFY_AUTH_TOKENの取得方法
[User Settings](https://app.netlify.com/user/applications#personal-access-tokens) からアクセス トークンを取得することができる。

[Personal access tokens] の [New access token] をクリック
![スクリーンショット_2020-11-03_19_53_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/de3c5bbd-88f0-6808-6ebc-dedeedce469d.png)

[Description of your token] にトークン名を入力し、[Generate token] をクリックする
![スクリーンショット_2020-11-03_19_53_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/816fc282-d6eb-f44d-e65d-e67e9beedb6e.png)

[New token created] にアクセストークンが表示される。[Done] をクリックすると、二度と表示できないのでコピーしておく。

![スクリーンショット_2020-11-03_19_57_44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/a2bbfaa7-9b28-8ba5-6346-2012f363ec4e.png)

### NETLIFY_SITE_IDの取得方法
ホーム でサイト ID を取得したいアイテムの [Site settings] をクリック 
![スクリーンショット_2020-11-03_20_01_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/d9010287-d667-0126-88c6-04cff411dcd5.png)

API ID に表示される文字列をコピーする。
![スクリーンショット_2020-11-03_20_02_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/df3c9ff4-0e6d-eaa1-edc3-245ca094579a.png)


# 参考
[Netlifyで新しいサイト作って、netlify-cliでデプロイする](https://qiita.com/Teach/items/2dc86404fc89747c7b27)