Next.js + Tailwind + Docker + Cloud Run + お名前.com でホームページを作成して公開する。

# はじめに
個人的なホームページが欲しかったので、使ったことがない技術を使って作ってみました。
僕が作成したホームページが[こちら](https://koki-sugar.info/)になります。

# Viewの作成
今回僕が採用したのはNext.jsとCSSフレームワークとしてはTailwindを採用しました。それぞれ採用した理由は単純に使ってみたかったからです。
基本的にはNext.jsの[スタートガイド](https://nextjs.org/docs)をみながら作りました。
これを説明しているととんでもなく長い記事になりそうなので、違う記事で書くことにします。
自分の作りたいページが作成できたとして、以降読んでいただけると幸いです。僕の[ソースコード](https://github.com/sato9818/Homepage)も置いておきます。

# Dockerの導入
Cloud Run上でデプロイする上でコンテナが必要になってくるので、Dockerを使用します。これも[公式ドキュメント](https://nextjs.org/docs/deployment#docker-image)に例が載っているのでそれに従っていきます。

### Dockerのインストール
[ここ](https://docs.docker.com/get-docker/)からお使いのOSに合ったものをインストールしましょう。

### .dockerignoreファイルの作成
```.dockerignore
Dockerfile
.dockerignore
node_modules
npm-debug.log
README.md
.next
.git
```

### Dockerfileの作成
```Dockerfile:Dockerfile
# Install dependencies only when needed
FROM node:16-alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# If using npm with a `package-lock.json` comment out above and use below instead
# COPY package.json package-lock.json ./ 
# RUN npm ci

# Rebuild the source code only when needed
FROM node:16-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN yarn build

# If using npm comment out above and use below instead
# RUN npm run build

# Production image, copy all the files and run next
FROM node:16-alpine AS runner
WORKDIR /app

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json

# Automatically leverage output traces to reduce image size 
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

CMD ["node", "server.js"]
```

### コンテナをBuild ＆ Run
Runした後[localhost:3000](localhost:3000)にアクセスしてViewが表示されたら、成功です。
```
# Build
docker build -t nextjs-docker .
# Run
docker run -p 3000:3000 nextjs-docker
```

# Cloud Runにデプロイ
Cloud Run に関しては[公式ドキュメント](https://cloud.google.com/run?hl=ja)に詳しく書いてあります。個人的にはサーバーの管理をする必要がない=サーバーレスなプラットフォームというくらいの認識です。

気になるお値段は
>新規のお客様には、最初の 90 日間に Google Cloud で使用できる無料クレジット $300 分を差し上げます。すべての Google Cloud のお客様は、1 か月あたり 200 万リクエストを無料で利用できます。

とあるので相当人気のある個人ホームページにならなければ基本的には無料で使えると思います。

さて、デプロイの方法ですが、まずGoogleアカウントを作りましょう。
ここからは[こちら](https://github.com/vercel/next.js/tree/canary/examples/with-docker#deploying-to-google-cloud-run)に手順が書いてあるのでその通りに進めて行きます。

### gcloudコマンドを使えるようにする
Google Cloud SDKを[こちら](https://cloud.google.com/sdk/docs/install)からインストールします。インストールに成功するとgcloudコマンドを使えるようになります。gcloudコマンドを使って、コマンドラインからGoogle Cloudを操作できるようにします。
```
> gcloud --version
Google Cloud SDK 370.0.0
bq 2.0.73
core 2022.01.21
gsutil 5.6
```

### 自分のGoogleアカウントと紐付ける
`gcloud auth login`コマンドを実行します。
```
> gcloud auth login
```
例のGoogleのログイン画面が出てくるので使いたいアカウントでログインしましょう。

### 新しいプロジェクトの作成
[こちら](https://console.cloud.google.com/projectselector2)から新しいプロジェクトを作成。
![スクリーンショット 2022-03-25 16.03.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/2af5632d-e5f4-7e62-a224-63f4c1d46a58.png)

名前を適当につけましょう。この時プロジェクト名とプロジェクトIDを同じにしておくと後々楽です。
![スクリーンショット 2022-03-25 16.37.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/8dd61eb9-b6a4-37b4-84ea-660fada24154.png)



### お支払い情報の作成
お支払い情報を登録してプロジェクトに紐付けないとCloudを使えません。

[こちら](https://console.cloud.google.com/billing)からお支払い情報を登録してプロジェクトと紐づけましょう。
![スクリーンショット 2022-03-25 16.20.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/b2ea6bfc-72ad-98bf-3a49-cf5c3d2800a8.png)

### コンテナをビルドしてContainer Registoryに保存する

```
> gcloud builds submit --tag gcr.io/PROJECT-ID/homepage-front --project PROJECT-ID
```
`PROJECT-ID`は先ほど作ったプロジェクトのIDを入力します。(上の例だとhomepage)
`homepage-front`は自分の好きな名前を入力しましょう。

正常に実行が終わるとContainer Registoryにイメージが新しく追加されているのがわかると思います。
↓から確認できます。
![スクリーンショット 2022-03-25 16.40.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/61ff4a9e-8675-6193-ba2b-434ca0e29925.png)

### デプロイ
とうとうデプロイです！
以下のコマンドを実行してCloud Runにデプロイします。

```
> gcloud run deploy --image gcr.io/PROJECT-ID/homepage-front --project PROJECT-ID --platform managed
```

先ほどと同じように`PROJECT-ID`と`homepage-front`　を変えて実行しましょう。
実行すると
1. サービス名の入力を求められます。Enter キーを押してデフォルト名になります。（上のhomepage-frontの名前）
2. リージョンを指定するよう求められます。asia-northeast1（東京）、asia-northeast2（大阪）などを選択します。
3. 未認証の呼び出しを許可するように求められます。[y] と入力してEnter キーを押しましょう。

これでデプロイ完了です！
GCPのCloud Runのページにいき、プロジェクトをクリックするとURLが出てくるので、そのURLをクリックすると自分で作成したホームページにアクセスできます！
![スクリーンショット 2022-03-25 16.52.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/56f31415-3266-08fe-bd71-c6165ee10276.png)
![スクリーンショット 2022-03-25 16.59.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/e096d51a-14a1-d2b8-c841-be5885571392.png)
![スクリーンショット 2022-03-25 16.59.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/354e3ade-885a-faa9-ad4b-ed8bb4b8c8c6.png)


これでデプロイの作業自体は終了です！

# ドメインを取得して、割り当てる
さてデプロイができたのはいいですが、ドメインがカッコよくないので、新しくドメインを取得して行きましょう。

### ドメインの購入
僕は[お名前ドットコム](https://www.onamae.com/)でドメインを購入しました。僕が購入したときは.infoのセールをしていて0円で購入できました。1円で購入できるものもたくさんあるので、安心してください。

- Whois情報公開代行メール転送オプション
- ドメインプロテクション

はとりあえず割に合わなそうなのでつけませんでした。

## 購入が完了したら
### Cloud Run上で動いているサービスと、購入したドメインを紐づける
1. Cloud Runのページ内の「カスタムドメインを管理」をクリック
![スクリーンショット 2022-03-25 17.33.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/ac83dbc5-70db-22e4-9b69-d511e37d04de.png)

1. 「マッピングを追加」をクリック
![スクリーンショット 2022-03-25 17.34.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/45830e8d-dbfe-bc74-3e96-9efee19464ba.png)

1. モーダルが表示されるので、ドメインを紐づけたいサービスと取得したドメインを入力して「続行」をクリック
![スクリーンショット 2022-03-25 17.35.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/f7799238-2e2a-c20a-e96a-eda0b6dee061.png)

1. ウェブマスターセントラルの画面に移動して、ドメインの所有権を証明する。ドメインプロバイダはお名前.comなので、プルダウンから「Onamae.com」を選択。TXTレコードが出てくるので、お名前.comでDNSにレコードを追加する。
![スクリーンショット 2022-03-25 17.35.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/f54a8029-8782-c35f-4931-ce4ea1d9e4e3.png)

1. お名前.comにログインする。「ネームサーバーの設定」の「ドメインのDNS設定」をクリックする。
![スクリーンショット 2022-03-26 23.22.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/a4c2064e-6ddd-9f66-20ca-89df962683a9.png)

1. 取得したドメイン一覧が出てくるので、Cloud RUnで設定したドメインを選択して「次へ」をクリック。
![スクリーンショット 2022-03-26 23.23.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/e66aaac6-1319-e740-8c00-43d25917c4a0.png)

1. 「DNS設定」の「DNSレコード設定を利用する」をクリック。
![スクリーンショット 2022-03-26 23.23.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/680d7364-10ff-f182-1f11-6c757bc1b9dd.png)

1. TYPEを「TXT」に設定して、ウェブマスターセントラルの画面に出てきた「TXTレコード」をVALUEに入力（google-site-verification=も全て）して追加する。
![スクリーンショット 2022-03-26 23.24.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/6a64580b-a4b8-dece-3978-15d0735eb06a.png)

1. 「確認画面へ進む」をクリック。転送用のネームサーバーが（01.dnsv.jp）等になっていない場合、チェックボックスをクリックしてネームサーバーを変更する。
![スクリーンショット 2022-03-26 23.24.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/7d22ab78-1628-10e1-8f50-05cf1c0f565d.png)

1. 変更が完了し、しばらく待つと、ウェブマスターセントラルでドメインの所有権を証明が完了します。
1. 証明が完了したら、先ほどと同様のやり方でAレコードを4つ、AAAAレコードを4つ追加します。
![mapping.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/515d24bc-629d-93fc-2b7b-8294e838d68d.png)

1. 以上が完了すると、反映までに少し時間がかかりますが以下のように完了マークがつきます。
![スクリーンショット 2022-03-26 23.48.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702275/7690d2a4-d911-8117-fb1e-23b428a7ef84.png)

これでカスタムドメインを紐づけることに成功しました！取得したドメインにアクセスして、自分のホームページが表示されるか確認しましょう！

# 最後に
いかがだったでしょうか。もしかしたら何か間違えてるところがあるかもしれないので、何かありましたら是非指摘していただきたいです！