NextJS(Typescript)を now にデプロイする

# NextJS(Typescript)を now にデプロイする

[これ](https://qiita.com/Gma_Gama/items/9df765e00d7fda733222)の続きとなります。。。
ので、nextjsの初期設定、circleCIでのプロジェクト作成は簡易的にできているながれですすめたい。


#### Table of Contents

0. now、Nextjs とは
1. now の初期設定をする
1. nextjs を now に手動デプロイする
1. nextjs を CircleCI を使って Auto Deploy する

## 0. now、Nextjs とは


[next.js](https://nextjs.org/)とは、Zeit社が提供しているReactを用いたSSR(SST)のOpen Source Projectです。
Vueで言うところのNuxtくらいの認識です。

[now](https://zeit.co/dashboard)とは、ZEIT社が提供しているconfigなしでデプロイできるHostToolです。使ってみ思いましたがひくくらい簡単です。

## 1. now の初期設定をする

[now](https://zeit.co/dashboard)にアクセスをし、ユーザー登録をおこなっていきます。
下の画面の Deploy Free ボタンをクリックしてアカウント作成に移動します。

![c2-zeit-top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/ffe87312-f988-0a6c-c6b2-94160a06ba6a.png)


今回は Contenue With GitHub を使って GitHub でアカウントを作成していきます。

![c2-zeit-signup.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/0561516c-dd58-0c2d-e7e7-7b5301140ab3.png)

アカウントの作成が完了するとダッシュボードに行くことができます。

![c2-zeit-dashboard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/e2834873-95e5-33aa-67a7-23682e21e6a4.png)

これで web 上の設定は完了です。
次に、now コマンドを install していきます。

```terminal
$ npm install -g now

# インストールが完了したら一応バージョンを確認いたします。

$ now --version
16.7.3
```

コマンドが完了したら、*now*コマンドを利用してログインしていきます。
メールアドレスを求められるので、ログインしたアカウントの Email アドレスを利用してログインをしていきます。

```terminal
$ now login
We sent an email to YOUR_EMAIL_ADDRESS Please follow the steps provided
  inside it and make sure the security code matches Happy Magellanic Penguin.
✔ Email confirmed
> Congratulations! You are now logged in. In order to deploy something, run `now`.
```

## 2. nextjs を now に手動デプロイする

```terminal
$ pwd
/your/project/directory
```

現状のディレクトリにいることを確認します。
nowでconfigで扱う、now.jsonファイルを作成していきます。

```now.json
{
  "name": "next-sample"
}
```

これで、プロジェクト名を固定してdeployすることができます。

```
ちなみにプロジェクト名を指定しない場合は、projectのroot directoryの名前が優先されるっぽいです。Gitのレポジトリとかpackage.jsonっぽい感じもしましたが、directory名っぽい。
```

```terminal
$ now --prod

Deploying ~/your/project/directory under YOUR_PC
> Using project PROJECT_NAME
> NOTE: To deploy to production (YOUR_PRJECT_NAME.now.sh), run `now --prod`
> Synced 1 file [4s]
> https://XXX.now.sh [4s]
> Ready! Deployed to https:/XXX.now.sh [in clipboard] [24s]

```

コマンドを入力すると build されてデプロイされます。
表示された URL を確認すると、作成した URL が表記されてるかと思います。

## 4. nextjs を CircleCI を使って Auto Deploy する


> これ書いてから気づいたのですが、PRなどの作成タイミングでauto deployがはしります。www
circleCIをdeployのみで考えている場合は必要ありません。


circleCI での now の設定は３段階。
1.now の token を発行して、circleCI の env に記載。最後に、circleCI の config から参照して deploy する形となります。

### 4-1. now token を発行する

nowのtokenが作られるタイミングは、loginの際に発行するものと、自分で作成するものがあります。
自分でtokenをの発行する方法は、ダッシュボード画面にいき Settings から token を発行することができます。

[dashboard](https://zeit.co/)にいき右上のユーザーアイコンから、Settings リンクをクリック。

![c2-dashboard-setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/9f2ead9e-3c1d-960b-6da4-24e9709f8a46.png)


setting画面にあるTokenリンクから、とtokenの設定画面に遷移します。

![c2-setting-token.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/01dfcdca-2d7e-63b3-cbb7-d1eeaa1d0c38.png)

現状tokenを利用している一覧表示のCreateをクリック

![c2-zeit-create-token.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/43f65ecc-8ab5-53ed-ec2b-b7e8a24cb001.png)

tokenを利用する名前を設定し、create tokenをクリックするとtokenが表示されます。

![c2-zeit-create-token-form.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/12b29529-f1e9-119b-87f3-18295f76641c.png)

![c2-zeito-token.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/d3b91c7d-7718-b61f-ca11-b22c9eedab87.png)


## 4-2. CircleCIに Environmentを設定する

nowのtokenの発行がおわったら、CircleCIのEnvironmentに記載していきます。
(Projectがある前提で話をしていきます。)

![c2-circleci-project-page.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/2c3f0a2f-5055-9936-cfc4-ba0bb0e1df51.png)


設定画面にいったらEnvironment VariablesからAdd Variablesを選択

![c2-circleci-setting-environement.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/3dc7a2df-b954-4f46-412a-28cea0331c7c.png)


先ほどCopyしたnow Tokenを入力して、Environmentの設定をします。

![c2-circleci-setting-variable-modal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144543/ac364a2d-5707-fbbe-d5e2-0e4500af7bca.png)


これで、.circleci/config.ymlで $NOW_TOKENで登録したtokenを利用できるようになりました。
最後にCIの設定をしていきます。

## 4-3. CircleCIの設定

設定が完了したら、circleciでデプロイできるよに、.circleci/config.ymlの編集をしていきます。

```.circleci/config.yml
version: 2.1
executors:
  node:
    working_directory: ~/project
    docker:
      - image: circleci/node:10.12-browsers
jobs:
  build:
    executor:
      name: node
    steps:
      - checkout
      - run:
          name: update-npm
          command: "sudo npm install -g npm@latest"
      - restore_cache:
          key: node-{{ .Branch }}-{{ checksum "package-lock.json" }}
      - run:
          name: npm install on ci
          command: npm ci
      - save_cache:
          key: node-{{ .Branch }}-{{ checksum "package-lock.json" }}
          paths:
            - ./node_modules
      - persist_to_workspace:
          root: .
          paths:
            - .
      - run:
          name: build flat
          command: npm run build
# ここから追記
  deploy-now:
    executor:
      name: node
    steps:
      - checkout
      - run:
          name: update-npm
          command: "sudo npm install -g npm@latest"
      - run:
          name: install now on global
          command: "sudo npm install -g now"
      - attach_workspace:
          at: .
      - run:
          name: deploy to now
          command: now deploy --token $NOW_TOKEN
# ここまで追記
workflows:
  version: 2
  build-and-cache:
    jobs:
      - build
      - deploy-now:
          requires:
            - build

```

でdeplpyすると、CircleCI経由でdeployすることが可能になります。
nowでauto deployもできるのでこの内容だけだと必要性を感じません。。。
now 自体も色々あるのであとで記載していこうかと。