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

📋 目次（クリックで展開）

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

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

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

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

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

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

サンプルアプリケーションは、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 フォルダを開く

Terminal window
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 を実行し、レンタルサーバーへ配備するファイルを生成します。

Terminal window
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 アプリケーションの表示

ホスト先の URL にアクセスします。アプリケーションが表示されました。

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

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

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

今回デモ用に作成した Vue.js サンプルアプリケーションです。
my-vue-app.zip
my-vue-app\dist 内に含まれる全てのファイルとフォルダを、サーバーにアップロードください。

まとめ

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

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

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

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

💬 コメント