⛅

CloudflareでNuxtページをデプロイしたお話

に公開
Cloudflare
Nuxt 3
tech

無料で使えて且つ、商業利用可能なCDN（静的サイト提供ネットワーク）の一つにCloudflareがあります。

他のサービスと比較した時の明確な優位点として、帯域制限がないことがあげられます。
要するに、アクセス過多になって膨大な通信量になってしまっても無料で使い続けられるよってこと。安心だね。

今回はNuxt3のプロジェクトを作って、デプロイしてみる。その時にデプロイ設定で手間取ったので、記録しておく。
それのついでにプロジェクト作成方法も記録しておく。そんな記事。

この記事で行うこと

この記事では以下の順で書いていきます

  1. Gitpod上でNuxtプロジェクトを作成する
  2. 静的サイトのためのNuxt設定値を変更する
  3. CloudFlareページを作成する
  4. 自動ビルドする際の環境変数を修正する

1. Gitpod上でNuxtプロジェクトを作成する

環境構築が面倒なのでnodeがデフォルトで入っているGitpodのデフォルト環境をそのまま使用します。

新しいワークスペースを作成して、ターミナルでプロジェクト生成コマンドを実行。

npx nuxi init <プロジェクト名>

続く設定では、

  • 実行して良いか？
    • コマンド実行したいのでy
  • パッケージ管理方法は？
    • 今回はyarnを使いました
  • 匿名の情報収集して良いか？
    • なんとなくno
  • gitリポジトリ設定するか？
    • そもそもGitHubリポジトリから生成したからno

を聞かれるので、それぞれ答えます。

ここまですると、

workspace
└ <リポジトリ名>
    └ <プロジェクト名>
        ├ 自動生成された内容たち
	......

のようになり、このままコミットするとリポジトリ直下にプロジェクト名フォルダがあり、その中身がプロジェクト本体という形になります。

リポジトリ直下がこんな感じ。ちょっと無意味な1階層ができてしまっている。

なのでコマンドでプロジェクトのファイルをリポジトリ直下に移動してしまいます。

mv ./<プロジェクト名>/* ./

および、

mv ./<プロジェクト名>/.* ./

（下のコマンドは.で始まる隠しファイルを対象として移動させています）

これで1階層分だけ構造を削ることができました。

（この操作はCloudflareにデプロイする設定値のための伏線だったりする。）

あとは空のプロジェクトフォルダを削除してしまえば準備完了。
リポジトリ直下にpageなりtemplatesなりのフォルダを作ってNuxtのコードを書いていきます。

2. 静的サイトのためのNuxt設定値を変更する

Nuxtでページを作った後は静的サイトを作成するためにnuxt.config.tsに設定を追加していきます。

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  ssr:  true,
  target: "static"
})

静的サイトにしたいので、5行目のtargetをstaticとする設定を追加。
そして事前にレンダリングを済ましてしまうためにssr設定値はtrueとします。

これでターミナルからyarn generateコマンドを実行すると静的ファイルジェネレーターが動いて、.output/public内にアップロードするべきhtmlファイルが生成されるようだ。

準備ができたらコミット&プッシュしてCloudflareに連携できるようにしておきます。

3. CloudFlareページを作成する

作成したページをCloudflareにアップロードするためにPagesという機能を使います。

上の方にあるwebsiteはドメイン取得などの関係なので今回はスルー。
静的サイトのホスティングではWorkers & Pages内にあるOverviewから行います。

（ハンバーガーメニューの下の方にあるので、1回迷子になった）

Create Applicationボタンを押した後に出てくるページはWorkers作成が初期表示なのでPagesタブに移動してから、connect to GitボタンでGithubとの連携をします。

Githubログイン後、連携先のリポジトリを選択。そしたらBegin setupで設定をはじめます。

ここでの設定値は2つだけしかないので簡単。

  • build commandがyarn generate
  • build output directoryがdist

とします。
静的ファイルを生成するこのコマンドで出力されるディレクトリは.output/publicだったのですが、cloudflare的にはdistを使うようです。地味なつまずきポイント。

ここで、今回は1.の操作中にディレクトリ構造を1段階あげて以下のようになっているが、もしも構造がことなるなどリポジトリ直下にpackage.jsonがない場合は、その位置を指定してあげる必要がある。

<リポジトリ名>
  ├ 自動生成された内容たち
  　package.json
　　......

Root directory(advanced)という部分をクリックして開いてあげて、リポジトリ直下からみてpackage.jsonが存在するディレクトリを指定してあげます。

例えば、以下のようにnuxt-new-appフォルダの中にpackage.jsonがある場合はこお設定値をnuxt-new-appとしてあげる必要があるわけです。

<リポジトリ名>
  ├ nuxt-new-app
    ├ 自動生成された内容たち
    　package.json
　　  ......

1リポジトリに複数のプロジェクトを作って管理したい場合なんかはこの設定値を変えることで、Cloudflare上ではプロジェクトを分けるなんて芸当ができるわけだ。
変な構造している関係で書いてある記事がないので多分ここもつまずきポイント。

4. 自動ビルドする際の環境変数を修正する

さて、ビルドのコマンドも、ビルド結果が出力される先も完璧なのでデプロイを実行してみると、エラー吐きます。一番つまずいたポイント。

エラーログによると、ロックファイルがこのインストールによって変更されてしまいました。このロックファアイルは明確に禁止です（ざっくり英語翻訳）とのこと。

どうやらこれは、Gitpod上でのYarnのバージョンが1であるが、cloudflareで使用する標準のYarnはバージョンが2のものを使用しているためらしい。

そこでEnvironment variablesにてYarnのバージョンを指定する環境変数を用意してあげる必要があるようだ。
YARN_VERSION=1とするだけの設定だが、これがないとデプロイできない。つまずいている時間の大体はこのエラーだったように思う。

このまで設定をすると無事デプロイが完了できる。

Domainsでサイトを表示するためのURLが発行されるので、それを使ってサイトにアクセスができるようになる。

大きなつまずいたポイントとしては、以下の2点。

  • Root Directory設定をリポジトリのディレクトリ構造に合わせる
  • 環境変数YARN_VERSIONで開発で使用しているyarnのバージョンに合わせる

つまずきつつも、ちゃんとサイトを公開できたのでこの記事はここでおしまい。

Discussion