Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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
ここら辺とか参考にするといいかも

showroom
SHOWROOMは、アイドルやアーティストとインターネット上でコミュニケーションが楽しめるライブ動画ストリーミングプラットフォームです。
https://www.showroom-live.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした