💨

パラメータをVercelで管理して、設定したパラメータとURLクエリパラメータが同一の場合、制作実績ページを開くように実装

2022/03/12に公開

Next.js

Vercel

tech

こんにちはうえむーです。
今回はNext.js・VercelでパラメータをVercelで管理して、設定したパラメータとURLクエリパラメータが同一の場合、制作実績ページを開くように実装したことについてお話しします。

制作実績ページ作成する背景は、面談するときに個人の実績を展開した方がいいかと思ったのですが、
制作実績ページをコンプライアンスの関係で安易にページを展開したくなかったので、制限付きの制作実績ページを作成しようと思いました。

要件定義

まずは、要件定義です。制限付きの制作実績ページを作成するには以下をクリアしなければいけません。

・github上ではパラメーターや、APIの情報を第三者に公開しない
・パラメーターや、APIの情報をvercelで管理
・制作はなるべくシンプルに

上記の条件を踏まえ、画面設計をしました。
クエリパラメータの値とVercelの環境変数の値が同一だった場合は制作実績ページへ遷移、同一じゃない場合はトップページへリダイレクトする処理です。
一部の方に制作実績ページを展開してもそのあとにvercelの環境変数の値を変更しリデプロイすると、閲覧できなくなるする様にします。

APIを作成する。

まずは、APIを作成します。今回はsssapiというのサービスを導入しました。
これはスプレットシートでJSONで返すAPI化サービスです。
比較的にレスポンスが早く、小規模であればうってつけのサービスです。
ログインすれば、すぐに利用できます。

https://sssapi.app/

vercelで環境変数を設定する

次に、vercelで環境変数を設定します。

個人のプロジェクトを選択し
Settings > Environment Variablesの順で選択し、NAMEとVALUEを入力します。
適用する環境にDevelopmentを選択してAddします。

これで、vercelで環境変数を設定とAPIを作成完了しましたので実装します。

実装

実装する前に.envファイルで環境変数を設定します。
.envファイルを開きAPIとパラメーターを入力します。

ACHIEVEMENT='XXXXXXXXXXXXXXXXXXXXXXXXXXXX'
PARAM='XXXXXXXXXXXXXXXX'

※ACHIEVEMENT・・・sssapiで作成したAPIのURL
※PARAM・・・vercelの環境変数で設定した値

.envファイルを設定した後、next.config.jsファイルを開きenvの設定を追加します。

module.exports = {
 env: {
　　　　ACHIEVEMENT='XXXXXXXXXXXXXXXXXXXXXXXXXXXX'
　　　　PARAM='XXXXXXXXXXXXXXXX'
 },
...
};

これで、envの設定が完了しました。
次はテンプレート実装です。コードは以下のようになります。

compontents/extends/achivement.tsx


import React from 'react';
const SkillContent = (Jsondata, key) => {
  Jsondata = Jsondata.data;
  return (
    <>
    <li className={Jsondata.class} key={key}>
    { Jsondata.link !== null ? (
      <a href={`${Jsondata.link}`} target="_blank">
        <img
          src={Jsondata.image}
          alt={Jsondata.alt}
          width="515px"
          height="346px"
        />
      </a>
    ) : (
      <img
        src={Jsondata.image}
        alt={Jsondata.alt}
        width="515px"
        height="346px"
      />
    ) }
    </li>
    </>
  );
}
export default SkillContent;

pages/secret.tsx


import React from 'react'
import fetch from 'node-fetch'
import Achievement from '../components/secret/achievement'
import { GetServerSideProps } from 'next'

function Secret( { achievement } ) {
  return (
  　　　 <>
      <Achievement skill={ achievement }></Achievement>
    </>
  )
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { req } = context
        , split = req.url.split("=");

  if( split[1] === process.env.PARAM ) {
    const achievement = await fetch(process.env.ACHIEVEMENT)
      .then((res: { json: () => any }) => res.json())
      .catch(() => null);
    const achievements = achievement ? achievement : null;
    return {
      props: {
        achievement: achievements,
      },
    }
  } else {
    return {
      redirect: {
        permanent: false,
        destination: '/',
      },
    }
  }
}
export default Secret

ポイントは「pages/secret.tsx」の以下のコードです。
今回はGetServerSidePropsで実装して、クエリパラメータを取得して
クエリパラメータの値とenvで設定した値が完全に同一だった場合はは制作実績ページ公開、
同一でない場合はトップページへリダイレクト処理するように処理しております。

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { req } = context
        , split = req.url.split("=");

  if( split[1] === process.env.PARAM ) {
    const achievement = await fetch(process.env.ACHIEVEMENT)
      .then((res: { json: () => any }) => res.json())
      .catch(() => null);
    const achievements = achievement ? achievement : null;
    return {
      props: {
        achievement: achievements,
      },
    }
  } else {
    return {
      redirect: {
        permanent: false,
        destination: '/',
      },
    }
  }
}

これで実装は完了です。
あとは、対象ファイルをコミット、デプロイしたら完成です。

キャプチャーだけだと伝わりづらいですが、
クエリパラメータと環境変数の値が同一だった場合は制作実績のページが開けるようになりました。

まとめ

・vercelの環境変数を応用化すれば、制限付きの制作実績ページを作成できます。
・「sssapi」というAPIはシンプルでレスポンスが早い。

最後まで読んでいただきありがとうございます。

要件定義

APIを作成する。

vercelで環境変数を設定する

実装

まとめ

Discussion