はじめに
前々回：【スキルアップできる採用試験】fwywd（フュード）採用一次試験を迷わずに進めるために必要な知識 ~開発環境構築~
前回：【スキルアップできる採用試験】fwywd（フュード）採用一次試験を迷わずに進めるために必要な知識 ~サイト制作~ (React,Next.js,TailwindCSS)
前回、【１次試験】fwywd 採用試験の課題であるポートフォリオサイトが完成できる部分までを記事にしました。
今回はそのポートフォリオサイトのmeta設定とVercelで公開するところまで進めます。
meta設定
今回のポートフォリオサイト制作は1ページなのでtitleやdescriptionなどはindex.jsxや_app.jsxに直接書いていってもいいのですが、今後ページが増えていくと想定してmeta設定をコンポーネント化して管理し、ページによって内容を出し分けられるようにしたいと思います。
コンポーネント、PageHeadを作成
components
├ Header
│ └ index.jsx
...
└ PageHead
└ index.jsx
Headタグの中にmeta設定を書く
// components/PageHead/index.jsx
import Head from "next/head";
export const PageHead = () => {
return (
<Head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>HOME | 私のポートフォリオサイト</title>
<meta
name="description"
content="IT業界に転職するためプログラミングを全力で楽しく学習しています。"
/>
<meta property="og:title" content="HOME | 私のポートフォリオサイト" />
<meta
property="og:description"
content="IT業界に転職するためプログラミングを全力で楽しく学習しています。"
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com" />
<meta property="og:image" content="https://example.com/ogp.png" />
<meta property="og:site_name" content="私のポートフォリオサイト" />
{/* Facebook */}
<meta property="fb:app_id" content="Facebookのapp_idを入力" />
{/* Twitter */}
<meta name="twitter:card" content="summary" />
</Head>
);
};
ちなみにシェアされた際の画像表示はog:imageで設定しますが、絶対パス（https://example.com/ogp.pngなど）でないと読み込めないので注意が必要です。
ページごとにmeta情報を出し分ける設定
// components/PageHead/index.jsx
...
export const PageHead = ({
title = "HOME",
description = "IT業界に転職するためプログラミングを全力で楽しく学習しています。",
}) => {
return (
...
<title>{title} | 私のポートフォリオサイト</title>
<meta name="description" content={description} />
...
ページごとに出し分ける時は<PageHead>を呼び出し渡してあげればOKです。
// pages/index.jsx
<PageHead title="テスト！" />
環境変数を.envに書く
環境変数とはなんぞや？と思い調べてみました。
環境変数とは、OSが設定値などを永続的に保存し、利用者や実行されるプログラムから設定・参照できるようにしたもの。プログラムの実行時などに必要となる、利用者やコンピュータごとに内容が異なる設定値などを記録するために用いられる。
環境変数
とのことです。とりあえず今回はサイト名やURLを.envといったファイルに書いて取り出すようにします。
.envに関しては下記を参考にさせていただきました。
Next.js における環境変数 (env) の基本的な設定方法
ルートディレクトリに.envを作成
Next.jsでは.envを使うために特別な処理は必要ないので、そのままルートディレクトリに.envというファイルを作成します。
必要な情報を書く
NEXT_PUBLIC_SITE_NAME=私のポートフォリオ
NEXT_PUBLIC_SITE_URL=https://example.com
NEXT_PUBLIC_FB_ID=Facebookのapp_idを入力
ブラウザで表示する内容に関してはPUBLICとつけないとundefindとなるため忘れないようにします。
PageHead/index.jsxで置き換える
// components/PageHead/index.jsx
<title>
/* ページのタイトル | サイトの名前 */
{title} | {process.env.NEXT_PUBLIC_SITE_NAME}
</title>
※注意！！
.envまわりの設定をした時はローカルサーバーの立ち上げをしなおさないと反映がされませんでした。
私は打ち間違いがないかなどをチェックして解決するまでに時間がかかってしまったため.envの設定をしたら必ずyarn devやnpm run devをしなおすようにしましょう。
ブラウザのデベロッパーツールで反映されていればOKです。
シェア時に反映されているかチェック
サイト公開まで
ドメイン取得
今回はGoogle Domainsで取得しました。
管理画面や手続きがシンプルでわかりやすくオススメです。
ドメイン検索
カートに入れて購入
Vercelにデプロイ
サイトの公開にVercelを利用します。
登録など諸々を済ませて管理画面に進みます。
New Projectの作成
管理画面からNew Projectをクリックします。
GitHubからインポートする
手順通りに進める
Create a TeamはスキップしてOKです。
DeployをクリックするとVercelでURLが作成されデプロイが完了します。
表示されたURLにアクセスすると制作したサイトにアクセスできます。
スマホの実機確認などがこれで手軽にできるのでとても便利です。
ドメインを反映させる
サイトの公開はされましたが先ほど取得したドメインからはまだアクセスができないのでその設定をします。
管理画面から先ほどデプロイされたポートフォリオサイトを選択
設定画面に移動して先ほど取得したドメインを入力
ネームサーバー設定
なぜか私の画面にVercelのネームサーバーが表示される画面がありませんでした…
下記の記事を参考にしてみてください。
Google Domainsで取得したドメインとnotion blog を繋ぐ
これで無事取得したドメインでのサイト公開ができたと思います。
Vercelでは5分もあればドメインが反映されるのでとても便利です。
fwywdさんの一次試験にチャレンジした感想
ここまで読んでいただきありがとうございました。
文章を書くということに慣れておらず読みにくい部分もあったかと思いますが、少しでも誰かのお役に立てることができれば幸いです。
また、こうして経験したことを記事にするということでたくさんの発見がありました。
- 自分が今何がわからないのか明確になる
- 他の人がわかるようにと思うと知識の深堀りが必要になり、それが結果的に役に立つ
- 自分がよかれと思って伝えようと思ったことが、他の人のわかりやすさにつながるとは限らない
- 伝えたい人を明確にイメージして先回りした記事を執筆するために機転が必要になること
これらは記事を書くということだけではなく、普段の生活やビジネスの中にも重要な部分を占めているように思います。
「伝えたい誰かをイメージして記事を書く」ことによってたくさんの発見につながるといったことが最大の収穫でした。
このような素晴らしい課題を公開してくださった fwywd さんには感謝の気持ちでいっぱいです。ありがとうございました。
また、この記事が参考になったと思ったらぜひLGTMを押していただけると嬉しいです！