エックスサーバーでもnode.jsの開発、今回はNuxt.jsの開発を行う事ができます。
開発以外にも、デプロイする方法もあるので試していってください。
Nuxt.jsを使いますが公開環境はプロセスを立ち上げずにgenerateした静的ファイルになり、開発環境は一時的にプロセス立ち上げてVSCodeで開発していく流れです。
レンタルサーバーでもgitコミットは出来るので、開発だけレンタルサーバーで実施して反映する本番環境はgit pullしてなにがしにデプロイする事も可能です。
目次
まずはnode.jsのセットアップ
最初にレンタルサーバーにSSH出来るように設定したのち、node.jsのインストールを行います。
レンタルサーバーは基本的にはnodeは入っていないので、nodeを導入するのはこちらの記事を参照ください
自分が設定したnodeバージョンはこちら
$ node -v
v16.13.2Nuxt.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のみをデプロイする方法もありますがこの記事では割愛します。
レンタルサーバーでnode.jsを導入する方法について、こちらの記事に解決したい項目毎にまとめました。
お疲れ様でした。
コメントを残す