LoginSignup
1

More than 5 years have passed since last update.

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

Posted at

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

1.Nuxt.jsを導入

Nuxt.js

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

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

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

2.必要なモジュールをインストール

今回利用するのはbackpack

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

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

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

yarn add backpack-core

3.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を書き出してくれます。

4.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側の起動スクリプトを読み込んでくれます。

5.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!

6.いよいよデプロイする

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

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

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

これからやることは

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

build.png

ここまで成功したら、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
ここら辺とか参考にするといいかも

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1