この記事の最終更新日: 2023年2月2日

Vue.jsプロジェクト(Vue3系&TypeScript)のロリポップへのデプロイ作業が、思ったより一筋縄でいかなかったので記事にまとめておきます。
この記事の流れを追っていけばスムーズにデプロイできると思います。
FTPソフトをダウンロード
まずはFTPソフトをダウンロードします。
私がダウンロードしたのは「Cyberduck」(ブラウザでダウンロードすると無料)です。
WindowsならFFFTPなど、使いやすいと感じるものを使いましょう。
(特にこだわりがなければCyberduckを使いましょう。)
Vue.Jsプロジェクトを作成
Vue CLIからサクッとプロジェクトを作成します。
まずはVue CLI(3系)をグローバルにインストールします。
#2系のVue CLIが入っているとエラーになるのでアンインストール
$ npm uninstall -g vue-cli
#Vue CLIをインストール
$ npm install -g @vue/cli
#プロジェクトを作りたいディレクトリで実行
$ vue create vue-project-sample
#選択肢が出るので、Manually select features へ移動してEnter
$ Vue CLI v4.5.15
$ ? Please pick a preset:
$ Default ([Vue 2] babel, eslint)
$ Default (Vue 3) ([Vue 3] babel, eslint)
$ ❯ Manually select features
# スペースで全部チェックをつけます。
# そしてEnterをクリック。
Vue CLI v4.5.15
$ ? Please pick a preset: Manually select features
$ ? Check the features needed for your project: (Press <space> to select, <a> to t
$ oggle all, <i> to invert selection)
$ ❯◉ Choose Vue version
$ ◉ Babel
$ ◉ TypeScript
$ ◉ Progressive Web App (PWA) Support
$ ◉ Router
$ ◉ Vuex
$ ◉ CSS Pre-processors
$ ◉ Linter / Formatter
$ ◯ Unit Testing
$ ◯ E2E Testing
# 2系か3系か選びます。3系を選ぶ。
$ ? Choose a version of Vue.js that you want to start the project with (Use arrow
keys)
$ 2.x
$ ❯3.x
# TypeScriptの記述法を聞かれています。class-styleという方法で記述する場合はy。(基本はこれで良いかと。)
$ ? Use class-style component syntax? (y/N)
# Babelを使用するか yes
$ ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? (Y/n)
# 使用するURLの形式。historyかhashか。一般的なのはhistoryなのでyes
$ ? Use history mode for router? (Requires proper server setup for index fallback
in production) (Y/n)
# CSS プリプロセッサは何を使用するか。with dart-sassを選択(node-sassを選んだらエラーになりました。)
$ ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): (Use arrow keys)
$ ❯ Sass/SCSS (with dart-sass)
$ Sass/SCSS (with node-sass)
$ Less
$ Stylus
# リンターとフォーマッター。ESLint + Prettierが一般的。
$ ? Pick a linter / formatter config: (Use arrow keys)
$ ESLint with error prevention only
$ ESLint + Airbnb config
$ ESLint + Standard config
$ ❯ ESLint + Prettier
$ TSLint (deprecated)
# リントを実行するタイミング。aで全部選択できます。どちらでも良いです。
$ ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
$ ❯◉ Lint on save
$ ◉ Lint and fix on commit
# Babel、PostCSS、ESLintなどの設定を個別の設定ファイルかpackage.jsonか選択。
$ ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
$ ❯ In dedicated config files
$ In package.json
# ここまでの設定をプリセットとして、次回以降プロジェクト作成の時に選択できるようにするか。(yes)
$ ? Save this as a preset for future projects? (y/N)
# プリセット名は適当でいいです。
$ ? Save preset as: mydefault
Vueプロジェクトをビルド
Vueファイルをロリポップに上げても動作しないので、
ビルド後のjsファイルをFTPソフト経由でロリポップにアップロードします。
プロジェクト直下にvue.config.jsファイルを作成
まず、プロジェクト直下に「vue.config.js」を作成。
ここにパスの設定を追加。これがないとデプロイした時にパスが通りません。
module.exports = {
publicPath: './',
}
src/App.vueを編集
サーバに置いた時のパスを揃えておきたいので、以下のように修正します。
(後で解説しますが、サーバにアップロードする時はdistディレクトリをの名前をappに変更してからアップロードします。)
<template>
<div id="nav">
<router-link to="/app">Home</router-link> |
<router-link to="/app/about">About</router-link>
</div>
<router-view />
</template>
src/router/index.tsを編集
こちらもパスにappをつけてやります。
const routes: Array<RouteRecordRaw> = [
{
path: "/app",
name: "Home",
component: Home,
},
{
path: "/app/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"),
},
];
画像を使用するときはサーバに直接画像ディレクトリを作成して、「https://~」で指定してやる。
ビルドの関係で、画像表示のパスが通らなかったり、再描画の際に表示されなくなったりします。
ロリポップサーバの適当な階層に「img」ディレクトリを作って、直接指定してやると楽です。
私はyurupro.cloudというドメインの配下にimgディレクトリを作成し、logo.pngとfavicon.icoを移動させました。
例 src/views/Home.vue
<template>
<div class="home">
<img alt="Vue logo" src="https://yurupro.cloud/img/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</div>
</template>
例 public/index.html
<!DOCTYPE html>
<html lang="">
~
<link rel="icon" href="https://yurupro.cloud/favicon.ico">
~
</html>
一応動作確認してみます。
$ npm run serve

特に問題なければビルドします。
$ npm run build

これからbuild済のファイルが入った、distフォルダをロリポップにデプロイ(アップロード)します。
FTPソフトウェアの設定
ロリポップとFTPソフトウェアの設定を済ませます。公式↓

失敗したら、FTPアクセス権限ページやIPアドレスを確認してみてください。
FTPソフトウェア経由でアップロード
やること
・imgディレクトリの作成&画像を入れる
・distをコピー
・コピーしたdistディレクトリの名前をappに変更
・ドメイン直下にappディレクトリをアップロード
以上で完了です。
お好みでVueプロジェクトにTailWindCSSを導入する場合
# 互換性のあるモジュールが必要なので、入っていたらアンインストール。
$npm uninstall tailwindcss postcss autoprefixer
#インストール
$ npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
# tailwindCSSとpostCSS設定ファイルを作成
$ npx tailwindcss init -p
postcss.config.jsファイルと、tailwind.config.jsファイルが生成されます。
tailwind.config.jsファイルを編集
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
"./src/**/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
src/index.cssファイルを作成
内容を以下の通り。
@tailwind base;
@tailwind components;
@tailwind utilities;
src/main.tsにimport “./index.css”;追記
import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import "./index.css";
createApp(App).use(store).use(router).mount("#app");
確認にsrc/views/Home.vueファイルに記述してみる
以下の1行をsrc/views/Home.vueに記述してみる。
<div class="text-5xl text-bold bg-pink-600">tailwind css</div>
<template>
<div class="home">
<div class="text-5xl text-bold bg-pink-600">tailwind css</div>
<img alt="Vue logo" src="https://yurupro.cloud/img/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
@Options({
components: {
HelloWorld,
},
})
export default class Home extends Vue {}
</script>
適用されていれば完了。

お疲れ様でした。

大阪のエンジニアが書いているブログ。
コメント