Nuxt.js+Express.jsをPleskにデプロイしてみた

Nuxt.jsとExpress.jsで作ったサイトをPleskにデプロイ

Nuxt.jsをPleskにデプロイする情報が少なかったので共有

環境

• Nuxt.js v2
• Express.js v4
• backpack.js
• Cent OS7
• Plesk Onyx
• Node.js v9
• axios module

１．Nuxt.jsを導入

Nuxt.js

基本的には公式のインストール手順に沿ってやれば大丈夫です。

今回はサーバーサイドフレームワークをExpressに選択
Axios moduleも選択して導入してください。

勝手に環境を作ってくれるのは大分でかい！

２．必要なモジュールをインストール

今回利用するのはbackpack

Nuxt1系のテンプレートでも使われていたやつですね。

これを導入することで、serverの設定時にES6が使えるようになり、build時に起動ファイルを生成してくれます。

下記コマンドで対象のフォルダに追加

yarn add backpack-core

３．package.jsonを編集

Nuxtの起動スクリプトの修正をします。

下記の記述を

package.json

"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
},

こちらに変更

package.json

"scripts": {
    "dev": "backpack dev",
    "build": "nuxt build && backpack build",
    "start": "cross-env NODE_ENV=production node build/main.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
}

これでyarn run buildをしたときにbuildフォルダの下にmain.jsを書き出してくれます。

４．backpackを介してNuxtを起動する設定

backpack.config.jsファイルをフォルダ直下に作成します。

backpack.config.js

module.exports = {
  webpack: (config, options, webpack) => {
    config.entry.main = './server/index.js'
    return config
  }
}

これでNuxt起動時にbackpackが読み込むExpress側の起動スクリプトを読み込んでくれます。

５．Axios moduleの設定

Axiosの設定をしないとルーティングをした際にサーバーエラーがでます。

nuxt.config.jsからaxiosを設定しましょう！

きっとこういうのがあります。

nuxt.config.js

axios: {
    // See https://github.com/nuxt-community/axios-module#options
},

これを自分なりに設定していくんですが、今回は最低限

nuxt.config.js

axios: {
    baseURL: 'https://example.jp/', // ローカルでは必要ない本番環境にデプロイ時設定してください。
    credentials: false,
    browserBaseURL: process.env.BASE_APP_URL || '/'
}

このように設定すれば最低限OK!

６．いよいよデプロイする

gitとかftpなど何でもいいので、pleskの対象のフォルダにnode_modules以外をアップロードしてください。

Pleskの対象のWebドメイン下のNode.jsを有効にしてください。

package.jsonが右側に表示されたら読み込まれている証拠です。

これからやることは

• まずはNPM installしましょう！
• Run scriptからbuildコマンドを実行しよう

ここまで成功したら、Application Startup FileをNuxtフォルダのbuild/main.jsに設定する
これで右側にmain.jsが表示されます。

ここまで来たら、Restart Appを押して再起動します。
これでデプロイが完了です。

起動しない場合は

• PHP SettingsのPHPが有効になっていないかチェック
• そもそもbuildができないというときは

https://support.plesk.com/hc/en-us/articles/360000644114-Node-js-Run-Script-option-doesn-t-work-no-node-binary-in-the-current-PATH
ここら辺とか参考にするといいかも