記事内に広告が含まれています。

ロリポップに Vue.js 3 アプリケーションを公開する（デプロイ用サンプルあり）

2024年9月23日

この記事では、ロリポップに Vue.js（Vue 3）アプリケーションを公開する方法を紹介します！Vue.js を使ったポートフォリオサイト作成の参考にしていただければと思います。

Vue.js アプリケーションに対応するロリポップのプラン

ポイント

  • Vue.js は、HTML, CSS, JavaScript の集合体として動作します。
  • ロリポップのどのプランでもデプロイ（配備）できます。
  • 安価なロリポップは、Vue.js でのポートフォリオサイトの作成・公開に最適です。

当サイトはライトプランを利用して動作検証しています。

ポートフォリオサイト作成でデータベース連携をするなら、ライトプラン以上がおすすめ！

プラン名データベース速度データ容量料金
エコノミープラン99 円～
ライトプラン264 円～
スタンダードプラン495 円～
ハイスピードプラン550 円～
エンタープライズプラン2200 円～

ロリポップ公式サイト

今回ロリポップに公開する Vue.js アプリケーション

https://watermargin.net/my-vue-app に Vue.js アプリケーション（Vue 3）を配備しています。Vue.js 公式サイトのクイックスタートに従って作成した、Homeページと Aboutページを持つシンプルな構成です。

Vue.js アプリケーションの作成

Vue.js 公式サイトのクイックスタートの手順に従って、Vue.js アプリケーションを作成します。

クイックスタート | Vue.js (vuejs.org)

コマンドプロンプトで npm create vue@latest を実行し、質問に答えるかたちでプロジェクトの構成を決めていきます。プロジェクト名を my-vue-app としています。その他、有効化しているオプションは Yes を、無効化しているオプションは No を選択しています。

コマンドプロンプト

C:\Users\colou\OneDrive\デスクトップ\dev\vue.js>npm create vue@latest

> npx
> create-vue

Vue.js - The Progressive JavaScript Framework

√ Project name: … my-vue-app
√ Add TypeScript? … No / Yes
√ Add JSX Support? … No / Yes
√ Add Vue Router for Single Page Application development? … No / Yes
√ Add Pinia for state management? … No / Yes
√ Add Vitest for Unit Testing? … No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? … No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in C:\Users\colou\OneDrive\デスクトップ\dev\vue.js\my-vue-app…

Vue.js アプリケーションの実行確認

Vue.js アプリケーションが作成されると、Done. Now run: と表示されます。下記、緑でハイライトしているコマンドを実行していきます。

コマンドプロンプト

...
Scaffolding project in C:\Users\colou\OneDrive\デスクトップ\dev\vue.js\my-vue-app…

Done. Now run:

cd my-vue-app
npm install
npm run dev

npm run dev を実行すると、ローカルホスト上でアプリケーションが実行されます。今回の例では、http://localhost:5173/ でアプリケーションが実行しています。

コマンドプロンプト

C:\Users\colou\OneDrive\デスクトップ\dev\vue.js>cd my-vue-app

C:\Users\colou\OneDrive\デスクトップ\dev\vue.js\my-vue-app>npm install

added 126 packages, and audited 127 packages in 21s

13 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

C:\Users\colou\OneDrive\デスクトップ\dev\vue.js\my-vue-app>npm run dev

> my-vue-app@0.0.0 dev
> vite

VITE v5.4.7 ready in 1398 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help

ブラウザで http://localhost:5173/ を開きます。アプリケーションが表示されました。

ベースパスの設定

ポイント

Vue.js アプリケーションをレンタルサーバーに配備する際に、ベースパスの指定を行うことで、アプリケーションに含まれる JavaScript ファイルや CSS ファイルへの参照パスを設定することができます。ベースパスの指定を行わないと、JavaScript ファイルや CSS ファイルへの参照エラーが生じます。

ベースパスの指定は、vite-config.ts 内で行います。Visual Studio Code で my-vue-app フォルダを開き、vite-config.ts を修正します。

Visual Studio Code で my-vue-app フォルダを開く

C:\Users\colou\OneDrive\デスクトップ\dev\vue.js\my-vue-app>code .

vite-config.ts の編集

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  base: '/my-vue-app/',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Vue.js アプリケーションのビルド

npm run build を実行し、レンタルサーバーへ配備するファイルを生成します。

C:\Users\colou\OneDrive\デスクトップ\dev\vue.js\my-vue-app>npm run build

> my-vue-app@0.0.0 build
> run-p type-check "build-only {@}" --


> my-vue-app@0.0.0 type-check
> vue-tsc --build --force


> my-vue-app@0.0.0 build-only
> vite build

vite v5.4.7 building for production...
✓ 46 modules transformed.
dist/index.html                      0.46 kB │ gzip:  0.30 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-TVUuFFQd.js    0.23 kB │ gzip:  0.20 kB
dist/assets/index-xMnWMIJe.js       95.78 kB │ gzip: 37.56 kB
✓ built in 2.14s

C:\Users\colou\OneDrive\デスクトップ\dev\vue.js\my-vue-app>

コマンド実行後、dist フォルダに出力結果が保存されています。

.htaccess によるリダイレクト設定

ポイント

Vue.js のクライアントサイドレンダリングでは、"my-vue-app/about" のようにサブディレクトリを要求する際に、about.html の実ファイルがリターンされるわけではなく、index.html を利用します。ルーティング発生時に、常に index.html がリターンする指定を記述します。

.htaccess の作成

dist フォルダ内に、.htaccess ファイルを作成します。

.htaccess の記述

Vue.js アプリケーション名を踏まえて、次のように記述します。RewriteBase と RewriteRule に、my-vue-app を反映している点に注意してください。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /my-vue-app/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /my-vue-app/index.html [L]
</IfModule>

アップロード先ディレクトリの用意

FTP でロリポップのサーバーに接続し、Vue.js アプリケーション名のフォルダを作成します。

Vue.js アプリケーションの配備

Vue.js アプリケーションのソースコードを、サーバーに配備（アップロード）します。

Vue.js アプリケーションの表示

https://watermargin.net/my-vue-app にアクセスします。アプリケーションが表示されました。

ルーティングの動作も確認します。画面下部の About リンクをクリックします。

URL が https://watermargin.net/my-vue-app/about に代わり、ページ上のコンテンツも更新されています。ルーティングが動作していることが分かります。

デプロイ用サンプルアプリケーション

今回デモ用に作成した Vue.js サンプルアプリケーションです。

my-vue-appダウンロード

ポイント

my-vue-app\dist 内に含まれる全てのファイルとフォルダを、サーバーにアップロードください。

本サイトでのデモ

再掲になりますが、Vite App (watermargin.net) に実働デモを公開しています。

まとめ

本稿では、Vue.js アプリケーションの作成から配備まで行いました。ロリポップに Vue.js アプリケーションを公開することができました。

  • Vue.js アプリケーションの作成
  • ベースパスの設定
  • .htaccess によるリダイレクト設定
  • ロリポップサーバーに Vue.js アプリケーションの配備

再掲：Vue.js アプリケーションに対応するロリポップのプラン

ポイント

ポートフォリオサイト作成を行う方は、データベースが使えるライトプラン以上をおすすめします。

プラン名データベース速度データ容量料金
エコノミープラン99 円～
ライトプラン264 円～
スタンダードプラン495 円～
ハイスピードプラン550 円～
エンタープライズプラン2200 円～

ロリポップ公式サイト

-Vue, プログラミング