エックスサーバーでNuxt.jsを開発して本番反映する方法

エックスサーバーでもnode.jsの開発、今回はNuxt.jsの開発を行う事ができます。

開発以外にも、デプロイする方法もあるので試していってください。

Nuxt.jsを使いますが公開環境はプロセスを立ち上げずにgenerateした静的ファイルになり、開発環境は一時的にプロセス立ち上げてVSCodeで開発していく流れです。

レンタルサーバーでもgitコミットは出来るので、開発だけレンタルサーバーで実施して反映する本番環境はgit pullしてなにがしにデプロイする事も可能です。

まずはnode.jsのセットアップ

最初にレンタルサーバーにSSH出来るように設定したのち、node.jsのインストールを行います。

レンタルサーバーは基本的にはnodeは入っていないので、nodeを導入するのはこちらの記事を参照ください

自分が設定したnodeバージョンはこちら

$ node -v
v16.13.2

Nuxt.js 3系のインストール

npx nuxi init <project-name>
cd <project-name>
npm install

https://nuxt.com/docs/getting-started/installation

Tailwind CSSのセットアップ

Nuxt.jsを使うだけなら不要ですが、自分が使っているデザインテンプレートがTailwind CSS+Vue.jsを前提としているのでTailwind CSSを使えるようにセットアップしていきます。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
mkdir -p assets/css/
touch assets/css/main.css
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  app: {
    baseURL: "/<サブディレクトリ運用なのでパス設定>",
    head: {
      htmlAttrs: { lang: "ja" },
      title: "<サイトタイトルの設定>",
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        { hid: "description", name: "description", content: "<metaタグのdescripton>" },
      ],
    },
  },
  css: ["~/assets/css/main.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [
  ],
};
@tailwind base;
@tailwind components;
@tailwind utilities;

https://tailwindcss.com/docs/guides/nuxtjs#3

VSCodeの設定

Nuxt.jsの開発環境としてVSCodeを設定していきます。

リモートSSHでエックスサーバーに置いたソースコードを編集できるようにしていきます。この設定をする事でポートフォワードを使って手元のブラウザからNuxt.jsで立ち上げたプロセスにアクセス出来るようになります。

基本的にはこちらの記事の内容を設定します

Nuxt.jsの場合だと開発時のサーバー立ち上げでブラウザリロードのプロセスも立ち上がるようなのでポートフォワードの設定も追加します。

(通常であればVSCodeのターミナルでサーバー立ち上げすればポートフォワードしてくれますが、Nuxt.jsのコマンドラインではブラウザアクセスのみなのでブラウザリロード用のプロセスをポートフォワードしてくれないため記述追加しています)

Host xserver                                                                                                            
  User <ユーザー名>                                                                                                         
  HostName <サーバーID>.xserver.jp                                                                                            
  Port 10022                                                                                                            
  LocalForward 127.0.0.1:3000 127.0.0.1:3000                                                                            
  LocalForward 127.0.0.1:24678 127.0.0.1:24678                                                                             

https://code.visualstudio.com/docs/remote/ssh#_always-forwarding-a-port

開発サーバー立ち上げ

上記のVSCodeの設定をするだけでNuxt.jsの編集はできるようになりますが、開発サーバーを立ち上げる事でブラウザから実際の表示を確認することができます。

ここからはVSCodeのターミナルから以下のコマンドを実行

$ npm run dev
Nuxi 3.0.0                                                                                                                                       21:46:33
Nuxt 3.0.0 with Nitro 1.0.0                                                                                                                      21:46:33
                                                                                                                                                 21:46:34
  > Local:    http://localhost:3000/<サブディレクトリ>/ 
  > Network:  http://<サーバーポート>:3000/<サブディレクトリ>/

ℹ Vite client warmed up in 1147ms                                                                                                                21:46:37
✔ Nitro built in 449 ms                                                                                                                    nitro 21:46:37

http://localhost:3000/<サブディレクトリ>/

のURLにアクセスすれば立ち上げた開発環境にアクセスできます。

以上で開発環境の設定は終了しました。

次に、開発が完了した場合の本番環境へのデプロイ設定をまとめておきます。

本番環境へのデプロイ

レンタルサーバーにはNuxt.jsで生成されたHTMLファイルをデプロイする用途がオススメです。プロセスを立ち上げるサーバーサイドレンダリングでのデプロイはオススメできません。

今回は本番サーバーと同じサーバー上で開発をするのであらかじめシムリンクを貼ります。

cd <ドメイン名>/public_html
ln -s /<ソースファイルのROOTディレクトリパス>/.output/public <公開パス>

上記の設定が済んでいればgenerateすれば本番デプロイの完了です。

npm run generate

エックスサーバーにはgitがデフォルトで入っているので、バージョン管理の開発をしつつ本番に反映する時のみgenerateする流れです。

本来であれば開発環境と本番環境を分けた方がいいので、CIで回してHTMLのみをデプロイする方法もありますがこの記事では割愛します。

お疲れ様でした。

ホーム » 環境構築 » エックスサーバーでNuxt.jsを開発して本番反映する方法

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA