初めまして。テックアカデミー開発チームの阿部です。
今回はNuxt.jsで作った静的サイトをホスティングサービスであるVercelを使って公開してみたので、その備忘録も兼ねての記事になります。
Vercelとは
フロントエンドのフレームワークを使ったプロジェクトのビルド＆ホスティングを管理してくれるサービスです。
Next.jsと相性の良いサービスですが、キラメックスではNuxt.jsを使ったプロジェクトが進行中だったため、今回はNuxt.jsを使ったプロダクトをホスティングしてみました。
Nuxt.jsプロジェクトの用意
プロジェクトの作成
まずはSSGを行うNuxt.jsのプロジェクトを用意します。今回はサンプルとしてvercel-sampleプロジェクトを作成します。
下記は作成時のログ。
$yarn create nuxt-app vercel-sample
yarn create v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-nuxt-app@3.6.0" with binaries:
- create-nuxt-app
create-nuxt-app v3.6.0
✨ Generating Nuxt.js project in vercel-sample
? Project name: vercel-sample
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username? abechws
? Version control system: Git
🎉 Successfully created project vercel-sample
今回は開発環境ではSSR、本番環境ではSSGで動作して欲しいので、Rendering modeとしてUniversal (SSR / SSG)、Deployment targetにStatic (Static/Jamstack hosting)を選択しています。
動作確認
実際の動作を念のため確認してみます。
まずは開発環境でSSRで動いているか。開発時、SSRで動作させたい場合は下記のコマンドで実行します。
$ yarn nuxt dev
上記で実行した環境はSSRで動いており、ソースコードの修正した内容もブラウザ上では自動で更新していました。
次はSSGの動作を確認します。
$ yarn nuxt generate $ yarn nuxt start
nuxt generateコマンドで静的ファイルを生成します。デフォルトでは /distに生成されます。
nuxt startコマンドは生成した静的ファイルへのルーティングをしてくれます。こちらも問題なく動いていることを確認できました。
問題なくプロジェクトを作成できたようです。今回はVercelを使ってホスティングするため、作成したプロジェクトのリポジトリをGitHubに作成しておきます。
Vercelで静的サイトをホスティングする
Vercelアカウントの準備
静的サイトを作成する準備ができたので、次はVercelを使って静的サイトをホスティングします。
利用する際にはGitHub/GitLab/BitBucketに用意したリポジトリを使うことになるので、アカウントも各サービスの認証を使って作成します。
Vercelのプロジェクトを作成
Vercelのアカウント登録が完了したら、先ほど作成したvercel-sampleをホスティングします。
NewProjectからImport Git Repositoryより、先ほど作成したvercel-sampleを選択します。
プロジェクトの設定画面では、「Build and Output Setting」にて静的サイトを生成するコマンドを指定します。
こちらが未設定の場合、デプロイ時に正しく静的サイトが表示されません。SSRのプロダクトを公開する時と違い、ここは自ら設定する必要があるので、注意が必要です。
上記の設定のみで、デプロイの準備は完了です。デプロイボタンを押せばVercelが自動でデプロイを行ってくれます。
今回公開したページはこちら。
最後に
以上で、Nuxt.js+Vercelを使って静的サイトを公開できました！
VercelはGitHubのPullRequest毎に自動でプレビュー環境を作ってくれるなど様々な便利な機能があり、フロントエンド開発の心強い味方です。
ホスティングまでも簡単なので、是非一度試してみてください。
