Next.js + Typescript で作成したWebアプリをVercelにデプロイした

## 概要

タイトルの通りですが、これまで作成してきたWebアプリをVercelにデプロイして完了したいと思います。

![貼り付けた画像_2021_12_01_23_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/dea85e23-e955-4d3d-4851-7bcd0a0dd5bb.png)

## これまで

Hasuraにユーザーのデータと仮定してデータを作成し

https://qiita.com/ryosuketter/items/8b01d53d0609f78c2e0e

https://qiita.com/ryosuketter/items/59a05d4eb5c715287ded

データを外部APIとして取得できるようにして、Next.js（apollo）を使ってgraphQLを通じてHasuraにクエリやミューテーションができるようにしました。

https://qiita.com/ryosuketter/items/9e18295d78dc12a1a7f5

Hasuraから取得したユーザーデータの一覧ページと詳細ページを作りながら、`SG`と`ISR`を学んできました

https://qiita.com/ryosuketter/items/442db08856093e6cfeea

リファクタリングぽい内容ですが、React customHooks を利用してロジックとUIを切り離すこともやりました。

https://qiita.com/ryosuketter/items/1142c47913440369b660

この記事でデプロイまでを完了させて最終的なゴールを達成したいと思います。

## 目的（最終的なゴールを達成する）

- 仕事で使っている技術のキャッチアップと復習
- 使う可能性がある技術の理解度向上

## Hasuraのエンドポイントにアクセスコントロールをつける

これまで使ってきたHasuraのエンドポイントは誰でもアクセス可能な状態です。なので、Vercelデプロイ前にアクセスコントロールをしたいと思います。

JWTトークンを用いた認証もありますが、今回はHasura admin secretのkeyを使った認証をやりたいと思います。

![Cursor_と_Projects_-_Hasura_Cloud.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/1692df9e-dfac-e432-f839-09742f3c9357.png)

`ENV vars` > `New Env Var`まで行って

![_Hasura基礎編__Nextjs_Hasura_Apollo_Clientで学ぶモダンGraphQL_Web開発___Udemy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/482f2925-0d5a-7e40-7eff-ed895af47051.png)

Valueはなんでもいいです。そして`Add`をクリックします。`Launch Console`をクリックします。

![API_Explorer___Hasura.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/da3856a8-4ba9-1003-5dfc-f51d0edab822.png)

`x-hasura-admin-secret`がセットされていますね。これが有効になっている限り、APIにアクセスする際にkey: `x-hasura-admin-secret`とvalue（セットしたヤツ）を合わせないとアクセスできなくなります。

Next.jsでもHasuraから作成した、`x-hasura-admin-secret`のvalueを環境変数として持たせます。

```.env.local
NEXT_PUBLIC_HASURA_KEY="xxxxxxxxxxxxxxxx"
NEXT_PUBLIC_HASURA_URL="https://ryosuketter-hasura-test.hasura.app/v1/graphql"
```

アクセスする際に、`header`にkey: `x-hasura-admin-secret`の指定が必要なのでセットしましょう。
ついでに、`NEXT_PUBLIC_HASURA_URL`も環境変数化してます。

valueは`.env.local`から持ってきます。

```ts:lib/apolloClient.ts
const createApolloClient = () => {
  return new ApolloClient({
    ssrMode: typeof window === 'undefined',
    link: new HttpLink({
      uri: process.env.NEXT_PUBLIC_HASURA_URL,
      headers: {
        'x-hasura-admin-secret': process.env.NEXT_PUBLIC_HASURA_KEY,
      },
    }),
    cache: new InMemoryCache(),
  })
}
```

`yarn build`して`yarn start`すれば確認できると思います。

## Vercelにデプロイ

### github上にレポジトリ作成

ローカル上のコードをコミットして、今度はgithub

![Cursor_と_Create_a_New_Repository.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/dd0ab2f0-db35-ec14-4124-259695f42a95.png)

画像の通りじゃなくてもOK。リモートレポジトリ作ってpushしましょう。

### Vercel

今度はVercel側に行きます。Githubの認証が終わったらログインできます。

https://vercel.com/

githubと紐づけたら作成したレポジトリと紐づけます。

![Cursor_と_New_Project_–_Vercel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/08bb3a45-0dac-5fec-b6b2-8ebb654ffe42.png)

Vercelはpush（branch: `main`）したら自動デプロイされるので、その前に動かしたいコマンドを設定します。

テスト書いてたら、テストがパスするかなどもできます（今回はテスト書いてませんが）。

![_Hasura基礎編__Nextjs_Hasura_Apollo_Clientで学ぶモダンGraphQL_Web開発___Udemy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/54c69adf-4811-c156-0498-bc9eaf8d000c.png)

テスト書いてたら、これを記載してもいいと思います。

`yarn test`してパスしたらビルドが走ります。という意味です。

### Vercel に 環境変数をセット

ローカルで作成した2つの環境変数をセットしましょう。

![Cursor_と_New_Project_–_Vercel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/72107625-b11f-7983-01a1-365558e17494.png)

![Cursor_と_New_Project_–_Vercel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/8d30822f-08a6-ed5d-2993-ad2aa5c025ef.png)

では、`Deploy`をクリックします。

![スクリーンショット 2021-12-02 1.13.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/e801a8e1-8dbb-282e-c651-07c2a7412c89.png)

こんな感じになると思います。デプロイできたらこうなります👇

![スクリーンショット 2021-12-02 1.15.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/f816f9b8-9d3b-49f5-9788-b7ce4534185d.png)

何かしらURLが生成されデプロイできたので、アクセスして今まで作った機能を検証してみてください。

Hasuraとの通信もできていると思います。

また、ユーザーを作成して、SGされたページを見ると、最初は新規作成ユーザーが反映されていなくて、２回目みたら反映されていることを確認できると思います。

:v:

## さいごに

下記のような構成を学ぶ旅も本記事で完結です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/3e7f7a3d-c5aa-ce8e-97ed-cedb51f6dc5a.png)

めっちゃ触りだけな内容なので、これから深く学んでいこうと思います。

## アウトプット100本ノック実施中

https://qiita.com/ryosuketter/items/713474dbd009870e4103