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

Last updated at 2021-12-01Posted at 2021-12-01

概要

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

これまで

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

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

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

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

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

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

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

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

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

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

ENV vars > New Env Varまで行って

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

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から持ってきます。

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(),
  })
}