Nuxt.jsとExpressで新規プロジェクトを作成する方法をいくつか検証してみました。Nuxt.jsとExpressでアプリケーションを作成すると、SSR（サーバーサイドレンダリング）もデフォルトでやってくれるし、処理もサーバーサイドとフロント側で共通化できたりもして便利です。
どのような作成方法がある？
プロジェクト自体はvue-cliで作成したりすることができます。
基本的な作成方法
Nuxt.jsのマニュアルに紹介されているように、スターターテンプレートがあります。
vue init nuxt-community/starter-template <project-name>
これで最小限のNuxt.jsプロジェクトを作成することができますので、これにExpressを入れれば作成は可能です。ただ、もっと簡単にExpressを入れたプロジェクトを作成することができます。
Express入りのテンプレートを使う
上記のnuxt-communityの他のリポジトリを見てみると、他にもいくつかテンプレートが用意されています。TypeScript入りのtypescript-template等。その中にexpress-templateもありますので、そちらを使ってプロジェクトを作成することができます。
vue init nuxt-community/express-template <project-name>
これならもっと簡単にNuxt.js+Expressのプロジェクトを作成することができます。
ただ、これで試してみたところ、どうもExpress側のプログラムを更新してもホットリロードが行われないようで、その度にいちいちサーバーを再起動しなければなりません。ちょっと面倒だったので他のプロジェクト作成方法も探してみました。
create-nuxt-appを使う
同じくnuxt-communityのリポジトリに、create-nuxt-appというものがありました。これはNuxt.jsのアプリケーションを作成する際に、構成を自分で選んで作成することができる非常に便利なものです。
nuxt-community/create-nuxt-app: Create Nuxt.js App in seconds.
下記のどちらかのコマンドで作成することができます。（僕はyarnの方は試していません）
npx create-nuxt-app <my-project>
yarn create nuxt-app <my-project>
下記の構成を選択することができます。
- サーバーサイドのフレームワーク（Express等）
- UIフレームワーク（Bootstrap, Bulma等）
- axiosを使うか
- EsLintを使うか
他にもissueを見るとTypeScriptを使うかも選択できるようにしたい、といった話も出ているので、実装されると嬉しいです。今後にも期待。
これでExpressを選択するとExpressが動作するプロジェクトを作成することができます。しかもこちらはちゃんとNuxt.js側、Express側どちらのプログラムを修正してもちゃんとホットリロードしてくれるようになっています。（正確に言うと、package.jsonのスクリプトのnodemonで--watchを指定しているためです。監視すべきフォルダが複数あるのであれば何度でも--watchを使うことができます）
ためしにexpress-templateに入っているユーザー情報取得処理をコピーしてみました。server/index.jsに下記のような処理を追加して、users.jsを読み込みます。ついでにルーティングも/apiベースにしておきます。
const router = express.Router();
router.use(require("../routes/users"));
app.use("/api", router);
Vueコンポーネント側でも同様に読み込みます。
async asyncData() {
let { data } = await axios.get("/api/users");
return { users: data };
}
表示も同様です。
<div v-for="user in users" :key="user.name">
{{ user.name }}
</div>
まとめ
今回はとりあえずNuxt.js+Expressで簡単にプロジェクトを作成する触りの部分だけをやってみました。まだプロダクションビルド等も試していません。ちなみにTypeScriptも入れたかったのですが、どうもExpress側がうまくいかなかったので一旦諦めました。
他にもMySQL接続やTwitter認証等、アプリケーションに必要なものを試しているので、うまく行ったものが増えていったらまた色々記事を追加していきたいと思います。（ちなみにDBはSequelizeで特に問題なくうまくいっていて、Twitter認証をPassportで試しているところです。認証はセッションやNuxt.js側のstateの対応があるのでちょっと時間がかかりそう）
Top comments (0)